Android Design Support Library

　　Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。

　　下面介绍design Libraay，部分内容出自官方文档。

　　英文原文： http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

      翻译： http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

　　使用design，首先我们要先引入它的Libray包。如果使用AS开发只需要在build.gradle文件里面添加：

compile 'com.android.support:design:23.2.0'   目前的最新版本是23.2.0

一  SnackBar

           

 snackbar显示在屏幕底部，包含文字信息和可选的操作按钮，是提供快速反馈的好控件，在指定时间结束之后消失，用户也可以在达到设置时间之前将它滑动删除，因为包含可以滑动删除和交互按钮，所以snackbar比Toast更加强大。下面看一下SnakBar的api:

Snackbar
  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener)
  .show(); // Don’t forget to show!

二  Navigation View

        

现在大多数的都存在侧滑栏，NavigationView的使用，是侧滑栏的设计更加简单，尤其是对于刚刚学习使用侧滑栏的用户，上面的侧滑栏里面的内容就是通过NavigationView添加的，我们可以吧NavigationView和DrawerLayout结合使用，来实现侧滑效果。

<android.support.v4.widget.DrawerLayout
        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:fitsSystemWindows="true">

　　<!-- your content layout -->
       
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_drawer_header"
        app:menu="@menu/navigation_drawer_menu" />
    
</android.support.v4.widget.DrawerLayout>

我们注意两个属性：app:headerLayout--控制侧滑栏头部的布局；app:menu 导航菜单的资源文件（也可以再运行时配置），下面分别贴出两个xml的码：

navigation_drawer_header.XML  ,用来设置侧滑栏头部的显示布局，这里只是展示了一个图片。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro>
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#512da8">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

navigation_drawer_menu.XML    用来设置侧护栏的内容部分。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:andro>
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item_green"
            android:icon="@mipmap/ic_launcher"
            android:title="Green" />
        <item
            android:id="@+id/item_blue"
            android:icon="@mipmap/ic_launcher"
            android:title="Blue" />
        <item
            android:id="@+id/item_pink"
            android:icon="@mipmap/ic_launcher"
            android:title="Pink" />
    </group>
    <item android:title="SubItems2">
        <menu>
            <item
                android:id="@+id/subitem_01"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem01" />
            <item
                android:id="@+id/subitem_02"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem02" />
            <item
                android:id="@+id/subitem_03"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem03" />
        </menu>
    </item>

</menu>

 

 我们通过Navigation调用setNavigationItemSelectedListener，来对侧滑栏每个item的点击添加监听，然后做自己想做的处理。

 

三 TextInputLayout：

　　在design中对默认的EditText也进行了升级，使用TextInputLayout将EditText封装起来，注意：TextInputLayout一定要和EditText同时使用，不能单独使用，默认的EditText在使用之前一般我们会设置提示语，但是提示语在输入一个字母的时候就隐藏了，我们使用TextInputLayout，可以将提示语添加在EditText输入框的上方。这样也起到了时刻提示用户的作用。

　　具体添加代码如下:

　　

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.design.widget.TextInputEditText
            android:id="@+id/edittext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </android.support.design.widget.TextInputLayout>

然后在对应界面内设置 textInputLayout.setHint(”your hint");

这样简单的几行代码就实现了如下效果，对应TextInputLayout个人觉得用处不大，还是很少使用的。

 

FloatingActionButton

　　FloatActionButton是一个可以进行点击的圆形按钮，如下所示：

　　

        <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="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            />
    </android.support.design.widget.CoordinatorLayout>

　

　早XML文件中，我们可以通过设置FloatActionButton的src来设置里面的图标。因为FloatActionButton继承ImageView，所有我们可以使用ImagView里面的所有属性。但是修改FloatActionButton的按钮颜色和主题的colorAccent属性使一致的。现在使用AS开发的都知道，创建一个Blank Activity的时候在生成默认布局时会生成一个FloatActionButton按钮，一般情况下按钮时在页面的右下方，但是我们也可以自定义FlatActionButton的位置。

如上图所示，我就是把button放在了一个卡片上面，我们可以设置下面这两个属性来实行此功能。

　　app:layout_anchor="@id/cardview1"
　　app:layout_anchorGravity="top|right"

　　app:layout_anchor属性来指定FloatActionButton是固定在什么控件或者布局上的。后面的是依附控件的id.

　　app:layout_anchorGravity属性指定相对于依附控件的位置。

四  TabLayout（选项卡）

　　designLibray提出TabLayout之前，我们实现切换功能时，一般会找一些第三方库或者自己写，Design的TabLayout实现了固定的选项卡中view的宽度平分，在使用TabLayout时，我们只需要在XML里面添加：

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.design.widget.TabLayout>

然后在XML对应的界面中添加代码：

　　tabLayout.addTab(tabLayout.newTab().setText("全部"));
　　tabLayout.addTab(tabLayout.newTab().setText("类别A"));
　　tabLayout.addTab(tabLayout.newTab().setText("类别B"));
　　tabLayout.addTab(tabLayout.newTab().setText("类别C"));
　　tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.green));
　　tabLayout.setSelectedTabIndicatorHeight(8);
　　tabLayout.setTabTextColors(Color.BLACK, getResources().getColor(R.color.green));

后面的Tab名称自己根据需求添加，这里我就随机起了几个title。然后这样实现的效果就是这样滴：

　　

　　setSelectedTabIndicatorColor属性可以设置选中tab的下划线颜色；

　　setSelectedTabIndicatorHeight属性设置下划线的高度

　　setTabTextColors有两个属性，属性一是默认文字颜色，属性二是选中的文字颜色。

　　一般情况下TabLayout适合viewpager配合使用的，viewpager里面可以加载Fragment，如果要和Viewpager同时使用，我们一定要使用setupWithViewPager(viewPager)方法来讲TabLayout和viewPager连接在一起。

　　XML文件如下所示：

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.design.widget.TabLayout>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
    </android.support.v4.view.ViewPager>

在代码中，我们需要添加一个Adapter,在viewpager中加载内容，我们今天在viewpager中添加Fragment，就创建一个FragmentPagerAdapter:

    class Adapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

        public Adapter(FragmentManager fm) {
            super(fm);
        }

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitles.get(position);
        }
    }

View Code