手把手教你掌握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–

洪生鹏。一个文学爱好者,个人公众号:爱开发(aikaifa)。开发小助手,长期不断推送优选博文、优秀开源项目。热衷旅行、写作,过着白天到工地搬砖、晚上写故事的生活。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值