码迷,mamicode.com
首页 > 移动开发 > 详细

Android Design Support Library 使用详解

时间:2016-07-19 19:00:29      阅读:507      评论:0      收藏:0      [点我收藏+]

标签:

概述

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>

Android Design Support Library 使用详解

标签:

原文地址:http://blog.csdn.net/yuminfeng728/article/details/51955159

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!