您的位置: 首页 > IT文章 > Android Design Support Library

Android Design Support Library

分类: IT文章 • 2022-06-11 18:01:44

　　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个人觉得用处不大，还是很少使用的。

Android Design Support Library

FloatingActionButton

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

　　 Android Design Support Library

        <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的位置。

Android Design Support Library

如上图所示，我就是把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。然后这样实现的效果就是这样滴：

　　 Android Design Support Library

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

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

Android Design Support Library

注：如果我们的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已经提到了。

　　 Android Design Support Library

　　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的图：

　　 Android Design Support Library

六 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">属性。来实现滚动布局。

Android Design Support Library

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

　　 Android Design Support Library

总结：

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

Android Design Support Library

相关推荐