Android进阶系列--Design Support Library使用详解（Snackbar,TextInputLayout,TabLayout,NavigationView...）

Posted 2023-02-26 xinruzhishui_11

原文链接：http://blog.csdn.net/sw5131899/article/details/53996800

 *本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

Material Design 设计风格非常受欢迎，那么支持其效果的Design Support Library（Android 2.1  API  level 7及其以上）库又有哪些控件呢。主要包括SnackBar、Navigation View、FloatActionbutton、CoordinatorLayout、CollapsingToolBarLayout等。我在Git上看见一个非常炫的效果

谷歌官网介绍：http://android-developers.blogspot.com.es/2012/05/android-design-support-library.html

把该项目的Git附上，觉得有用的自行下载看源码：https://github.com/frogermcs/InstaMaterial，现在来一一介绍Design系列控件。这里还有极客学院整理的关于Material Design的文档：

http://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html

1.SnackBar

SnackBar是带有动画效果的快速提示栏，它显示在屏幕底部，是用来代替Toast的一个全新控件，它基本上继承了Toast的属性和方法，用户可以点击按钮执行对应的操作，Snackbar支持滑动消失，如果没设任何操作，那么到时间自动消失。

SnackBar的构造：

// 参数分别是父容器，提示信息，持续时间
public static Snackbar make(@NonNull View view, @NonNull CharSequence text,@Duration int duration)

SnackBar的常用方法：

// 用于给SnackBar设定一个Action，点击之后会回调OnclickListener中的Onclick方法
public Snackbar setAction(CharSequence text, final View.OnClickListener listener)

// 用于设定Action的字体颜色
public Snackbar setActionTextColor(@ColorInt int color)

// 设定提示的字体
public Snackbar setText(@NonNull CharSequence message)

// 展示SnackBar
public void show()

// 清除SnackBar
public void dismiss()

// 设置回调，比如OnDismissed或者OnShown
public Snackbar setCallback(Callback callback)

Snackbar需要一个控件容器view用来容纳，官方推荐使用CoordinatorLayout来确保Snackbar和其他组件的交互，比如滑动取消Snackbar、Snackbar出现时FloatingActionButton上移。举一个简单运用的例子：

[java]

view plain copy print ?

1. <android.support.percent.PercentRelativeLayout  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:id="@+id/activity_main"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="com.example.administrator.singleinstance.MainActivity">  
9.   
10.     <Button  
11.         android:layout_width="0dp"  
12.         android:layout_height="0dp"  
13.         android:id="@+id/btn"  
14.         android:onClick="click"  
15.         android:layout_centerInParent="true"  
16.         app:layout_widthPercent="25%"  
17.         app:layout_heightPercent="10%"  
18.         android:text="取消"  
19.         />  
20.   
21.     <android.support.design.widget.CoordinatorLayout  
22.         android:id="@+id/coor"  
23.         android:layout_width="0dp"  
24.         android:layout_alignParentBottom="true"  
25.         app:layout_widthPercent="100%"  
26.         android:layout_height="wrap_content">  
27.   
28.     </android.support.design.widget.CoordinatorLayout>  
29.   
30. </android.support.percent.PercentRelativeLayout>  

<android.support.percent.PercentRelativeLayout
    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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.singleinstance.MainActivity">

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/btn"
        android:onClick="click"
        android:layout_centerInParent="true"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="10%"
        android:text="取消"
        />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coor"
        android:layout_width="0dp"
        android:layout_alignParentBottom="true"
        app:layout_widthPercent="100%"
        android:layout_height="wrap_content">

    </android.support.design.widget.CoordinatorLayout>

</android.support.percent.PercentRelativeLayout>

[java]

view plain copy print ?

