Android高級UI--Material Design設計理念下的控制元件使用詳解與各種問題的解決方案-有解無憂

一.配置:
1.Material Design的控制元件大多都放在design庫中

 implementation 'com.android.support:design:30.0.3'

2.Circleimageview的配置：

implementation 'de.hdodenhof:circleimageview:2.1.0'

3.使用三方框架Glide的配置:

    implementation 'com.github.bumptech.glide:glide:4.3.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.3.1'

二：控制元件介紹和使用：
（一）.Toolbar:頂替系統標題欄，能引入更精致的設計風格
替換系統標題欄步驟：
1.將style.xml的主題改成

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

2.主函式加入（還需要在layout中添加該控制元件）

        Toolbar toolbal = findViewById(R.id.toolbal);
        setSupportActionBar(toolbal);

3.若要開啟標題欄的導航按鈕(固定id值為: android.R.id.home) 則添加：

       ActionBar actionBar = getSupportActionBar();
       if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }

(二)DrawerLayout–滑動選單
使用說明:
1.可像LinearLayout一樣單獨使用
2.最好只有倆個直接子控制元件，第一個是用于主螢屏中顯示的內容，第二個是用于選單的顯示內容
3.第二個子控制元件的layout_gravity屬性一定要，否則會覆寫在主螢屏中
屬性值"start"表示左邊滑出選單，”end“則表示右邊滑出選單
4.若要加第三個直接子控制元件，那么第三個直接子控制元件也會以選單的形式出現
且layout_gravity屬性值不能與第二個子控制元件一樣，否則報錯

(三)NavigationView----谷歌官方推薦DrawerLayout的選單頁面中填充的最佳控制元件
使用說明：
1.有倆個關鍵屬性：app:menu 還有 app:headerlayout
2.上述倆個屬性的值都是相應的menu布局檔案與layout布局檔案
3.有監聽事件：

        navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

(四)FloatingActionButton----懸浮按鈕
使用說明：
1.有src屬性可以放置圖示
2.跟button一樣有監聽功能
3.使用layout_gravity去適配它的位置
4.有投影：使用elevation屬性去調整它的高度，高度越高，投影范圍越大，投影效果越淡，反而反之

(五)Snackbar----可互動提示
使用說明：
1.比Toast多了一個setaction，目的就是在開啟事件時你還可以有取消的動作，防止誤刪資料等
2.多了一個監聽功能除了1的作用外邏輯是可以自己寫的，跟button的監聽一樣
3.利用上述的FloatingActionBar的監聽功能來體會Snackbar的用法

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               Snackbar.make(v,"Delete Data",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                   @Override
                   public void onClick(View v) {
                       Toast.makeText(MyApplication.getContext(),"Data is restored",Toast.LENGTH_SHORT).show();
                   }
               }).show();
            }
        });

效果：
在這里插入圖片描述

(六)CoordinatorLayout----加強版的FrameLayout
使用說明：
1.普通功能與FrameLayout基本一樣
2.特殊功能在于它可以監聽所有子控制元件的各種事件，然后做出最合理的回應
3.比如在（五）點擊了懸浮按鈕FloatingActionButton后下面的效果圖會遮擋住FloatingActionButton，而若將FloatingActionButton置于CoordinatorLayout中就能輕松解決，因為它會讓我們的FloatingActionButton知道上浮防止被覆寫到，使用戶體驗更加，
(七)AppBarLayout----使toolbar變得更靈活
使用說明：
為了解決在CoordinatorLayout中加入滾動布局例如RecyclerView造成toolbar被RecyclerView遮擋覆寫
1.將toolbar置為AppBarLayout的子控制元件

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       >
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbal"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       />
   </com.google.android.material.appbar.AppBarLayout>

2.為含有RecyclerView等滾動布局的最外層控制元件指定一個布局行為：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

例：

  <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
       android:id="@+id/swipeRefresh"
       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"
       />

