Design 控件学习

Design 控件学习

design控件

• TextInputLayout
• TabLayout
• SnakeBar
• FloatingActinoButton
• NavigationView
• AppBarLayout
• CoordinatorLayout
• CollaspingToolbarLayout

代码

TabLayout

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:hint="作者"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>

TabLayout

<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>  

添加选项卡

    tablayout.addTab(tablayout.newTab().setText("Tab1"));
    tablayout.addTab(tablayout.newTab().setText("Tab2"));
    tablayout.addTab(tablayout.newTab().setText("Tab3"));

SnakeBar

Snackbar.make(tablayout,"我是Snackbar",Snackbar.LENGTH_LONG).show();

FloatingActionButton

android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add_task"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add_circle_pink_400_18dp"
            app:backgroundTint="@color/blue"
            app:fabSize="normal" />  
        其中backgroundTint是设置背景颜色

NavigationView

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_navigation_header"
        app:menu="@menu/drawer_navigation_menu"
        />
        其中app:headerLayout表示NavigationView的头部布局
        app:menu表示NavigationView的导航菜单

AppBarLayout

AppBarLayout是一个垂直的线性布局，实现了Material Design概念的应用程序栏，支持滚动手势。
它的子视图提供所需的滚动行为：
- 在java文件中通过setScrollflags（int）设置
- 在xml布局文件中通过““

AppBarLayout经常作为CoordinatorLayout的直接子视图使用。
AppBarLayout的作用是把AppBarLayout包裹的内容都作为应用程序栏。

我们在xml文件中定义一个AppBarLayout，AppBarLayout下面有一个Toolbar和一个TabLayout

 <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> 

app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他flag有：
- enterAlways: 一旦向下滚动，不管是否继续滚动，该view都会变为可见。
- enterAlwaysCollapsed: 这个属性是作为enterAlways属性的附加属性使用的，这个flag定义的是何时进入，，当你定义了一个minHeight，并且定义了enterAlways属性，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
- exitUntilCollapsed: 这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候开始慢慢消失。

app:layout_scrollFlags这个属性其实一般就只有下面4种使用情况，我们来一一讲解。

1. app:layout_scrollFlags=”scroll”

该view显示时，只有在滚动视图顶部向上滚动时，该view才会慢慢消失。
该view消失后，只有在滚动视图顶部向下滚动时，该view才会慢慢出现。
2. app:layout_scrollFlags=”scroll|enterAlways”

该view显示时，只要滚动视图向上滚动，该view就会慢慢消失。
该view消失后，只要滚动视图向下滚动，该view就会慢慢出现。
3. app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”,同时该view设置了minHeight

该view显示时，只要滚动视图向上滚动，该view就会慢慢消失。
该view消失后，只要滚动视图向下滚动，该view就会慢慢出现:
当滚动视图不在顶部时，该view只会慢慢出现minHeight高度的内容
当滚动视图在顶部时，该view会慢慢出现全部的内容
4. app:layout_scrollFlags=”scroll|exitUntilCollapsed”,同时该view设置了minHeight

该view显示时，只有在滚动视图顶部向上滚动时，该view才会慢慢消失，但不会完全消失，会保留着 minHeight高度的内容依然可见。
该view消失后，只有在滚动视图顶部向下滚动时，该view才会慢慢出现。
注意：只有AppBarLayout第一个设置app:layout_scrollFlags属性的直接子视图可以折叠