1. public void click(View view)   
2.         Snackbar.make(coordinatorLayout, "确定取消吗？", Snackbar.LENGTH_LONG)  
3.                 .setAction("确定", new View.OnClickListener()   
4.                     @Override  
5.                     public void onClick(View view)   
6.                         Toast.makeText(MainActivity.this, "已经取消", Toast.LENGTH_SHORT).show();  
7.                       
8.                 )  
9.                 .setCallback(new myOnClick())  
10.                 .show();  
11.   
12.       
13.   
14.     /** 
15.      * 滑动消失回调 
16.      */  
17.     public static final int DISMISS_EVENT_SWIPE = 0;  
18.     /** 
19.      * 点击消失回调 
20.      */  
21.     public static final int DISMISS_EVENT_ACTION = 1;  
22.     /** 
23.      * 超时回调 
24.      */  
25.     public static final int DISMISS_EVENT_TIMEOUT = 2;  
26.     /** 
27.      *调用Dismiss消失回调 
28.      */  
29.     public static final int DISMISS_EVENT_MANUAL = 3;  
30.     /** 
31.      * 再次出现消失SnackBar回调 
32.      */  
33.     public static final int DISMISS_EVENT_CONSECUTIVE = 4;  
34.   
35.     class myOnClick extends Snackbar.Callback   
36.         @Override  
37.         public void onDismissed(Snackbar snackbar, int event)   
38.             super.onDismissed(snackbar, event);  
39.             switch (event)   
40.                 case DISMISS_EVENT_SWIPE:  
41.                     Logger.i("DISMISS_EVENT_SWIPE");  
42.                     break;  
43.                 case DISMISS_EVENT_ACTION:  
44.                     Logger.i("DISMISS_EVENT_ACTION");  
45.                     break;  
46.                 case DISMISS_EVENT_TIMEOUT:  
47.                     Logger.i("DISMISS_EVENT_TIMEOUT");  
48.                     break;  
49.                 case DISMISS_EVENT_MANUAL:  
50.                     Logger.i("DISMISS_EVENT_MANUAL");  
51.                     break;  
52.                 case DISMISS_EVENT_CONSECUTIVE:  
53.                     Logger.i("DISMISS_EVENT_CONSECUTIVE");  
54.                     break;  
55.               
56.           
57.       

public void click(View view) 
        Snackbar.make(coordinatorLayout, "确定取消吗？", Snackbar.LENGTH_LONG)
                .setAction("确定", new View.OnClickListener() 
                    @Override
                    public void onClick(View view) 
                        Toast.makeText(MainActivity.this, "已经取消", Toast.LENGTH_SHORT).show();
                    
                )
                .setCallback(new myOnClick())
                .show();

    

    /**
     * 滑动消失回调
     */
    public static final int DISMISS_EVENT_SWIPE = 0;
    /**
     * 点击消失回调
     */
    public static final int DISMISS_EVENT_ACTION = 1;
    /**
     * 超时回调
     */
    public static final int DISMISS_EVENT_TIMEOUT = 2;
    /**
     *调用Dismiss消失回调
     */
    public static final int DISMISS_EVENT_MANUAL = 3;
    /**
     * 再次出现消失SnackBar回调
     */
    public static final int DISMISS_EVENT_CONSECUTIVE = 4;

    class myOnClick extends Snackbar.Callback 
        @Override
        public void onDismissed(Snackbar snackbar, int event) 
            super.onDismissed(snackbar, event);
            switch (event) 
                case DISMISS_EVENT_SWIPE:
                    Logger.i("DISMISS_EVENT_SWIPE");
                    break;
                case DISMISS_EVENT_ACTION:
                    Logger.i("DISMISS_EVENT_ACTION");
                    break;
                case DISMISS_EVENT_TIMEOUT:
                    Logger.i("DISMISS_EVENT_TIMEOUT");
                    break;
                case DISMISS_EVENT_MANUAL:
                    Logger.i("DISMISS_EVENT_MANUAL");
                    break;
                case DISMISS_EVENT_CONSECUTIVE:
                    Logger.i("DISMISS_EVENT_CONSECUTIVE");
                    break;
            
        
    

这些运用都很简单，就不更多的嚼舌根了。有个花式使用SnackBar的连接，感兴趣的可以去看看:

http://www.jianshu.com/p/cd1e80e64311

2.TextInputLayout

TextInputLayout主要作用是作为EditText的容器，从而为EditText默认生成一个浮动的label，当用户点击了EditText之后，EditText中设置的Hint字符串会自动移到EditText的左上角。使用非常简单

