Android Design Support Library 库·的简介： 它是Google 为 Android 5.0 以上 添加的一些新特性，使得Android app 开发的界面可以焕然一新！
| Design Support Library | 控件介绍 |
|---|---|
| SnackBar | 一种基于Toast 与Dialog 中间用于提示消息的 |
| TextInputLayout | 一种新的EditText(提示消息不会消失) |
| FloatingActionButton | 悬浮按钮 |
| TabLayout | 分页式布局，结合Fragment一起使用 |
| NavigationView | 类似于侧滑菜单的导航View |
| AppBarLayout | 新形式的AppBar |
| CoordinatorLayout | 控件之间相互作用的布局 |
| CollapsingToolBarLayout | 一种可以收缩顶部ToolBar 的FrameLayout |
Design Support Library 在 Android Studio 中可以依赖： compile ‘com.android.support:design:24.2.1’； (Android Studio 中依赖方法：在Android Studio 中切换到PRoject 视图 然后点击打开 app 包下build.gradle 文件中)
下面通过代码加实现效果图逐一为大家展现效果：
SnackBar :
Snackbar.make(v,"SnackBar comes out",Snackbar.LENGTH_LONG) .setAction("Action", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this,"Toast comes out",Toast .LENGTH_SHORT).show(); } }).show();TextInputLayout: xml 代码：就是在TextInputLayout内部添加一个 EditText
<android.support.design.widget.TextInputLayout android:id="@+id/textInputLayout_name" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content"/> </android.support.design.widget.TextInputLayout>java 实现代码
textInputLayoutName = (TextInputLayout)findViewById(R.id.textInputLayout_name);EditText editText_name=textInputLayoutName.getEditText(); textInputLayoutName.setHint("请输入你的名字"); //给EditText设置要显示的提示消息//接下来给 EditText 添加点击事件editText_name.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { if(s.length()>4){ textInputLayoutName.setError("你的名字输入错误"); textInputLayoutName.setErrorEnabled(true); }else{ textInputLayoutName.setErrorEnabled(false); } } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { } });FloatingActionButton:悬浮按钮 xml 代码
<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_marginTop="360dp" android:layout_marginLeft="240dp" app:elevation="6dp" app:pressedTranslationZ="12dp" android:src="@mipmap/ic_launcher"/>java 实现代码
private FloatingActionButton fab;fab = (FloatingActionButton) findViewById(R.id.fab);//给FloatingActionButton 添加背景图片 fab.setBackgroundTintList(ColorStateList.valueOf(Color.argb(255,125,23,56)));//给FloatingActionButton 添加点击事件，事件效果是弹出一个SnackBar fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v,"Here is a SnackBar",Snackbar.LENGTH_SHORT) //给SnackBar 添加点击事件，事件效果是弹出Toast提示信息 .setAction("Action", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(FloatingActionActivity.this,"Hello World",Toast.LENGTH_SHORT).show(); } }) .show(); } });TabLayout :分页式布局，一般结合ViewPager一起使用 xml 代码： 将TabLayout 与 ViewPager 都放在 RelativeLayout 布局中
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_tab_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.cx.designlibrarydemo.TabLayoutActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabTextColor="#C60" app:tabSelectedTextColor="#fff" app:tabMode="fixed" app:tabGravity="fill"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:paddingTop="45dp" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/tabLayout"> </android.support.v4.view.ViewPager></RelativeLayout>/>Java实现代码
private ViewPager viewPager; private TabLayout tabLayout; private List<Fragment> fragments; viewPager = (ViewPager) findViewById(R.id.viewPager); tabLayout = (TabLayout) findViewById(R.id.tabLayout); //将Fragment 用一个 List<Fragment>集合来装 fragments=new ArrayList<>(); fragments.add(new TabFragment_1()); fragments.add(new TabFragment_2()); fragments.add(new TabFragment_3()); //ViewPager设置 Adapter用来适配Fragment（因为ViewPager中装入3个Fragment，我们有3个Tab页，每个Tab页一一对应Fragment） final FragmentPagerAdapter adapter=new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public android.support.v4.app.Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } };viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); //将ViewPager 与TabLayout 关联 //设置3个 Tab页，并且给每个Tab页设上标题 ，你也可以自定义标题，比如加入图片之类的 tabLayout.getTabAt(0).setText("Tab1"); tabLayout.getTabAt(1).setText("Tab2"); tabLayout.getTabAt(2).setText("Tab3");其中的Fragment的代码，这里只列举一个
public class TabFragment_1 extends android.support.v4.app.Fragment{ @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View viewTabFragment1=inflater.inflate(R.layout.fragment_tab1,container,false); return viewTabFragment1; }}NavigationView ：类似与SlidingMenu（侧滑菜单那种显示效果—第三方控件） 这里结合着DrawerLayout （抽屉控件一起使用） xml代码：
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <!--这是主内容布局--> <include layout="@layout/content_layout"/> <!--这是侧滑菜单的布局--> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" android:layout_gravity="left" app:headerLayout="@layout/nav_header" app:menu="@menu/draw_menu" > </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>重点注意这两句代码： app:headerLayout=”@layout/nav_header” app:menu=”@menu/draw_menu”
nav_header.xml 里面存放着NavigationView 的头部，它是layout形式的xml文件 draw_menu.xml 里面存放则NavigationView 的菜单，它是menu形式的xml文件
nav_header.xml 代码：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="162dp" android:background="?attr/colorPrimaryDark" android:paddingTop="30dp" android:paddingLeft="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" android:orientation="vertical" android:gravity="center|left" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="cxYu1997"/></LinearLayout>draw_menu.xml 代码：这是menu 菜单文件，在menu文件夹新建的menu文件
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:icon="@mipmap/ic_launcher" android:title="Home"/> <item android:id="@+id/nav_messages" android:icon="@mipmap/ic_launcher" android:title="Messages"/> <item android:id="@+id/nav_friends" android:icon="@mipmap/ic_launcher" android:title="Friends"/> <item android:id="@+id/nav_discussion" android:icon="@mipmap/ic_launcher" android:title="Discussion"/> </group> <item android:title="Sub items"> <menu> <item android:icon="@mipmap/ic_launcher" android:title="Sub item1"/> <item android:icon="@mipmap/ic_launcher" android:title="Sub item2"/> </menu> </item></menu>Java实现代码：
public class NavigationViewActivity extends AppCompatActivity { //里面实现对菜单的点击事件，还没写 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_navigation_view); }}后面的AppBarLayout和 CoordinatorLayout以及CollapsingToolBarLayout 3大控件在下一篇博客中详细介绍！（由于篇幅问题）
新闻热点
疑难解答
