继上篇 手把手教你掌握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)。开发小助手,长期不断推送优选博文、优秀开源项目。热衷旅行、写作,过着白天到工地搬砖、晚上写故事的生活。