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教程