Material Design 学习（一）

来源：互联网发布：php b2b2c开发编辑：程序博客网时间：2024/05/16 12:56

1. CoordinatorLayout FloatingActionButton

CoordinatorLayout 作为 super powered framelayout 主要有两个功能：
1.作为顶层布局
2.调度协调子布局

<?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.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="end|bottom"        android:layout_margin="16dp"        android:src="@drawable/ic_done" /></android.support.design.widget.CoordinatorLayout>

CoordinatorLayout 作为顶层布局，通过 android:layout_gravity=”end|bottom” 来控制FloatingActionButton 的位置。

FloatingActionButton默认使用FloatingActionButton.Behavior 。

（1）AppBarLayout 和Toolbar 使用再加上tablayout 的滑动视图上滑隐藏

1 主activity 的layout

<?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/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.lq.materialdesigntest.RecyclerToolBarActivity">    <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/menu_drawer">    </android.support.design.widget.NavigationView>    <android.support.design.widget.CoordinatorLayout        android:id="@+id/maincontent"        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:theme="@style/AppTheme.AppBarOverlay">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                app:layout_scrollFlags="scroll|enterAlways"                app:popupTheme="@style/AppTheme.PopupOverlay" />            <android.support.design.widget.TabLayout                android:id="@+id/tabs"                android:layout_width="match_parent"                android:layout_height="wrap_content" />        </android.support.design.widget.AppBarLayout>        <include layout="@layout/content_materialdesign" />        <android.support.design.widget.FloatingActionButton            android:id="@+id/fab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="bottom|end"            android:layout_margin="@dimen/fab_margin"            android:src="@android:drawable/ic_dialog_email" />    </android.support.design.widget.CoordinatorLayout></android.support.v4.widget.DrawerLayout>

2. 主activity layout 中include 的layout content_materialdesign

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:context="com.lq.materialdesigntest.RecyclerToolBarActivity"    tools:showIn="@layout/activity_main">    <android.support.v4.view.ViewPager        android:id="@+id/vierpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></RelativeLayout>

注意： Toolbar 中 app:layout_scrollFlags=”scroll|enterAlways” 这行代码的作用“视图滚动时，Toolbar会隐藏”

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
为了ToolBar可以滚动，CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如，示例中Viewpager设置了此属性。

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

这里我们要把 content_materialdesign 这个layout 的父控件 layout_behavior 设置滚动属性。

总结：
为了使得Toolbar有滑动效果，必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性

（2）TabLayout

[]:http://blog.csdn.net/chenguang79/article/details/48804125

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它。

app:tabIndicatorColor=”@color/white” // 下方滚动的下划线颜色
app:tabSelectedTextColor=”@color/gray” // tab被选中后，文字的颜色
app:tabTextColor=”@color/white” // tab默认的文字颜色

 //初始化各fragment          hotRecommendFragment = new Find_hotRecommendFragment();          hotCollectionFragment = new Find_hotCollectionFragment();          hotMonthFragment = new Find_hotMonthFragment();          hotToday = new Find_hotToday();          //将fragment装进列表中          list_fragment = new ArrayList<>();          list_fragment.add(hotRecommendFragment);          list_fragment.add(hotCollectionFragment);          list_fragment.add(hotMonthFragment);          list_fragment.add(hotToday);          //将名称加载tab名字列表，正常情况下，我们应该在values/arrays.xml中进行定义然后调用          list_title = new ArrayList<>();          list_title.add("热门推荐");          list_title.add("热门收藏");          list_title.add("本月热榜");          list_title.add("今日热榜");          //设置TabLayout的模式          tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);          //为TabLayout添加tab名称          tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));          tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));          tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));          tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));          fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);          //viewpager加载adapter          vp_FindFragment_pager.setAdapter(fAdapter);          //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);          //TabLayout加载viewpager          tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);

注意：
1. 设置TabLayout的模式
tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);
2. 为tabLayout 添加tab addTab
tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));
3.TabLayout 加载viewpager
tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);

4.DrawerLayout

5.CardView

6.NavigationView 侧滑栏

<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/menu_drawer"></android.support.design.widget.NavigationView>

headerLayout 是侧滑栏的标题部分
menu 是菜单部分

7. CircleImageView

0 0