这有个例子写的不错：http://www.jcodecraeer.com/a/basictutorial/2015/0821/3338.html

• getEditText() 得到控件中包含的 EditText 控件
• setError(CharSequence error) 设置错误信息并显示在 EditText 下方 应用场景：比如用户输错了密码或者用户名等

• setHint(CharSequence hint) 设置提示信息

• setErrorEnabled(boolean enabled) 设置 setError(CharSequence error) 这个函数是否可用 记住哦：这个函数一定要在 setError(CharSequence error) 这个函数之后执行哦！

[java]

view plain copy print ?

1. <android.support.percent.PercentRelativeLayout  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:id="@+id/activity_main"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="com.example.administrator.singleinstance.MainActivity">  
9.   
10.     <android.support.design.widget.TextInputLayout  
11.         android:id="@+id/input"  
12.         app:layout_widthPercent="80%"  
13.         android:layout_height="wrap_content"  
14.         android:layout_centerHorizontal="true"  
15.         app:errorEnabled="true"  
16.         app:errorTextAppearance="@style/TextAppearance.Design.Error">  
17.         <EditText  
18.             android:layout_width="match_parent"  
19.             android:layout_height="match_parent"  
20.             android:imeOptions="actionGo"  
21.             android:inputType="text"  
22.             android:hint="输入姓名"  
23.             android:lines="1"  
24.             />  
25.   
26.     </android.support.design.widget.TextInputLayout>  
27.     <android.support.design.widget.TextInputLayout  
28.         android:id="@+id/input2"  
29.         android:layout_below="@+id/input"  
30.         app:layout_widthPercent="80%"  
31.         android:layout_height="wrap_content"  
32.         android:layout_centerHorizontal="true"  
33.         app:errorEnabled="true"  
34.         app:errorTextAppearance="@style/TextAppearance.Design.Error">  
35.         <EditText  
36.             android:layout_width="match_parent"  
37.             android:layout_height="match_parent"  
38.             android:imeOptions="actionGo"  
39.             android:inputType="textPassword"  
40.             android:hint="输入密码"  
41.             android:lines="1"  
42.             />  
43.   
44.     </android.support.design.widget.TextInputLayout>  
45. </android.support.percent.PercentRelativeLayout>  

<android.support.percent.PercentRelativeLayout
    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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.singleinstance.MainActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input"
        app:layout_widthPercent="80%"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/TextAppearance.Design.Error">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:imeOptions="actionGo"
            android:inputType="text"
            android:hint="输入姓名"
            android:lines="1"
            />

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/input2"
        android:layout_below="@+id/input"
        app:layout_widthPercent="80%"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/TextAppearance.Design.Error">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:imeOptions="actionGo"
            android:inputType="textPassword"
            android:hint="输入密码"
            android:lines="1"
            />

    </android.support.design.widget.TextInputLayout>
</android.support.percent.PercentRelativeLayout>

[java]

view plain copy print ?

1. public void TextInputLayout()  
2.         textInputLayout = (TextInputLayout) findViewById(R.id.input);  
3.         textInputLayout2 = (TextInputLayout) findViewById(R.id.input2);  
4.         textInputLayout2.getEditText().addTextChangedListener(new TextWatcher()   
5.             @Override  
6.             public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2)   
7.   
8.               
9.   
10.             @Override  
11.             public void onTextChanged(CharSequence charSequence, int i, int i1, int i2)   
12.                 if (charSequence.length() < 4)  
13.                     textInputLayout2.setError("必须输入6个字符！");  
14.                     textInputLayout2.setErrorEnabled(true);  
15.                 else   
16.                     textInputLayout2.setErrorEnabled(false);  
17.               
18.   
19.             @Override  
20.             public void afterTextChanged(Editable editable)   
21.   
22.               
23.         );  
24.         textInputLayout.getEditText().addTextChangedListener(new TextWatcher()   
25.             @Override  
26.             public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2)   
27.   
28.               
29.   
30.             @Override  
31.             public void onTextChanged(CharSequence charSequence, int i, int i1, int i2)   
32.                 if (charSequence.length() < 4)  
33.                     textInputLayout.setError("必须输入4个字符！");  
34.                     textInputLayout.setErrorEnabled(true);  
35.                 else   
36.                     textInputLayout.setErrorEnabled(false);  
37.               
38.   
39.             @Override  
40.             public void afterTextChanged(Editable editable)   
41.   
42.               
43.         );  
44.       

