Android support library支持包常用控件介紹(一)

谷歌官方推出Material Design 設計理念已經有段時間了,爲支持更方便的實現Material Design設計效果,官方給出了Android support design library 支持庫,讓開發者更容易的實現材料設計的效果。順便推薦官方的一個圖標庫:Material Icons

控件名稱
NavigationView
FloatingActionButton
TextInputLayout
Snackbar
TabLayout
AppBarLayout
CoordinatorLayout
CollapsingToolbarLayout
Coordinator.Behavior

以下控件爲v7包中

控件名稱
RecyclerView
CardView
palette
Toolbar

以下控件爲v4包中

控件名稱
DrawerLayout
SwipeRefreshLayout

暫時想到這麼多,以後會逐步增加。

【zhangke3016 http://blog.csdn.net/zhangke3016

一、NavigationView

  • compile ‘com.android.support:design:23.2.1’*

NavigationView主要和DrawerLayout框架結合使用,爲抽屜導航實現側邊欄提供更簡單更方便的生成方式。慣例,先看效果圖:

NavigationView

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/andro
    id" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:openDrawer="start"> 

        <!-- content內容--> 

        <include layout="@layout/app_bar_main" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" /> 

        <!-- NavigationView 側邊欄--> 

        <android.support.design.widget.NavigationView 
        android:id="@+id/nav_view" 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent" 
        android:layout_gravity="start" 
        android:fitsSystemWindows="true" 
        app:headerLayout="@layout/nav_header_main" 
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>
  • app:headerLayout接收一個layout,作爲導航菜單頂部的Header,可選項。
  • app:menu接收一個menu,作爲導航菜單的菜單項,幾乎是必選項。但也可以在運行時動態改變menu屬性。

menu

<?xml version="1.0" encoding="utf-8"?>
<menu 
xmlns:android="http://schemas.android.com/apk/res/andro
id"> 
<group android:checkableBehavior="single">
    <item android:id="@+id/nav_gallery" 
     android:checked="true"
    android:icon="@drawable/ic_menu_gallery" 
    android:title="Gallery" />
    <item android:id="@+id/nav_slideshow" 
android:icon="@drawable/ic_menu_slideshow" 
android:title="Slideshow" /> 
</group> 
<item android:title="Communicate"> 
    <menu> 
        <item android:id="@+id/nav_share" 
            android:icon="@drawable/ic_menu_share" 
            android:title="Share" />        
</menu> 
 </item>
</menu>

其中checked=”true”的item將會高亮顯示,這可以確保用戶知道當前選中的菜單項是哪個。

checkableBehavior:這組菜單項是否checkable。有效值:none,all(單選/單選按鈕radio
button),single(非單選/複選類型checkboxes)

可以用setNavigationItemSelectedListener方法來設置當導航項被點擊時的回調。OnNavigationItemSelectedListener會提供給我們被選中的MenuItem,這與Activity的onOptionsItemSelected非常類似。

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this); 

@Override 
public boolean onNavigationItemSelected(MenuItem item) { 
// Handle navigation view item clicks here. 
int id = item.getItemId(); 
if (id == R.id.nav_camera) {
 // Handle the camera action 
else if(id == R.id.nav_gallery) {

 } else if (id == R.id.nav_slideshow) {

 } else if (id == R.id.nav_manage) { 

} else if (id == R.id.nav_share) {

 } else if (id == R.id.nav_send) { 

}

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); 
 drawer.closeDrawer(GravityCompat.START); 
 return true; 
}

headerLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[email protected]" />

</LinearLayout>

二、FloatingActionButton

  • compile ‘com.android.support:design:23.2.1’*

    FloatingActionButton是繼承至ImageView,所以FloatingActionButton擁有ImageView的所有屬性。CoordinatorLayout可以用來配合FloatingActionButton浮動按鈕。

    FloatingActionButton

<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" />

