Android Design Support Library 库的使用（一）

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);
    }
}

下面是对NavigationView 中的Menu菜单文件添加点击事件

private NavigationView navigationView;
navigationView =(NavigationView)findViewById(R.id.navigationView);

 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_home:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_messages:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_friends:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_discussion:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.sub_item1:
                        Toast.makeText(NavigationViewActivity.this,"sub_item1 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.sub_item2:
                        Toast.makeText(NavigationViewActivity.this,"sub_item2 界面",Toast.LENGTH_SHORT).show();
                        break;
                }
                item.setChecked(true);
                drawerLayout.closeDrawers(); //关闭抽屉
                return true;
            }
        });



    //创建菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //创建Menu 菜单
        getMenuInflater().inflate(R.menu.draw_menu,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id=item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }
        if (id == android.R.id.home) {
            drawerLayout.openDrawer(GravityCompat.START);  //打开抽屉
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

由于是抽屉所以要在 Toolbar 上添加一个抽屉按钮，用来更加方便的打开左侧的NavigationView 视图，所以这里初始化Toolbar 一下；

 private void initToolbar() {
        //初始化ToolBar
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        toolbar.setTitle("ToolBar的菜单栏"); //设置标题
        toolbar.setSubtitle("CSDN");   //设置子标题
        toolbar.setLogo(R.mipmap.ic_launcher); //设置Logo图标
        toolbar.setNavigationIcon(R.mipmap.ic_launcher); //设置抽屉的图片
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setOnMenuItemClickListener(this);//这是给toolbar 上的其他Menu设置按钮监听事件，并不是NavigationView 的Menu上的点击事件，还请不要搞混
    }

//这是Toolbar 上的menu菜单点击事件，跟NavigationView上的Menu的菜单点击事件展现效果不一样，虽然共用一份Menu文件
@Override
public boolean onMenuItemClick(MenuItem item) {

        //对ToolBar上的菜单进行点击事件
        switch (item.getItemId()){
            case R.id.nav_home:
                Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_messages:
                Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_friends:
                Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_discussion:
                Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

注意： 该代码中的getMenuInflater().inflate(R.menu.draw_menu,menu);
上面的R.menu.draw_menu 文件为NavigationView 和 Toolbar 两者共用的Menu菜单文件，读者可以自定义两份，没必要共用一份Menu文件！

后面的AppBarLayout和 CoordinatorLayout以及CollapsingToolBarLayout 3大控件在下一篇博客中详细介绍！（由于篇幅问题）