文章目錄

1.什么是Material Design
2.Toolbar
3.滑動選單
- 3.1DrawerLayout
- 3.2NavigationView
4.懸浮按鈕和可互動提示
- 4.1FloatingActionButton
- 4.2Snackbar
- 4.3CoordinatorLayout
5.卡片式布局
- 5.1CardView
- 5.2AppBarLayout
6.下拉重繪
7.可折疊式標題欄
- 7.1CollapsingToolbarLayout
- 7.2充分利用系統狀態欄空間

1.什么是Material Design

Material Design是由谷歌的設計工程師們基于傳統的優秀設計原則，結合豐富的創意和科學技術所發明的一套全新的界面設計語言，包含了視覺，運動，互動效果等特性，而事實上，Material Design更像是一種設計思想和理念，而本節我們并不是要以設計師的角度去學習Material Design，而是以一個開發者的角度去學習使用一些符合Material Design理念的一些控制元件，

2.Toolbar

Toolbar繼承了ActionBar的所有功能，而且靈活性很高，可以配合其他控制元件來完成一些Material Design的效果，

基本使用步驟：
1.更改程式的標題欄主題，
2.在布局中加入Toolbar，
3.在活動中替換標題欄，

示例：

//步驟一，values下的styles檔案
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">//因為我們要引入toolbar，所以這里選擇無標題欄主題
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
//步驟二
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"//單獨令標題欄為深色主題
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />//令標題欄中的選單項為淺色主題

</LinearLayout>
//步驟三
public class MainActivity extends AppCompatActivity {

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//將標題欄替換為toolbar
    }
}

更改toolbar上顯示的文字：

我們可以在活動中加入android：label屬性來指定toolbar上顯示的文字，

給toolbar添加選單項：

使用步驟與給普通的actionbar添加選單項類似，

示例：

//選單布局
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/back"
        android:icon="@drawable/back"
        android:title="Back"
        app:showAsAction="always" />//始終以圖片的形式存在于標題欄

    <item
        android:id="@+id/setting"
        android:icon="@drawable/setting"
        android:title="Setting"
        app:showAsAction="ifRoom" />//如果空間允許則以圖片的形式存在于標題欄，否則以文字的形式

    <item
        android:id="@+id/delete"
        android:icon="@drawable/delete"
        android:title="Delete"
        app:showAsAction="never" />//始終以文字的形式存在于標題欄
</menu>
//活動
public class MainActivity extends AppCompatActivity {

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {//引入選單布局
        getMenuInflater().inflate(R.menu.toolbra,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {//給選單中的各個選單項設定點擊事件
        switch (item.getItemId()){
            case R.id.back:
                finish();
                break;
            case R.id.setting:
                Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }
}

3.滑動選單

就是我們手機上常見的側拉欄，

3.1DrawerLayout

使用方法：

DrawerLayout布局只允許其下有兩個直接子布局，第一個是主界面的布局，第二個是側拉欄的布局，

示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


    </FrameLayout>

    <TextView
        android:id="@+id/text_view"
        android:text="This is menu"
        android:background="#fff"
        android:textSize="30sp"
        android:layout_gravity="start"//側拉欄的布局必須宣告這一屬性，left表示側拉欄在左，right表示側拉欄在右，start則會根據系統語言來自動選擇
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.drawerlayout.widget.DrawerLayout>

一個小問題：

這里可能存在一個問題，用戶可能并不知道你的程式會有側拉欄的功能，所以這里谷歌建議我們在標題欄中添加一個側拉欄對應的按鈕，用于打開側拉欄，

示例：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
        setSupportActionBar(toolbar);
        ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);//toolbar的最左側有一個系統默認存在的按鈕，而該方法能讓該按鈕顯示出來
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//這個按鈕本身的圖案是一個回傳的箭頭，而這里我們可以更改它的圖案
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbra,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home://給這個系統默認存在的按鈕添加點擊事件
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.back:
                finish();
                break;
            case R.id.setting:
                Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }
}

