手把手教你掌握Design新控件(二)

继上篇 手把手教你掌握Design新控件，没有讲完了，下面继续

5、 NavigationView 导航视图

NavigationView 导航视图，一般与DrawerLayout（抽屉布局）联合使用。
它为应用程序提供标准的导航菜单，
菜单内容可以通过一个xml菜单文件来填充

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigation_header"
            app:menu="@menu/drawer"
            skin:enable="true" />

其中

• app:headerLayout：表示NavigationView的头部布局,也就是一个布局文件
• app:menu：表示NavigationView的导航菜单

导航菜单布局：

<?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/navigation_item_home"
            android:icon="@drawable/ic_launcher"
            android:title="首页">

            <menu>
                <item
                    android:id="@+id/navigation_item_ganhuo"
                    android:icon="@drawable/icon_home_normal"
                    android:title="通讯录" />
                <item
                    android:id="@+id/navigation_item_blog"
                    android:icon="@drawable/iconfont_custom_view"
                    android:title="消息" />
            </menu>
        </item>

        <item
            android:id="@+id/navigation_item_custom_view"
            android:icon="@drawable/ic_launcher"
            android:title="设置" />

        <item
            android:id="@+id/navigation_item_about"
            android:checkable="true"
            android:icon="@drawable/iconfont_custom_view"
            android:title="关于" />
    </group>

</menu>

其中

group：表示组
android:checkableBehavior：可以接受下面3种值

• single 组中只有一个菜单项可以checked
• all 组中所有菜单项可checked
• none 组中所有菜单项都不可checked
  item：表示项，下面可以有子菜单， item与item会默认有分割线分开。

分割线

这里需要注意NavigationView是一个很好的实现侧边抽屉效果的组件，
我们注意到设计好的彩色图标，在NavigationView中默认是灰色。可以通过

setItemIconTintList(null);

来修改，如图：

修改默认灰色

6、 AppBarLayout应用程序栏布局

 <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:fitsSystemWindows="true"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            </android.support.v7.widget.Toolbar>
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.AppBarLayout>

向上滚动效果：

向上滚动

向上滚动时Toolbar被隐藏了，再在向下滑动AppBarLayout，发现Toolbar又出来了。
相当于是一个可以折叠的工具栏。
这是因为我们的Toolbar设置了app:layout_scrollFlags="scroll|enterAlways" 属性

7、CoordinatorLayout 协作布局

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/windowBackground"
            android:fitsSystemWindows="true"
            skin:enable="true">
</android.support.design.widget.CoordinatorLayout>

8、CollapsingToolbarLayout 折叠工具栏布局

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_book_image"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_gravity="center"
                android:fitsSystemWindows="true"
                android:transitionName="transition_book_img"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.8" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

折叠效果

关于Design常用新控件就简单的做了个小结。
--END--

洪生鹏。一个文学爱好者，热衷旅行、写作，过着白天到工地搬砖、晚上写故事的生活。