public void TextInputLayout()
        textInputLayout = (TextInputLayout) findViewById(R.id.input);
        textInputLayout2 = (TextInputLayout) findViewById(R.id.input2);
        textInputLayout2.getEditText().addTextChangedListener(new TextWatcher() 
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) 

            

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) 
                if (charSequence.length() < 4)
                    textInputLayout2.setError("必须输入6个字符！");
                    textInputLayout2.setErrorEnabled(true);
                else 
                    textInputLayout2.setErrorEnabled(false);
            

            @Override
            public void afterTextChanged(Editable editable) 

            
        );
        textInputLayout.getEditText().addTextChangedListener(new TextWatcher() 
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) 

            

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) 
                if (charSequence.length() < 4)
                    textInputLayout.setError("必须输入4个字符！");
                    textInputLayout.setErrorEnabled(true);
                else 
                    textInputLayout.setErrorEnabled(false);
            

            @Override
            public void afterTextChanged(Editable editable) 

            
        );
    

3.TabLayout

TabLayout控件用于应用中轻松的添加Tab分组功能，总共有两种类型可选。

1.固定的Tabs：对应的xml配置中的 app:tabMode="fixed"

2.可滑动的Tabs：对应xml配置中的 app:tabMode="scrollable"。

TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。接下来就简单使用一下。

先来布局：

[java]

view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:id="@+id/activity_tab_layout"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="com.example.administrator.designtest.TabLayoutActivity">  
9.   
10.     <android.support.v4.view.ViewPager  
11.         android:id="@+id/viewpager"  
12.         android:layout_below="@+id/tablayout_top"  
13.         android:layout_width="match_parent"  
14.         android:layout_height="match_parent">  
15.     </android.support.v4.view.ViewPager>  
16.   
17.     <android.support.design.widget.TabLayout  
18.         android:id="@+id/tablayout_top"  
19.         app:tabTextColor="#000"  
20.         app:tabSelectedTextColor="#fff"  
21.         android:background="@color/colorPrimary"  
22.         android:layout_width="match_parent"  
23.         android:layout_height="wrap_content"  
24.         app:tabMode="fixed"  
25.         app:tabGravity="fill">  
26.   
27.     </android.support.design.widget.TabLayout>  
28. </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.example.administrator.designtest.TabLayoutActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tablayout_top"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_top"
        app:tabTextColor="#000"
        app:tabSelectedTextColor="#fff"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill">

    </android.support.design.widget.TabLayout>
</RelativeLayout>

这个很简单，再来一个适配器。

[java]

view plain copy print ?

1. public class ViewPagerAdapter extends FragmentPagerAdapter   
2.     private List<BlankFragment>fragmentList;  
3.     private List<String>titleList;  
4.     public ViewPagerAdapter(FragmentManager fm, List<BlankFragment> fragmentList, List<String> titleList)   
5.         super(fm);  
6.         this.fragmentList = fragmentList;  
7.         this.titleList = titleList;  
8.       
9.   
10.     @Override  
11.     public Fragment getItem(int position)   
12.         return fragmentList.get(position);  
13.       
14.   
15.     @Override  
16.     public int getCount()   
17.         return fragmentList.size();  
18.       
19.   
20.     @Override  
21.     public CharSequence getPageTitle(int position)   
22.         return titleList.get(position);  
23.       
24.   