其他相關屬性:

  • app:backgroundTint - 設置FAB的背景顏色。
  • app:rippleColor - 設置FAB點擊時的背景顏色。
  • app:borderWidth - 該屬性尤爲重要,如果不設置0dp,那麼在4.1的sdk上FAB會顯示爲正方形,而且在5.0以後的sdk沒有陰影效果。所以設置爲borderWidth=”0dp”。
  • app:pressedTranslationZ - 點擊時候FAB的陰影大小。
  • app:fabSize - 設置FAB的大小,該屬性有兩個值,分別爲normal和mini,對應的FAB大小分別爲56dp和40dp。
  • src - 設置FAB的圖標,Google建議符合Design設計的該圖標大小爲24dp。
  • app:layout_anchor - 設置FAB的錨點,即以哪個控件爲參照點設置位置。
  • app:layout_anchorGravity - 設置FAB相對錨點的位置,值有
    bottom、center、right、left、top等。

三、TextInputLayout

  • compile ‘com.android.support:design:23.2.1’

TextInputLayout是一個能夠把EditText包裹在當中的一個佈局,當輸入文字時,它可以把Hint文字飄到EditText的上方。

TextInputLayout

<android.support.design.widget.TextInputLayout 
    android:layout_width="fill_parent" 
    android:id="@+id/your_username_holder" 
    app:errorEnabled="true" 
    android:layout_height="wrap_content"> 
        <EditText android:id="@+id/edt_username" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:saveEnabled="false" 
        android:maxLength="48" 
        android:hint="請輸入用戶名"/>
</android.support.design.widget.TextInputLayout>


mEdtUsername.addTextChangedListener(new TextWatcher() { 
@Override public void beforeTextChanged(CharSequence 
charSequence, int i, int i1, int i2) { 

} 
//檢測錯誤輸入,當輸入錯誤時,hint會變成紅色並提醒 
@Override 
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
 //檢查實際是否匹配,由自己實現
 if (checkType(charSequence.toString())) { 

    mEdtUsernameHolder.setErrorEnabled(true);
     mEdtUsernameHolder.setError("輸入錯誤!"); 
    return; 
    } else { 
    mEdtUsernameHolder.setErrorEnabled(false); } } 
    @Override 
    public void afterTextChanged(Editable editable) { 
    } 
    });

四、Snackbar

  • compile ‘com.android.support:design:23.2.1’

  • Snackbar使用的時候需要一個控件容器用來容納Snackbar.官方推薦使用CoordinatorLayout這個另一個Android Support Design Library庫支持的控件容納。因爲使用這個控件,可以保證Snackbar可以讓用戶通過向右滑動退出。

Snackbar

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/andro
id" android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical">
     <Button
         android:onClick="createSnackbar" 
    android:text="@string/snackbar_test_button_text"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"/> 
    <android.support.design.widget.CoordinatorLayout 
        android:id="@+id/container" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true"/>
</RelativeLayout>



public class SnackbarTestActivity extends Activity { 

CoordinatorLayout container;  
@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_snackbar_test); 
    container = (CoordinatorLayout) 
    findViewById(R.id.container); 

}  

public void createSnackbar(View v) { 

Snackbar.make(container, "Replace with your own 
action", Snackbar.LENGTH_LONG).show(); 

}}

五、TabLayout

  • compile ‘com.android.support:design:23.2.1’

TabLayout主要可以和ViewPager結合使用,它就可以完成TabPageIndicator的效果,而且還是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。

TabLayout

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/andro
id"  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical">   
    <android.support.design.widget.TabLayout  
         android:id="@+id/tab_title"  
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:background="@color/titleBlue" 
         app:tabIndicatorColor="@color/white" 
         app:tabSelectedTextColor="@color/gray" 
         app:tabTextColor="@color/white"  /> 

     <android.support.v4.view.ViewPager  
        android:id="@+id/vp_pager"  
        android:layout_width="fill_parent"  
        android:layout_height="0dp"  
        android:layout_weight="1"  /> 
</LinearLayout> 
  • app:tabIndicatorColor 下方滾動的下劃線顏色
  • app:tabSelectedTextColortab 被選中後,文字的顏色
  • app:tabTextColor tab默認的文字顏色
mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設置tab模式,當前爲系統默認模式 
mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//添加tab選項卡 
mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1))); 
mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2))); 
mTabLayout.setupWithViewPager(mViewPager);//將TabLayout和ViewPager關聯起來。 
mTabLayout.setTabsFromPagerAdapter(mAdapter);//給Tabs設置適配器

六、AppBarLayout

  • compile ‘com.android.support:design:23.2.1’

一個ViewGroup,配合ToolBar與CollapsingToolbarLayout等使用。

AppBarLayout

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

AppBarLayout的簡單使用,具體使用要和CoordinatorLayout或者CollapsingToolbarLayout結合使用,這個後面會講到。

七、CoordinatorLayout

  • compile ‘com.android.support:design:23.2.1’

CoordinatorLayout使用新的思路通過協調調度子佈局的形式實現觸摸影響佈局的形式產生動畫效果。主要用於作爲頂層佈局和協調子佈局。

CoordinatorLayout與AppBarLayout

CoordinatorLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/andro
id" xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.tf.globalapplication.MainActivity"> 
    <android.support.design.widget.AppBarLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:theme="@style/AppTheme.AppBarOverlay"> 
        <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:background="?attr/colorPrimary" 
        app:popupTheme="@style/AppTheme.PopupOverlay" 
        app:layout_scrollFlags="scroll|enterAlways" /> 
        <android.support.design.widget.TabLayout
         android:id="@+id/tabs" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" /> 
    </android.support.design.widget.AppBarLayout> 
    <include layout="@layout/content_main" /> 

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 
xmlns:android="http://schemas.android.com/apk/res/andro
id" xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent"app:layout_behavior
="@string/appbar_scrolling_view_behavior" 
tools:context="com.tf.globalapplication.MainActivity" 
tools:showIn="@layout/app_bar_main"> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical">

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈" 
         android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈" 
         android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈" 
         android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent"
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 
        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈"
          android:gravity="center"/> 

</LinearLayout>
</android.support.v4.widget.NestedScrollView>

MainActivity.java

TabLayout tabs = (TabLayout) findViewById(R.id.tabs); 
tabs.addTab(tabs.newTab().setText("tab1")); 
tabs.addTab(tabs.newTab().setText("tab2")); 
tabs.addTab(tabs.newTab().setText("tab3"));
  • scroll: 所有想滾動出屏幕的view都需要設置這個flag, 沒有設置這個flag的view將被固定在屏幕頂部。例如,TabLayout 沒有設置這個值,將會停留在屏幕頂部。
  • enterAlways: 設置這個flag時,向下的滾動都會導致該view變爲可見,啓用快速“返回模式”。
  • enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時,你的視圖只能已最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。
  • exitUntilCollapsed: 滾動退出屏幕,最後摺疊在頂端。

CoordinatorLayout裏面,放一個帶有可滾動的View.如上的例子,放的是NestedScrollView,而NestedScrollView裏面是放多個TextView,是可以滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設置app:layout_behavior屬性。例如,示例中NestedScrollView設置了此屬性。

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

爲了使得Toolbar有滑動效果,必須做到如下三點:
1. CoordinatorLayout作爲佈局的父佈局容器。
2. 給需要滑動的組件設置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
3. 給滑動的組件設置app:layout_behavior屬性

AppBarLayout嵌套CollapsingToolbarLayout

CollapsingToolbarLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/andro
    id" xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.Actio
    nBar" 
    android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginStart="48dp"
    app:expandedTitleMarginEnd="64dp">

<ImageView android:id="@+id/backdrop" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:fitsSystemWindows="true"
    android:src="@drawable/header"
    app:layout_collapseMode="parallax" />
