Android Design Support Library 常用控件
Floating Action Button - 浮动圆形按钮
在使用Android Design Support Library的时候需要在build.gradle里添加
compile 'com.android.support:design:24.2.1' 后面数字随版本而定
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:backgroundTint="#ff0000" app:fabSize="normal" app:elevation="5dp" app:rippleColor="#FF4081" /> <!--背景色--> <!--背景与图标间隔--> <!--按钮阴影--> <!--按钮点击颜色变化效果-->
TextInputLayout - 让EditText提示人性化
<android.support.design.widget.TextInputLayout android:id="@+id/text_input" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout>
在activity中
final TextInputLayout textInput = (TextInputLayout) findViewById(R.id.text_input); textInput.setHint("请输入用户名"); EditText text = textInput.getEditText(); text.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (s.length() > 10) { textInput.setError("用户名不能超过10位"); textInput.setErrorEnabled(true); }else { textInput.setErrorEnabled(false); } } @Override public void afterTextChanged(Editable s) { } });
当输入的字符超过10位则会：
Snackbar - 可交互提示框
final FloatingActionButton btn = (FloatingActionButton) findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { final Snackbar snackbar = Snackbar.make(btn, "你点击了按钮", Snackbar.LENGTH_LONG); snackbar.show(); snackbar.setAction("我知道了", new View.OnClickListener() { @Override public void onClick(View v) { snackbar.dismiss(); } }); } });
点击按钮弹出的Snackbar提示框出现在界面下方，除了和Toast一样的功能外，还能添加文字自行关闭该提示框。
TabLayout标签
<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@android:color/holo_green_light" app:tabIndicatorColor="@android:color/holo_orange_light" app:tabIndicatorHeight="5dp" app:tabSelectedTextColor="@android:color/holo_red_light" app:tabTextColor="@android:color/black" /> <!--tab背景颜色 直接用android：background也行--> <!--tab下标颜色--> <!--tab下标指示器高度--> <!--app:tabMode="scrollable"--> <!--tab标签可滑动--> <!--tab被选中字体颜色--> <!--tab字体颜色-->
tablayout一般与ViewPager、Fragment一起使用，具体方法可参见另一篇关于TabLayout的文章。
Navigation View - 侧滑视图
Navigation需要在DrawLayout中使用，可创建一个DrawLayout的xml文件或者将主Activity的xml的最外层设为DrawLayout：
<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/draw_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/activity_main" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/head_view" app:menu="@menu/menu_main" /> </android.support.v4.widget.DrawerLayout>
此时，侧滑菜单基本已实现，效果如图：
CoordinatorLayout - Design Support 核心部件
普通layout的效果，如图:
此时Snackbar会遮住下面的view，使用CoordinatorLayout则不会：
但是CoordinatorLayout只支持Toobar，要显示Action只能自己加入Toobar，Toobar最好是放在AppBarLayout之中。
同时CoordinatorLayout中与ScrollView兼容性不是很好，一般使用NestedScrollView。
<?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.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app: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:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior" 必须加上，不然里面的内容会在toobar下面android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="1111111111111" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> <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="10dp" app:srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
效果如下：
Toobar可以加一个layout_scrollFlags属性
app:layout_scrollFlags="scroll|enterAlways"
往下拉时，toobar就会出来。
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
往下拉倒第一个，toobar才会出来。
app:layout_scrollFlags="scroll|exitUntilCollapsed"
这个需要和toobar中的android:minHeight="20dp"配合使用
toobar会留下最小高度
Toobar之外还可以再加上一层CollapsingToolbarLayout，做成伸缩效果：
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp" app:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>
效果图：
同时CollapsingToolbarLayout也可以设置标题：
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing); collapsingToolbarLayout.setTitle("自定义标题");
效果：
CollapsingToolbarLayout的app:expandedTitleMarginStart="180dp"属性可设置文字的位置。
蓝色部分我们可以替换为一张图片，做成更丰富的效果。在CollapsingToolbarLayout里面，Toobar同级位置插入一个ImageView，并去掉Toobar的背景色。
<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic" app:layout_collapseMode="parallax"/> <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/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout>
效果图：
ImageView中有个属性app:layout_collapseParallaxMultiplier="0.5"其值为[0-1]，值为0，图片向上滑动，最后显示图片的最下面部分，0.5时，图片向上滑动后显示中间部分，1显示最顶端部分，且图片不会动，只是下面画上去。
如果希望最后显示出Toobar可设置CollapsingToolbarLayout的app:contentScrim="#3f51b2"
