Android Design Support Library 使用詳解
概述
Android Design Support Library 是Google在2015年的IO大會上,帶來的全新適應Material Design設計規範的支援庫。在這個支援庫中,給我們提供了更加規範的MD設計風格控制元件。重要的是,Android Design Support Library中,支援所有的Android 2.1以上版本系統。在這個支援庫中,主要包含下面幾大控制元件:
Snackbar,FloatingActionButton,TextInputLayout,TabLayout,AppBarLayout,CollapsingToolbarLayout,NavigationView,CoordinatorLayout
在使用Android Design Support Library之前,我們只需要在AS中新增引用即可:
compile 'com.android.support:design:23.3.0'
下面我們將分別介紹各個控制元件的使用。
1.Snackbar
Snackbar提供了關於操作的輕量級的反饋。它可以從螢幕底部展示一個簡短的訊息,與Toast相似,但是它更靈活和功能更加強大。
當它顯示一段時間後或者使用者與螢幕互動時,它會自動消失;
可以包含一個動作action;
Snackbar出現在螢幕所有其他元素之上,同一時間內只有一個Snackbar顯示。
使用Snackbar
Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
bar.show();
方法:
make (View view, CharSequence text, int duration) -生成Snackbar訊息
show () -開始顯示Snackbar訊息
引數:
view,Snackbar會通過該view尋找一個父View來持有Snackbar的view。
text,顯示的訊息
duration,與Toast一樣,控制Snackbar的顯示時間。
顯示的效果如下:
我們可以為Snackbar新增一個點選動作Action,如下:
Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
bar.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"點選了!",Toast.LENGTH_SHORT).show();
}
});
bar.show();
執行效果如下:
上面增加一個可點選的動作,點選“ACTION”時,彈出Toast框。
我們還可以修改Snackbar的樣式
Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
bar.setAction("動作", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"點選了!",Toast.LENGTH_SHORT).show();
}
});
bar.setActionTextColor(Color.WHITE); //設定Aciton的字型顏色值
Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) bar.getView();
layout.setBackgroundColor(Color.RED); //設定Snackbar的背景色
TextView textView = (TextView) layout.findViewById(R.id.snackbar_text);
textView.setTextColor(Color.WHITE); //設定Snackbar文字的顏色
bar.show();
執行效果如下:
2.FloatingActionButton
FloatingActionButton是懸浮按鈕,用來強調當前螢幕中最重要的動作,吸引使用者的注意。FloatingActionButton現在是繼承自控制元件ImageButton,所以它也會擁有該控制元件的所有屬性。
使用FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
使用它還是非常簡單,當成普通控制元件來使用即可。
執行效果圖:
我們可以看到FAB有一個背景顏色,預設的背景顏色取的是theme中的colorAccent的值,可以在style中定義的colorAccent設定。
我們同樣也可以自行單獨設定其它的屬性:
app:backgroundTint:設定FAB的背景顏色。
app:rippleColor:設定FAB點選時的背景顏色。
app:elevation:設定預設狀態下FAB的陰影大小。
app:pressedTranslationZ:點選時候FAB的陰影大小。
app:fabSize:設定FAB的大小,該屬性有兩個值,分別為normal和mini,對應的FAB大小分別為56dp和40dp。
app:layout_anchor:設定FAB的錨點,即以哪個控制元件為參照點設定位置。 <—該屬性需要在CoordinatorLayout佈局中使用才生效—->
app:layout_anchorGravity:設定FAB相對錨點的位置,值有 bottom、center、right、left、top等。 <—該屬性需要在CoordinatorLayout佈局中使用才生效—->
對上面的屬性進行設定後,可以看到:
繼續給新增FAB的點選事件,與Snackbar配合使用時,會出現Snackbar遮住FAB的情況,如:
出現這樣的情況,會讓使用者體驗不友好,正確的應該讓浮動操作按鈕上下滑動,為Snackbar留出空間。
為了解決該問題,我們這裡就用到了另一個控制元件CoordinatorLayout,關於這個控制元件之後在講解。
3.TextInputLayout
TextInputLayout繼承自LinearLayout,用來把EditText包裹在該佈局中,可以讓hint文字變成一個在EditText上方的浮動標籤,同時還包括一個漂亮的material動畫。TextInputLayout只接受一個子元素。子元素需要是一個EditText元素。
使用TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="@+id/textinput_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username" />
</android.support.design.widget.TextInputLayout>
獲取控制元件EditText物件
TextInputLayout和LinearLayout和ScrollView不同,你可以使用一個特殊的方法獲得子元素EditText,getEditText,不需要使用findViewById。
如:
textinput_username = (TextInputLayout) findViewById(R.id.textinput_username);
EditText username = textinput_username.getEditText();
顯示錯誤資訊
TextInputLayout的錯誤處理簡單快速。需要的方法是setErrorEnabled和setError。
使用setError時,錯誤資訊會出現在EditText的下面。使用setErrorEnabled可以隱藏錯誤資訊。
如:
public void handleClick(View view) {
String username = textinput_username.getEditText().getText().toString();
if (TextUtils.isEmpty(username)) {
textinput_username.setError("請輸入使用者名稱!");
} else {
textinput_username.setError(null); //必須新增,否則出現錯誤資訊第二次不顯示的問題
textinput_username.setErrorEnabled(false);
}
}
4.TabLayout
TabLayout提供了一個水平佈局來顯示tabs。可以實現TabPageIndicator或PagerTabStrip相同的效果了。與ViewPager配合使用可發揮它的優勢。
佈局檔案:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/colorPrimaryDark">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
常用的屬性:
app:tabIndicatorColor:Tab指示器下標的顏色
app:tabSelectedTextColor:Tab被選中時字型的顏色
app:tabTextColor:Tab未被選中時字型的顏色
Activity中呼叫
tablayout = (TabLayout) findViewById(R.id.tablayout);
tablayout.setTabMode(TabLayout.MODE_FIXED);
tablayout.addTab(tablayout.newTab().setText("Tab 1"));
tablayout.addTab(tablayout.newTab().setText("Tab 2"));
tablayout.addTab(tablayout.newTab().setText("Tab 3"));
tablayout.addTab(tablayout.newTab().setText("Tab 4"));
tablayout.addTab(tablayout.newTab().setText("Tab 5"));
tablayout.addTab(tablayout.newTab().setText("Tab 6"));
tablayout.setTabMode()中存在兩種選擇:
TabLayout.MODE_FIXED:不支援水平滑動
TabLayout.MODE_SCROLLABLE:支援水平滑動效果
配合ViewPager的使用完整程式碼:
viewpager = (ViewPager) findViewById(R.id.viewpager);
tablayout = (TabLayout) findViewById(R.id.tablayout);
tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
viewpager.setAdapter(pagerAdapter);
tablayout.setupWithViewPager(viewpager);
tablayout.getTabAt(0).setText("Tab 1");
tablayout.getTabAt(1).setText("Tab 2");
tablayout.getTabAt(2).setText("Tab 3");
tablayout.getTabAt(3).setText("Tab 4");
tablayout.getTabAt(4).setText("Tab 5");
tablayout.getTabAt(5).setText("Tab 6");
tablayout.getTabAt(6).setText("Tab 7");
tablayout.getTabAt(7).setText("Tab 8");
tablayout.getTabAt(8).setText("Tab 9");
tablayout.getTabAt(9).setText("Tab 10");
注意:
設定tab欄資訊時,要在
viewpager.setAdapter(pagerAdapter);
tablayout.setupWithViewPager(viewpager);之後,否則會出現tab上的文字不顯示的問題。具體原因可以通過檢視setupWithViewPager方法內部,裡面執行了removeAllTabs()的操作。所以需要重新設定tabs中的標題資訊。
效果圖:
5.AppBarLayout
AppBarLayout是一個垂直的線性佈局,實現了許多MD的特性,包括滾動手勢。
它的子View通過 setScrollFlags(int) 方法或者設定app:layout_scrollFlags屬性來提供滾動的行為。但是必須是作為CoordinatorLayout的直接子view,這些行為才會生效。
1.實現上滑隱藏,下滑顯示的效果。(CoordinatorLayout + AppBarLayout + Toolbar + TabLayout)
佈局檔案設定:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--為了讓Toolbar響應滾動事件 需要在外面放置AppBarLayout的佈局容器-->
<!--AppBarLayout裡面的view只要設定了app:layout_scrollFlags屬性,
就可以在RecyclerView或者任意支援巢狀滾動的view比如NestedScrollView滾動事件發生的時候會被觸發-->
<!--Toolbar中的app:layout_scrollFlags屬性裡面必須至少啟用scroll,
這樣Toolbar才會滾動出螢幕,否則它將一直固定在頂部。-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@mipmap/ic_drawer_home"
app:subtitle="subtitle"
app:title="title" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>
<!-- 定義AppBarLayout與滾動檢視之間的聯絡-->
<!-- 在RecyclerView或者任意支援巢狀滾動的view比如NestedScrollView上新增app:layout_behavior。
Android design support library包含了一個字串資源@string/appbar_scrolling_view_behavior,
這個是官方定義好的,我們直接拿來用就OK了,它和AppBarLayout.ScrollingViewBehavior相匹配,
當這個滾動的View發生滾動事件時候,CoordinatorLayout會搜尋自己所包含的其他view,
看看是否有view與這個behavior相關聯,所以NestedScrollView滾動的時候會觸發AppBarLayout-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
效果圖如下:
總結如下:
根佈局控制元件必須是CoordinatorLayout;
toolbar要放在佈局AppBarLayout中;
toolbar需要設定屬性app:layout_scrollFlags=”scroll|enterAlways”;
在RecyclerView或者任意支援巢狀滾動的view比如NestedScrollView上新增屬性app:layout_behavior=”@string/appbar_scrolling_view_behavior”,這樣才能和AppBarLayout聯動
6.CollapsingToolbarLayout
CollapsingToolbarLayout被用來包裹Toolbar,實現了一個可摺疊的app bar。它用來作為AppBarLayout的子類。CollapsingToolbarLayout還可以包含一個ImageView,用來作為滑動時的背景。
在CollapsingToolbarLayout中有幾個常見的屬性設定:
app:contentScrim=”@color/colorPrimary”:設定當CollapsingToolbarLayout完全摺疊(收縮)後的背景顏色;
app:expandedTitleMarginStart=”48dp”:設定CollapsingToolbarLayout處於擴張時(未收縮)時,title距離左邊的距離;
app:layout_scrollFlags=”scroll|exitUntilCollapsed”:設定滾動標誌,這裡面有幾個值:
scroll:想滾動就必須設定這個。
enterAlways:實現quick return效果, 當向下移動時,立即顯示View(比如Toolbar)。
exitUntilCollapsed:向上滾動時收縮View時,Toolbar一直固定在上面。
enterAlwaysCollapsed:當你的View已經設定minHeight屬性又使用此標誌時,你的View只能以最小高度進入,只有當滾動檢視到達頂部時才擴大到完整高度。
在CollapsingToolbarLayout中子ImageView的常見設定:
app:layout_collapseMode=”parallax”:設定子佈局設定摺疊模式
parallax:視差模式,在摺疊的時候會有個視差摺疊的效果。
pin:固定模式,在摺疊的時候最後固定在頂端
app:layout_collapseParallaxMultiplier=”0.7”:設定視差的係數,介於0.0-1.0之間。
在CollapsingToolbarLayout中Toolbar的設定:
app:layout_collapseMode=”pin”:當CollapsingToolbarLayout完全收縮後, Toolbar還可以保留在螢幕上。
注:
1.使用CollapsingToolbarLayout時,必須把title設定到CollapsingToolbarLayout上,如果設定在Toolbar上不顯示。
2.設定title的字型顏色:
擴張時候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor();
收縮後在Toolbar上顯示時的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor();
完整佈局檔案:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="@string/app_name">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/pic4"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
程式碼檔案:
toolbar = (Toolbar) findViewById(R.id.toolbar);
collapsing_layout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_layout);
collapsing_layout.setExpandedTitleColor(Color.RED);//設定還沒收縮時狀態下字型顏色
collapsing_layout.setCollapsedTitleTextColor(Color.GREEN);//設定收縮後Toolbar上字型的顏色
效果圖:
總結:
1.根佈局控制元件必須是CoordinatorLayout
2.AppBarLayout包含CollapsingToolbarLayout佈局,CollapsingToolbarLayout需要指定屬性
app:layout_scrollFlags=”scroll|exitUntilCollapsed” 向上滾動收縮view
app:contentScrim=”@color/colorPrimary” 摺疊後的背景顏色
3.CollapsingToolbarLayout中包含視差圖片的控制元件ImageView和Toolbar 兩個子控制元件。
4.設定視差控制元件ImageView的兩個屬性:
app:layout_collapseMode=”parallax”
app:layout_collapseParallaxMultiplier=”0.7”
5.為了和視差控制元件ImageView互動,需要設定ToolBar的屬性
app:layout_collapseMode=”pin”
6.給帶scroll屬性的控制元件,比如NestedScrollView或者ScrollView,需要指定屬性:
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
7.如果存在FloatingActionButton,指定屬性
app:layout_anchor=”@id/appbar_layout” //錨點定在AppBarLayout上,則可以隨視差滾動聯動
7.CoordinatorLayout
CoordinatorLayout 是一個非常強大的FrameLayout佈局。
主要實現兩個基本的功能:
作為佈局的頂層節點。
協調子View的排程。
1.CoordinatorLayout 與 FloatingActionButton
可以讓FAB上下滑動,為Snackbar流出空間。
佈局檔案:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/listview"
app:layout_anchorGravity="bottom|right" />
</android.support.design.widget.CoordinatorLayout>
Activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_main);
fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Snackbar.make(fab,"點選了",Snackbar.LENGTH_LONG).show();
}
});
}
效果圖:
關於CoordinatorLayout 與 AppBarLayout /CollapsingToolbarLayout 可以檢視上面的介紹。
8.NavigationView
NavigationView表示一個標準的應用程式導航選單,選單可以有標準的menu資原始檔填充。
NavigationView常見的是放在DrawerLayout中使用。
使用NavigationView
1.activity_main.xml的佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="mo.yumf.com.mddemo.MainActivity">
<!-- contents -->
<include layout="@layout/content_main"></include>
<!--drawerLayout right contents-->
<android.support.design.widget.NavigationView
android:id="@+id/navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_layout"
app:menu="@menu/menu_drawer" />
</android.support.v4.widget.DrawerLayout>
裡面include了一個佈局檔案content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/listview"
app:layout_anchorGravity="bottom|right" />
</android.support.design.widget.CoordinatorLayout>
接著看到NavigationView中,有兩個屬性app:headerLayout=”@layout/header_layout”,app:menu=”@menu/menu_drawer” ,分別代表drawer佈局中的header和menuitem的區域。
header_layout.xml 檔案如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center"
android:background="@color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
menu_drawer.xml佈局檔案:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="@+id/nav_home"
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Home" />
<item
android:id="@+id/nav_messages"
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Messages" />
<item
android:id="@+id/nav_friends"
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Friends" />
<item
android:id="@+id/nav_discussion"
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Discussion" />
</group>
<item android:title="Sub items">
<menu>
<item
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Sub item 1" />
<item
android:checkable="true"
android:icon="@mipmap/ic_notifications"
android:title="Sub item 2" />
</menu>
</item>
</menu>
2.Activity中程式碼:
public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;
private DrawerLayout drawerLayout;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = (FloatingActionButton) findViewById(R.id.fab);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
navigationView = (NavigationView) findViewById(R.id.navigationview);
setupDrawerContent(navigationView);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
drawerLayout.openDrawer(Gravity.LEFT);
}
});
}
private void setupDrawerContent(NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
private MenuItem mPreMenuItem;
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//每次只能選擇一個item
if (mPreMenuItem != null){
mPreMenuItem.setChecked(false);
}
item.setChecked(true);
drawerLayout.closeDrawers();
mPreMenuItem = item;
return true;
}
});
//設定預設選中的item
navigationView.getMenu().getItem(0).setChecked(true);
}
}
效果圖如下:
自定義該背景色
上面的menuItem 使用的是預設屬性,直接採用主題的顏色。
我們可以進行自定義該背景色,通過設定屬性:
app:itemTextColor="@color/menu_item_color"
app:itemIconTint="@color/menu_item_color"
首先在res/color檔案下建立一個selector檔案menu_item_color.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_checked="true" /> <!-- selected顏色 -->
<item android:color="@color/colorAccent" android:state_pressed="true" /> <!-- pressed顏色 -->
<item android:color="@color/colorAccent" android:state_focused="true" /> <!-- focused顏色 -->
<item android:color="@color/colorPrimary" /> <!-- default顏色 -->
</selector>