zoukankan      html  css  js  c++  java
  • 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: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官方推出的,使用起来更加放心,但是有一个缺点就是部分控件封装过于严重,所以只能在特定的布局或者要求下才能使用。

  • 相关阅读:
    [HNOI2007]最小矩形覆盖
    Java实现第十届蓝桥杯质数
    Redo current损坏
    [学习笔记]计算几何
    delete noprompt archivelog 报错ORA-00245,RMAN-08132
    [学习笔记]CDQ分治
    Java实现第九届蓝桥杯耐摔指数
    RAC RMAN 备份 RMAN-03009 ORA-19504 ORA-27040 RMAN-06012 channel c3 not allocated 错误分析
    [学习笔记]树套树
    RMAN-03002、RMAN-06059
  • 原文地址:https://www.cnblogs.com/blogljj/p/5236129.html
Copyright © 2011-2022 走看看