public class ViewPagerAdapter extends FragmentPagerAdapter 
    private List<BlankFragment>fragmentList;
    private List<String>titleList;
    public ViewPagerAdapter(FragmentManager fm, List<BlankFragment> fragmentList, List<String> titleList) 
        super(fm);
        this.fragmentList = fragmentList;
        this.titleList = titleList;
    

    @Override
    public Fragment getItem(int position) 
        return fragmentList.get(position);
    

    @Override
    public int getCount() 
        return fragmentList.size();
    

    @Override
    public CharSequence getPageTitle(int position) 
        return titleList.get(position);
    

用过viewpager套Fragement的猿友都知道，就不啰嗦了。getPageTitle是获取需要显示的tab标题。新建一个fragment空的。

[java]

view plain copy print ?

1. public class BlankFragment extends Fragment   
2.     @Override  
3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.                              Bundle savedInstanceState)   
5.         return inflater.inflate(R.layout.fragment_blank, container, false);  
6.       
7.   

public class BlankFragment extends Fragment 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) 
        return inflater.inflate(R.layout.fragment_blank, container, false);
    

那么准备工作差不多了，开始进入主题，基本的介绍都加了注释

[java]

view plain copy print ?

1. public class TabLayoutActivity extends AppCompatActivity   
2.   
3.     ViewPager viewPager;  
4.     TabLayout tabLayout;  
5.   
6.     List<BlankFragment>fragmentList;  
7.     List<String>stringList;  
8.   
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState)   
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.activity_tab_layout);  
13.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
14.         tabLayout = (TabLayout) findViewById(R.id.tablayout_top);  
15.         //添加fragment  
16.         fragmentList = new ArrayList<>();  
17.         fragmentList.add(new BlankFragment());  
18.         fragmentList.add(new BlankFragment());  
19.         fragmentList.add(new BlankFragment());  
20.         fragmentList.add(new BlankFragment());  
21.         //添加标题  
22.         stringList = new ArrayList<>();  
23.         stringList.add("热门新闻");  
24.         stringList.add("热门推荐");  
25.         stringList.add("本月热榜");  
26.         stringList.add("今日热榜");  
27.         //添加tab  
28.         tabLayout.addTab(tabLayout.newTab().setText("热门新闻"));  
29.         tabLayout.addTab(tabLayout.newTab().setText("热门推荐"));  
30.         tabLayout.addTab(tabLayout.newTab().setText("本月热榜"));  
31.         tabLayout.addTab(tabLayout.newTab().setText("今日热榜"));  
32.         //适配器  
33.         ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragmentList,stringList);  
34.         //建立联系  
35.         viewPager.setAdapter(viewPagerAdapter);  
36.         tabLayout.setupWithViewPager(viewPager,true);  
37.       
38.   

public class TabLayoutActivity extends AppCompatActivity 

    ViewPager viewPager;
    TabLayout tabLayout;

    List<BlankFragment>fragmentList;
    List<String>stringList;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout_top);
        //添加fragment
        fragmentList = new ArrayList<>();
        fragmentList.add(new BlankFragment());
        fragmentList.add(new BlankFragment());
        fragmentList.add(new BlankFragment());
        fragmentList.add(new BlankFragment());
        //添加标题
        stringList = new ArrayList<>();
        stringList.add("热门新闻");
        stringList.add("热门推荐");
        stringList.add("本月热榜");
        stringList.add("今日热榜");
        //添加tab
        tabLayout.addTab(tabLayout.newTab().setText("热门新闻"));
        tabLayout.addTab(tabLayout.newTab().setText("热门推荐"));
        tabLayout.addTab(tabLayout.newTab().setText("本月热榜"));
        tabLayout.addTab(tabLayout.newTab().setText("今日热榜"));
        //适配器
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragmentList,stringList);
        //建立联系
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager,true);
    

tabLayout.setupWithViewPager(viewPager,true);这句代码是关联viewpager和tabLayout。后面的true是是否自动刷新fragment的布尔值，看源码就知道了。

[java]

view plain copy print ? 《Android进阶之光》--Material Design

进阶篇Android学习笔记——TextInputLayout

进阶篇Android学习笔记——TextInputLayout

如果不需要，防止 CollapsingToolbarLayout 折叠

Material Design系列，自定义Behavior实现Android知乎首页

Android Material Design 系列之 SnackBar详解