Android的material-design(NavigationView、ToolBar、ButtonNavigationView、AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、SwipeRefreshLayout、FloatingActionButton)的使用方法
Android的material-design(NavigationView、ToolBar、ButtonNavigationView、AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、SwipeRefreshLayout、FloatingActionButton)的使用方法。
其中还包括了CardView和在toolbar中嵌入SearchView的使用方法。
如第一张图片所展示的功能一样,它主要实现了侧滑导航菜单栏。它位于android.support.design.widget包中。
app:headerLayout和app:menu属性分别对应其头部布局文件和菜单布局文件
<android.support.design.widget.NavigationView
android:id="@+id/nav_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:headerLayout="@layout/nav_header"
app:itemTextAppearance="@style/nav_menu_text"
app:menu="@menu/navigation_menu"
></android.support.design.widget.NavigationView>
app:navigationIcon用来定义手机页面左上角的导航图标,
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingTop="10dp"
android:theme="@style/AppTheme1"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_menu_black_24dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" ></android.support.v7.widget.Toolbar>
app:menu属性用来定义它的菜单项,其中包括选项名称和图标。若我们不定义菜单选中时的selector,它会使用其默认的selector。
<android.support.design.widget.BottomNavigationView
android:id="@+id/buttonNavigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="2"
app:itemIconTint="@color/navi_button_selector"
app:itemTextColor="@color/navi_button_selector"
app:labelVisibilityMode="labeled"
app:menu="@menu/navigatiob_menu" ></android.support.design.widget.BottomNavigationView>
show my code:
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
></android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
如上,我就将RecyclerView作为SwipeRefreshLayout的唯一子控件。just like this,it’s done!!!
就是我们展示页面的那个红色的圆形的图标,故名思意,它是悬浮在手机页面之上的,它和其它的手机控件不在同一个维度。所以,不管它下面的内容如何变化,它都会漂浮在原来的位置上。注意:他必须位于位于FrameLayout性质的布局文件中,不然,它就漂浮不起来了!!!
<android.support.design.widget.FloatingActionButton
android:id="@+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_share_black_24dp"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|right" ></android.support.design.widget.FloatingActionButton>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@mipmap/header_bg"
app:layout_collapseMode="parallax" ></ImageView>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingTop="10dp"
android:theme="@style/AppTheme1"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_menu_black_24dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" ></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_share_black_24dp"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|right" ></android.support.design.widget.FloatingActionButton>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
<!--app:layout_behavior属性让AppBarLayout明白谁在滚动,当滚动控件滚动时,AppbarLayout好做出相应的变化 -->
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
app:layout_scrollFlags属性的属性值得介绍:它的属性值常用的有:scroll|exitUntilCollapsed|enterAlwaysCollapsed|enterAlways|snap这五个属性值。
scroll表示:当滚动视图向上滚动时,带有该属性值的控件会跟着向上滚动并实现隐藏。
snap表示:带有该属性值的控件在还没有完全显示或隐藏时,它会根据它的滚动距离自定选择时隐藏还是显示。
enterAlways表示:带有该属性值的控件会跟随着滚动视图一起向下滚动(只要滚动视图向下一滚动,它就开始滚动)。
exitUntilCollapsed表示:带有该属性值的控件在随着滚动视图向上滚动时,不会退出页面(隐藏)。
enterAlwaysCollapsed表示:带有该属性值的控件会在滚动视图向下滚动结束以后才会才会开始向下滚动,而不是像设置了enterAlways属性的控件会随着滚动视图一开始就一起滚动。
<?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"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--主界面的布局控件header -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@mipmap/header_bg"
app:layout_collapseMode="parallax" ></ImageView>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingTop="10dp"
android:theme="@style/AppTheme1"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_menu_black_24dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" ></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_share_black_24dp"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|right" ></android.support.design.widget.FloatingActionButton>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
></android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/buttonNavigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="2"
app:itemIconTint="@color/navi_button_selector"
app:itemTextColor="@color/navi_button_selector"
app:labelVisibilityMode="labeled"
app:menu="@menu/navigatiob_menu" ></android.support.design.widget.BottomNavigationView>
</LinearLayout>
<!--主界面的布局控件footer -->
<!-- 侧滑界面的布局header-->
<!-- 注意:侧滑界面的布局必须位于主界面布局的下方,否则会造成“点击侧滑菜单内容后,侧滑菜单消失的情况”-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="@+id/nav_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:headerLayout="@layout/nav_header"
app:itemTextAppearance="@style/nav_menu_text"
app:menu="@menu/navigation_menu">
<!-- drawerLayout页面的底部按钮header-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/nav_reLogin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:onClick="reLogin"
android:text="重新登录" ></Button>
<Button
android:id="@+id/nav_exit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/transparent"
android:onClick="exit"
android:text="退出" ></Button>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray" ></View>
</LinearLayout>
<!-- drawerLayout页面的底部按钮footer-->
</android.support.design.widget.NavigationView>
</LinearLayout>
<!-- 侧滑界面的布局footer-->
</android.support.v4.widget.DrawerLayout>