3.2NavigationView

在上節中我們側拉欄中的內容有些單薄，而NavigationView可以幫助我們很輕松的豐富側拉欄中的內容，

使用步驟：

1.聲名依賴，
2.準備好NavigationView的menu項，
3.準備好NavigationView的headerLayout
4.在布局中加入NavigationView，
5.可以在活動中給NavigationView的各個選單項設定點擊事件，

示例：

//步驟一
dependencies {
    implementation 'com.google.android.material:material:1.2.1'//material design的相關庫
    implementation 'de.hdodenhof:circleimageview:3.1.0'//這是一個開源專案，可以幫助我們很輕松的實作圖片圓形化的功能，
}
//步驟二
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">//表示組內的所有選單項只能單選
        <item
            android:id="@+id/call"
            android:title="Call"
            android:icon="@drawable/nav_call" />

        <item
            android:id="@+id/friends"
            android:title="Friends"
            android:icon="@drawable/nav_friends" />

        <item
            android:id="@+id/location"
            android:title="Location"
            android:icon="@drawable/nav_location" />

        <item
            android:id="@+id/mail"
            android:title="Mail"
            android:icon="@drawable/nav_mail" />

        <item
            android:id="@+id/task"
            android:title="Task"
            android:icon="@drawable/nav_task" />
    </group>
</menu>
//步驟三
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="180dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image_view"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"
        android:layout_width="70dp"
        android:layout_height="70dp" />

    <TextView
        android:id="@+id/mail"
        android:textColor="#fff"
        android:text="mail: 1938796569@qq.com"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/username"
        android:textColor="#fff"
        android:text="username: yangxu"
        android:layout_above="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>
//步驟四
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </FrameLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/header_layout"/>

</androidx.drawerlayout.widget.DrawerLayout>
//步驟五
final DrawerLayout drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView=(NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.call);//將call選單項設定為選中狀態
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {//可以在這里使用switch陳述句區分各個選單項
        drawerLayout.closeDrawers();
        return true;
    }
});

4.懸浮按鈕和可互動提示

4.1FloatingActionButton

該控制元件可以幫助我們很輕松的實作懸浮按鈕的效果，

示例：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:src="@drawable/ic_done"
        android:layout_margin="16dp"
        android:layout_gravity="bottom|end"//此處的end同樣也是根據系統語言來自動選擇left或right
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="8dp"/>//該屬性可以調整懸浮按鈕下的陰影狀態
        
</FrameLayout>

//我們還可以給這個懸浮按鈕注冊一個點擊事件
FloatingActionButton fab=(FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(MainActivity.this,"ok",Toast.LENGTH_SHORT).show();
    }
});

4.2Snackbar

在此之前我們向用戶發送提示資訊時最常用的便是Toast了，但是Toast僅僅只能通知用戶一些簡單的資訊，而用戶則只能被動接收，因為沒有什么辦法能讓用戶來進行選擇，

現在讓我們設想一個場景當用戶在洗掉檔案時，如果不小心洗掉了幾個重要的檔案，假設我們只是用Toas來提示用戶而沒有給出取消的方法時，相信用戶肯定會抓狂吧，而Snackbar則可以很好的解決這個問題，

示例：

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view,"you delete some import data",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {//setAction()方法的第一個引數是按鈕名，第二個是監聽器
            @Override
            public void onClick(View view) {a
                Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
            }
        }).show();
    }
});

4.3CoordinatorLayout

如果你已經運行了我們在上面講的代碼的話，那你一定會發現Snackbar的提示資訊將我們的懸浮按鈕給遮擋住了，這樣是十分影響界面的美觀的，而我們本節要講的CoordinatorLayout就可以解決這個問題了，

CoordinatorLayout是一個升級版的FrameLayout，它可以監聽其所有子控制元件的各種事件，然后幫助我們做出最為合理的回應，

示例：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:src="@drawable/ic_done"
        android:layout_margin="16dp"
        android:layout_gravity="bottom|end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="8dp"/>
        
