天天看點

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

在Android5.0之後,Android給我們提供了非常豐富關于UI設計的材料設計庫,其中就有非常實用的折疊式布局

常見問題:

1. ToolBar中自定義的title不能居中

設定CollapsingToolbarLayout的app:titleEnabled="false"即可

背景圖檔沒有完全沉浸在狀态欄裡邊

設定即可

常見模闆布局1:

效果圖:

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

布局代碼:

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:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="@dimen/detail_backdrop_height"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

android:fitsSystemWindows="true">

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

android:id="@+id/backdrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:fitsSystemWindows="true"

app:layout_collapseMode="parallax" />

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:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingTop="24dp">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="@dimen/card_margin">

style="@style/Widget.CardContent"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="卡片1"

android:textAppearance="@style/TextAppearance.AppCompat.Title" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/news_content" />

android:layout_height="wrap_content"

android:layout_width="wrap_content"

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end"

android:src="@drawable/ic_discuss"

android:layout_margin="@dimen/fab_margin"

android:clickable="true"/>

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

常見模闆布局2:

效果圖:

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

布局代碼:

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:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_scrollFlags="scroll|enterAlways|snap" />

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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="@drawable/ic_done" />

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

1.CoordinatorLayout

根布局必須使用CoordinatorLayout,即協調式布局,用來協調AppBarLayout和Scrollview之間的滾動關系

2.AppBarLayout

AppBarLayout必須依賴父控件CoordinatorLayout,AppBarLayout為ChildrenView提供了一個`app:layout_scrollFlags屬性來設定ScrollView滾動時Childview的滾動模式`,ScrollFlags共有五種常量值,對應的值為:scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed;

2.1 app:layout_scrollFlags="scroll" :往下滾ScrollView優先滾動

`

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

​`

2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滾ChildView優先滾動

`

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

​`

2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed":往下滾動ChildView優先滾動,且滾動到指定的最小高度,然後開始滾動ScrollView,直到ScrollView滾動完畢再開始滾動ChildView

`

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

​`

2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed":往上滾動ChildView優先滾動,且滾動到指定的最小高度,然後開始滾動ScrollView

`

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

​`

2.5 app:layout_scrollFlags="scroll|snap":往下滾ScrollView優先滾動,然後ChildView開始滾動,但是ChildView必須滾動到一定的比例才能繼續往下滾,否則ChildView滾動沒有到達一定比例,手松了之後就會回彈回去,類似ViewPager左滑右滑的那種效果

`

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

​`

3.CollapsingToolbarLayout

CollapsingToolbarLayout必須依賴父控件AppBarLayout,其中非常重要的幾個屬性如下

3.1 title

标題,布局展開時放大顯示在圖檔底部,布局折疊時縮小顯示在Toolbar左側。注意,沒有設定這個屬性時,預設使用Toolbar的标題;

3.2 statusBarScrim

頂部視圖折疊狀态下,狀态欄的遮罩色。通常這樣設定:app:statusBarScrim="?attr/colorPrimaryDark",即style樣式中定義的沉浸式狀态欄顔色。這個屬性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支援API19及以上版本,位于setContentView語句前面)一起使用,使頂部視圖展開時圖檔能夠延伸到狀态欄位置顯示,如效果圖中所示;

3.3 contentScrim

内容遮罩,上下滾動時圖檔上面顯示和隐藏的遮罩色,Toolbar位置的的背景色;通常這樣設定:app:contentScrim="?attr/colorPrimary",即顯示為Toolbar顔色,應用的主題色;

3.4 layout_collapseMode:ChildView使用

折疊模式,設定其他控件滾動時自身的互動行為,有兩種取值:parallax,折疊視差效果,比如上述效果圖中的圖檔;pin,固定别針效果,比如上圖中的Toolbar;

3.5 layout_collapseParallaxMultiplier:ChildView使用

不折疊視差系數,配合parallax模式使用,取值有點類似alpha(不透明度),在0.0 ~ 1.0之間,預設值為0.5。當設定為1.0,滾動清單時圖檔不會折疊移動;

4.Toolbar

4.1Toolbar初始設定

Toolbar toolbar = findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowTitleEnabled(false);

toolbar.setNavigationOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v) {

onBackPressed();

}

});

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

4.2 Activity樣式設定:

@mipmap/navbar_icon_return

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

#673AB7

#512DA8

#FF4081

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif

問題回報

在使用中有任何問題,歡迎回報給我,可以用以下聯系方式跟我交流

QQ:303704981

email:[email protected]

weibo:@geduo_83

關于作者

var geduo_83 = {

nickName : "geduo_83",

site : "http://www.weibo.com/geduo83"

}

android折疊布局,Android材料設計庫之折疊式布局你應該知道的一切

image.gif