<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>
    <include layout="@layout/content_main" /> 
    <android.support.design.widget.FloatingActionButton 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|right|end" 
    android:src="@android:drawable/ic_dialog_email" 
    android:layout_margin="@dimen/fab_margin" 
    android:clickable="true"/>

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

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 
    xmlns:android="http://schemas.android.com/apk/res/andro
    id" xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.tf.globalapplication.MainActivity" 
    tools:showIn="@layout/app_bar_main"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈" 
         android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/>

         <TextView 
         android:layout_width="match_parent" 
         android:layout_height="100dp" 
         android:text="哈哈哈" 
         android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView android:layout_width="match_parent" 
        android:layout_height="100dp" 
        android:text="哈哈哈" 
        android:gravity="center"/> 

        <TextView 
        android:layout_width="match_parent" 
        android:layout_height="100dp"
         android:text="哈哈哈" 
         android:gravity="center"/> 
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

CollapsingToolbarLayout可實現Toolbar的摺疊效果。CollapsingToolbarLayout的子視圖類似於LinearLayout垂直方向排放的。CollapsingToolbarLayout 提供以下屬性和方法使用:

  • Collapsing title:ToolBar的標題,當CollapsingToolbarLayout全屏沒有摺疊時,title顯示的是大字體,在摺疊的過程中,title不斷變小到一定大小的效果。你可以調用setTitle(CharSequence)方法設置title。

  • Content scrim:ToolBar被摺疊到頂部固定時候的背景,你可以調用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。

  • Status bar scrim:狀態欄的背景,調用方法setStatusBarScrim(Drawable)。只能在Android5.0以上系統有效果。 - Parallax scrolling children:CollapsingToolbarLayout滑動時,子視圖的視覺差,可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。layout_collapseParallaxMultiplier值的範圍[0.0,1.0],值越大視察越大。

  • CollapseMode :子視圖的摺疊模式,在子視圖設置,有兩種。“pin”:固定模式,在摺疊的時候最後固定在頂端;“parallax”:視差模式,在摺疊的時候會有個視差摺疊的效果。我們可以在佈局中使用屬性app:layout_collapseMode=”parallax”來改變。

  • CoordinatorLayout 還提供了一個 layout_anchor 的屬性,連同 layout_anchorGravity一起,可以用來放置與其他視圖關聯在一起的懸浮視圖(如 FloatingActionButton),上面已經介紹過。

使用CollapsingToolbarLayout實現摺疊效果,需要注意:
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性
3. 滾動視圖設置layout_behavior屬性。

八、CoordinatorLayout.Behavior

  • compile ‘com.android.support:design:23.2.1’

CoordinatorLayout功能如此強大,而他的神奇之處在於Behavior對象,CoordinatorLayout自己並不控制View,所有的控制權都在Behavior。這些Behavior實現了複雜的控制功能。系統的Behavior畢竟有限,我們可以通過自定義的方式來實現自己的Behavior。

通過 CoordinatorLayout.Behavior(YourView.Behavior.class)來定義自己的Behavior,並在layout文件中設置app:layout_behavior=”com.example.app.YourView$Behavior” 來達到效果。自定義Behavior 需要重寫兩個方法:


public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

實現了點擊FloatingActionButton點擊旋轉90度,並適配Snackbar


public class RotateBehavior  extends CoordinatorLayout.Behavior<FloatingActionButton> {
    private static final String TAG = RotateBehavior.class.getSimpleName();

    public RotateBehavior() {
    }

    public RotateBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        return dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        float translationY = getFabTranslationYForSnackbar(parent, child);
        float percentComplete = -translationY / dependency.getHeight();
        child.setRotation(-90 * percentComplete);
        child.setTranslationY(translationY);
        return false;
    }

    private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                                                FloatingActionButton fab) {
        float minOffset = 0;
        final List<View> dependencies = parent.getDependencies(fab);
        for (int i = 0, z = dependencies.size(); i < z; i++) {
            final View view = dependencies.get(i);
            if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
                minOffset = Math.min(minOffset,
                        ViewCompat.getTranslationY(view) - view.getHeight());
            }
        }

        return minOffset;
    }
}

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/>
</android.support.design.widget.CoordinatorLayout>

到此,主要的相關控件已經介紹完了,但像BottomSheet、BottomSheetDialog等在support library 23以後添加的新控件以及v7、v4包中的新增的比較常用控件,留在下篇文章介紹總結。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章