</androidx.coordinatorlayout.widget.CoordinatorLayout>

5.卡片式布局

5.1CardView

卡片式布局中的所有控制元件都將被放置在一張卡片上，給人一種立體的感覺，接下來我們就用RecyclerView來展示卡片布局的特點，

示例：

//主活動布局
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
//RecyclerView子項布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp"//該屬性用來指定卡片布局圓角的弧度
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/fruit_image"
            android:src="@drawable/orange"
            android:scaleType="centerCrop"//該屬性表示以同步的比例對圖片進行縮放
            android:layout_width="match_parent"
            android:layout_height="100dp" />

        <TextView
            android:id="@+id/fruit_name"
            android:text="orange"
            android:textSize="16sp"
            android:layout_margin="5dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</androidx.cardview.widget.CardView>
//子項的類
public class Fruit {
    private String name;
    private int image;
    
    public Fruit(String name,int image){
        this.image=image;
        this.name=name;
    }

    public String getName() {
        return name;
    }

    public int getImage() {
        return image;
    }
}
//RecyclerView的配接器
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<Fruit> mList;

    public MyAdapter(List<Fruit> list){
        mList=list;
    }

    public class ViewHolder extends RecyclerView.ViewHolder{
        TextView name;
        ImageView image;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            name=itemView.findViewById(R.id.fruit_name);
            image=itemView.findViewById(R.id.fruit_image);
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,parent,false);
        ViewHolder viewHolder=new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit=mList.get(position);
        holder.name.setText(fruit.getName());
        holder.image.setImageResource(fruit.getImage());
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }
}
//主活動
private List<Fruit> list=new ArrayList<>();

initFruits();
RecyclerView recyclerView=(RecyclerView) findViewById(R.id.recycler_view);
GridLayoutManager manager=new GridLayoutManager(this,2);
recyclerView.setLayoutManager(manager);
MyAdapter adapter=new MyAdapter(list);
recyclerView.setAdapter(adapter);

public void initFruits(){
    for(int i=0;i<50;i++){
        Fruit fruit=new Fruit("orange",R.drawable.orange);
        list.add(fruit);
    }
}

5.2AppBarLayout

如果你已經運行過上一節示例中的代碼的話，那么你一定會發現RecyclerView布局將Toolbar標題欄給遮擋住了，這同樣會影響我們界面的美觀，而我們在本節中要學的AppBarLayout就可以解決這個問題了，

AppBarLayout實際上是一個垂直方向上的LinearLayout，不同的是它在內部做了很多滾動事件的封裝，并應用了Material Design的設計理念，

示例：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|snap|enterAlways"/>
        //該屬性可以使控制元件更好的配合滑動事件，
        //其中scroll表示當recyclerview向上滾動時，Toolbar會跟著一起向上移動并實作隱藏；
		//snap表示當Toolbar還沒有完全隱藏或顯示時，會根據當前的距離自動選擇隱藏還是顯示；
		//enterAlways表示當recyclerview向下滾動時，Toolbar會跟著向下移動并重新顯示，
        
</com.google.android.material.appbar.AppBarLayout>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>//我們這里讓recyclerview向下偏移一個標題欄的長度

6.下拉重繪

我們在日常使用app時，經常會用到下拉重繪這個功能，而在本節中我們就來實作該功能，

示例：

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

//我們還要在活動中去處理重繪的邏輯
final SwipeRefreshLayout swipeRefreshLayout=(SwipeRefreshLayout) findViewById(R.id.swipe_layout);
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);//設定進度條的顏色
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        //重繪的邏輯代碼,此處一般是從網咯中獲取資料，因此會開辟一個執行緒來進行處理，
        swipeRefreshLayout.setRefreshing(false);//重繪完成后，關閉進度條
    }
});

7.可折疊式標題欄

7.1CollapsingToolbarLayout

