Android Design Support Library

时间  2019-11-09
标签 android design support library 栏目 Android 繁體版
原文   原文链接

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

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

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

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

　　使用design，首先咱们要先引入它的Libray包。若是使用AS开发只须要在build.gradle文件里面添加：app

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

一  SnackBaride

           

 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的码：gradle

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:android="http://schemas.android.com/apk/res/android">
    <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

而后再调用下面代码，就完成了，这样TabLayout和ViewPager就能够结合使用了，是否是简单了不少呢o(^▽^)o

Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(Fragment1.newInstance("one"), "专题1");
adapter.addFragment(Fragment1.newInstance("two"), "专题2");
adapter.addFragment(Fragment1.newInstance("three"), "专题3");
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

咱们来看一下效果图，就是这样啦。

        

注：若是咱们的Tab内容不仅是3,4个二是更多的时候，TabLayout提供了app:tabMode="scrollable"属性，使TabLayout能够滑动。

 

五  CoordinatorLayout

　　CoordinatorLayout能够当作是一个加强型的FramLayout，咱们使用CoordinatorLayout能够实现不少新的操做。

　　1，CoordinatorLayout与FloatActionButton.

　　　咱们吧FloatActionButton做为一个子View添加进入CoordinationLayout中，在触发FloatActionButton的时候在底部显示出SnackBar,咱们能够看到在SnackBar进入界面的时候，FloatActionButton会自动上移，这就是利用了CoordinationLayout提供的毁掉方法，而且在snackBar消失时回到原来的位置，而且不须要添加额外的代码。

　　还有就是咱们在上面提到的，CoordinationLayout还提供了layout_anchor属性和layout_anchorGravity一块儿使用，能够用于放置悬浮按钮和其余view的相对位置。这个咱们在上面的FloatActionButton已经提到了。

　　

　　

　　2，CoordinatorLayout与AppBar。

　　　　咱们看用MD写的项目几乎都有使用CoordinatorLayout和ToolBar一块儿使用实现的滚动技巧。

 　在添加此功能的时候咱们须要添加一个滚动组件，例如RecycleView，NestedScrollView and so on（ScrollView没有效果）.因此咱们能够添加一个这样的布局：

　　

 <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">
      
     <! -- Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
    <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.Toolbar
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">
 
            <android.support.design.widget.TabLayout
                  ...
                  />
     </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

在上面的代码中咱们呢看到了属性app:layout_scrollFlags，咱们就是经过这个属性来判断控件是如何滚出屏幕与滚入屏幕

　Flag包括:

　① scroll: 全部想滚动出屏幕的view都须要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

　② enterAlways: 这个flag让任意向下的滚动都会致使该view变为可见，启用快速“返回模式”。

   ③ enterAlwaysCollapsed: 顾名思义，这个flag定义的是什么时候进入（已经消失以后什么时候再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，而且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。              

    ④ exitUntilCollapsed: 一样顾名思义，这个flag时定义什么时候退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

上面的布局文件中咱们在RecycleView中设置了属性app:layout_behavior="@string/appbar_scrolling_view_behavior"，当控件设置了这个属性，就会触发设置了app:layout_scrollFlags属性的控件发生滑动状态的改变。

注意咱们只是CoordinatorLayout和ToolBar举例说明这个功能，可是CoordinatorLayout也能够和其余控件实现此效果。这个我没有本身写例子，就贴上其余Demo的图：

　　

 

六  CollapsingToolbarLayout(可折叠的ToolBar)

　　从字面意思咱们就知道这是个可折叠的ToolBar，使用CollapsingToolbarLayout的　　CollapsingToolbarLayout继承FramLayout,CollapsingToolbarLayout包裹ToolBar的时候提供一个可折叠的ToolBar , 通常做为AppBarLayout的子视图使用。

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:title = "collapsingToolbarLayout"
            app:layout_scrollFlags="exitUntilCollapsed|scroll">

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/cheese_1" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

　咱们早CollapsingToolBarLayout中添加了一个ImageView和ToolBar, CollapsingToolBarLayout有如下几个基本的属性。

   app:title = ""，设置的Title内容在布局展开的时候会变得大些，而在折叠的时候使字体过渡到默认值，注意，咱们的title是在CollapsingToolbarLayout上面设置的，而不是在ToolBar上面。

  app:contentScrim="?attr/colorPrimary"  设置这个属性能够是布局在拉伸或者缩小到必定高度的时候渐变ToolBar的颜色，通常渐变的颜色选择主题色，能够以自定义颜色。

  app:layout_collapseMode=""  这个属性来设置子视图折叠模式，有两种pin:

    固定模式：app:layout_collapseMode = "pin" 确保Toolbar在view折叠的时候最后固定在屏幕的顶部。

　 视差模式：app:layout_collapseMode = "parallax" 在折叠的时候会有个视差折叠的效果。

 

　　同时咱们同时也设置了属性app:layout_scrollFlags来设置滑动方式，来响应滚动布局的

　　app:layout_behavior="@string/appbar_scrolling_view_behavior">属性。来实现滚动布局。

      

　　截图很丑，下面贴上官方的例子：

　　

　　

总结：

写到这里support design Libray 里面的布局就差很少介绍完了，经过对design的使用感受仍是很人性化的，虽然有些效果的实如今网上有多的第三方库也能够实现，可是毕竟这是google官方推出的，使用起来更加放心，可是有一个缺点就是部分控件封装过于严重，因此只能在特定的布局或者要求下才能使用。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程