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种使用情况,我们来一一讲解。
- 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属性的直接子视图可以折叠