這樣就可以很好的解決toolbar被遮擋的問題了

(七)SwipeRefreshLayout—下拉重繪
使用說明：
1.將想實作下拉重繪的控制元件放置到SwipeRefreshLayout中就可以實作下拉重繪了
例：

  <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
       android:id="@+id/swipeRefresh"
       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"
       />

2.可以設定重繪的監聽功能

        swipeRefresh = findViewById(R.id.swipeRefresh);
        swipeRefresh.setColorSchemeColors(R.color.colorPrimary);
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshAnimals();
            }
        });

二之七控制元件的結合使用：

<androidx.drawerlayout.widget.DrawerLayout android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true">
 <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
     android:fitsSystemWindows="true">
   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       >
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbal"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       />
   </com.google.android.material.appbar.AppBarLayout>
   <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
     android:id="@+id/swipeRefresh"
     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>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done"
        app:elevation="8dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<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:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

(八)CardView----卡片式布局
使用說明：它其實也是一個FrameLayout
1.最好直接子控制元件來一個LinearLayout或者另外的其他布局，然后再嵌套子控制元件，不然多個控制元件顯示的效果就還是跟FrameLayout一樣
例：

<androidx.cardview.widget.CardView
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
       <ImageView
           android:id="@+id/animal_image"
           android:layout_width="match_parent"
           android:layout_height="160dp"
           android:scaleType="centerCrop"/>
       <TextView
           android:id="@+id/animal_name"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_margin="5dp"
           android:textSize="16sp"/>
    </LinearLayout>
</androidx.cardview.widget.CardView>

假如最外層的LinearLayout去掉，那顯示的效果就完全不一樣了，可以試試看

 app:cardCornerRadius="4dp"

這個屬性是來顯示卡片邊緣的圓弧的弧度

(九)CollapsingToolbarLayout----可折疊式標題欄
使用說明：
1.CollapsingToolbarLayout必須作為AppBarLayout的直接子布局
2.AppBarLayout必須作為CoordinatorLayout的子布局
3.CollapsingToolbarLayout中可以放置圖片資源 + toolbar作為標題欄，這就使標題欄更加的好看

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collasping_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"
            android:fitsSystemWindows="true">
            <ImageView
                android:id="@+id/animal_image_view"
                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/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

屬性分析：
1.這個是將圖片按原來的比例進行縮放，然后填充到它的指定width和height

android:scaleType="centerCrop"

2.表示折疊程序中的折疊模式：
“parallax”表示在折疊的程序中產生一定的錯位偏移，能達到更好的視覺效果
"pin"表示在折疊程序中位置始終保持不變

 app:layout_collapseMode="parallax"
 app:layout_collapseMode="pin"

注：下面這個屬性是配置用UI布局填充掉系統狀態欄所用的
用法：
1.將所需要填充的控制元件以及它的外層到最外層的控制元件都加入這一屬性

android:fitsSystemWindows="true"

2.將系統狀態欄變成透明，透明這一屬性只有 API為21開始才有，所以需要配置values-21的檔案，不配置也可以，直接在style里這樣子：
即宣告了21的api

 <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>

這樣就可以充分的利用系統狀態欄，達到更好的UI效果

(十)ScrollView與NestedScrollView–滾動的View
作用：可以以滾動的方式來查看螢屏以外的資料（資料多的時候）
使用說明：
1.只允許存在一個子布局，所以一般用嵌套結構
2.NestedScrollView 比 ScrollView多了嵌套回應滾動事件的功能，CoordinatorLayout也具備
3.也有app：layout_behavior的屬性

   <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="wrap_content">
            <TextView
                android:id="@+id/animal_content_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"/>       
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

我使用過的Material Design的控制元件到這就總結結束了，之后有遇到更好的控制元件會繼續補充，

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

標籤：其他

上一篇：Fragment +NestedScrollView切換時會造成自動滑動的現象

下一篇：基于Android平臺的酒店預訂管理系統軟體設計的論文