我們可以利用CollapsingToolbarLayout布局，來幫助我們實作可折疊式的標題欄，不過CollapsingToolbarLayout是不能單獨存在的，它只能作為AppBarLayout的直接子布局來使用，而AppBarLayout又必須是CoordinatorLayout的子布局，接下來我們就來看一個CollapsingToolbarLayout的示例吧，

示例：

//新活動的布局
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"//該屬性用于設定當標題欄完全折疊式的背景顏色
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:src="@drawable/orange"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>//該屬性表示該控制元件會隨著折疊而折疊

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar02"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>//該屬性表示該控制元件不會隨著折疊而折疊


        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"//該屬性用于給懸浮按鈕定義一個錨點
        app:layout_anchorGravity="bottom|end" />//該屬性用于設定懸浮按鈕相對于錨點的位置

</androidx.coordinatorlayout.widget.CoordinatorLayout>
//新活動的代碼
public class MainActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Intent intent=getIntent();
        String name=intent.getStringExtra("name");
        int image=intent.getIntExtra("image",-1);
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar02);
        CollapsingToolbarLayout collapsingToolbarLayout=(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        ImageView fruitImage=(ImageView) findViewById(R.id.fruit_image_view);
        TextView fruitContent=(TextView) findViewById(R.id.fruit_content_text);
        setSupportActionBar(toolbar);
        ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsingToolbarLayout.setTitle(name);
        fruitImage.setImageResource(image);
        StringBuilder content=new StringBuilder();
        for(int i=0;i<3000;i++){
            content.append(name);
        }
        fruitContent.setText(content.toString());
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                break;
            default:
        }
        return super.onOptionsItemSelected(item);
    }
}
//recyclerview的配接器
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<Fruit> mList;

    public MyAdapter(List<Fruit> list){
        mList=list;
    }

    public class ViewHolder extends RecyclerView.ViewHolder{
        View view;
        TextView name;
        ImageView image;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            view=itemView;
            name=itemView.findViewById(R.id.fruit_name);
            image=itemView.findViewById(R.id.fruit_image);
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull final ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout,parent,false);
        final ViewHolder viewHolder=new ViewHolder(view);
        viewHolder.view.setOnClickListener(new View.OnClickListener() {//設定點擊事件
            @Override
            public void onClick(View view) {
                int position=viewHolder.getAdapterPosition();
                Fruit fruit=mList.get(position);
                Intent intent=new Intent(parent.getContext(),MainActivity2.class);
                intent.putExtra("name",fruit.getName());
                intent.putExtra("image",fruit.getImage());
                parent.getContext().startActivity(intent);//開啟新活動
            }
        });
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit=mList.get(position);
        holder.name.setText(fruit.getName());
        holder.image.setImageResource(fruit.getImage());
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }
}

7.2充分利用系統狀態欄空間

如果你運行了我們上一節中的代碼，那么你一定發現了系統狀態欄哪里感覺與我們的界面非常不搭配，而要解決這一問題也非常簡單，只需把系統狀態欄設定為透明色即可，

示例：

//首先給你要實作融合的控制元件及其父布局都設定上android:fitsSystemWindows="true"屬性
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:src="@drawable/orange"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar02"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

//將系統狀態欄的顏色設定為透明色（因為只有在Android5.0后我們才可以這樣做，因此我們要對此做區分）
//values-v21下的styles檔案
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="FruitActivityTheme" parent="AppTheme">//使其繼承自AppTheme，這樣AppTheme所擁有的特性它也會擁有
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
//values下的styles檔案
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="FruitActivityTheme" parent="AppTheme">
    </style>

</resources>

//給第二個活動使用我們新建的主題
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.temp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity2"
            android:theme="@style/FruitActivityTheme" />
        <activity
            android:name=".MainActivity"
            android:label="MyBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/46855.html

標籤：區塊鏈

上一篇：解決華為DevEco Studio2.0 gradle編譯器安裝出錯問題！！！

下一篇：DevEco studio 一直加載gradle

Android基礎知識——Material Design實戰