現(xiàn)如今骇窍,折疊式布局在App中相當(dāng)常見,給人一種科技感,充滿良好的用戶體驗(yàn)枫吧。Coordinatorlayout+AppbarLayout+CollapsingToolbarLayout這三個(gè)臭皮匠聯(lián)合起來(lái)用千變?nèi)f化,啊宇色,我重來(lái)沒(méi)有見過(guò)如此超凡脫俗之效果九杂。
網(wǎng)上大多來(lái)不來(lái)就將這仨揉在一起,布局也是直接全部嵌套完成搬上來(lái)宣蠕,但是你真的理解它們之間的協(xié)作關(guān)系嗎例隆?相互聯(lián)動(dòng)的原理是什么呢?一個(gè)個(gè)控件都沒(méi)整明白寫出這個(gè)功能也沒(méi)有意義呀抢蚀。那我就一個(gè)一個(gè)拆開來(lái)講镀层,分別來(lái)個(gè)功能,再一個(gè)接一個(gè)拼接皿曲。接下來(lái)鹿响,讓我們一起走進(jìn)它們的內(nèi)心世界。
github代碼直通車: https://github.com/18380438200/CoordinatorlayoutFull
先上效果圖:
博客講解demo地址:https://github.com/18380438200/MDView
ToolBar(因?yàn)樯婕暗焦榷觯惨徊⒅v解)
從Android3.0后出現(xiàn)ActionBar惶我,但是這效果,誰(shuí)用誰(shuí)知道啊博投。顏色不好看不說(shuō)绸贡,布局也是無(wú)法訂制,都不如自定義ActionBar的好√拢可見我的另一篇自定義[Actionbar] http://www.reibang.com/p/43b51e1062f1捧挺。
使用方式:
1.首先在Activity主題里面將默認(rèn)Actionbar改為NoActionbar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
2.綁定toolbar ,setSupportActionBar(toolbar) 設(shè)置toolbar為標(biāo)題欄
3.設(shè)置常用屬性:
toolbar.setNavigationIcon(int resId);
toolbar.setLogo(int resId);
toolbar.setTitle("");
toolbar.setSubtitle("");
toolbar.setOnMenuItemClickListener(Toolbar.OnMenuItemClickListener listener);
4.引用菜單
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//引入options菜單
getMenuInflater().inflate(R.menu.menu,menu);
return true;
}
5.在menu文件夾中設(shè)置菜單
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/menu_1"
android:title="菜單1"
android:icon="@mipmap/make_music_voice_changer_female"
app:showAsAction="collapseActionView"/>
<item android:id="@+id/menu_2"
android:title="菜單2"
android:icon="@mipmap/make_music_voice_changer_female"
app:showAsAction="collapseActionView"/>
<item android:id="@+id/menu_3"
android:title="菜單3"
android:icon="@mipmap/make_music_voice_changer_female"
app:showAsAction="collapseActionView"/>
<item android:id="@+id/menu_4"
android:title="菜單4"
android:icon="@mipmap/make_music_voice_changer_female"
app:showAsAction="collapseActionView"/>
</menu>
或者直接在布局中添加子view使用
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="返回"
android:textSize="13sp"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_centerHorizontal="true"
android:layout_marginRight="6dp"
android:gravity="center"
android:padding="4dp"
android:textColor="#fff"
android:textSize="14sp"
android:text="菜單"/>
</android.support.v7.widget.Toolbar>
- ifRoom 會(huì)顯示在Item中尿瞭,空間不足會(huì)將后面item收起來(lái)闽烙,如果已經(jīng)有4個(gè)或者4個(gè)以上的Item時(shí)會(huì)隱藏在溢出列表中。
- never 永遠(yuǎn)不會(huì)顯示声搁。只會(huì)在藏出列表中顯示黑竞,而且只顯示標(biāo)題,所以在定義item的時(shí)候疏旨,最好把標(biāo)題都帶上很魂。
- always 無(wú)論是否超出空間,總會(huì)顯示檐涝。
- withText withText值示意Action bar要顯示文本標(biāo)題遏匆。Action bar會(huì)盡可能的顯示這個(gè)標(biāo)題,但是谁榜,如果圖標(biāo)有效并且受到Action bar空間的限制幅聘,文本標(biāo)題有可能顯示不全。
-
collapseActionView 聲明了這個(gè)操作視窗應(yīng)該被折疊到一個(gè)按鈕中窃植,當(dāng)用戶選擇這個(gè)按鈕時(shí)喊暖,這個(gè)操作視窗展開。否則撕瞧,這個(gè)操作視窗在默認(rèn)的情況下是可見的陵叽,并且即便在用于不適用的時(shí)候,也要占據(jù)操作欄的有效空間丛版。
例如效果:
ifroom的效果
collapseActionView的效果
Coordinatorlayout :
定義:is a super-powered Framelayout
是一個(gè)超級(jí)有力量的爸爸巩掺,官方給的定義就足以證明它的強(qiáng)大。
作用:協(xié)調(diào)子view的相互關(guān)系页畦,比如位置胖替、大小,就像有幾個(gè)調(diào)皮孩子的爸爸豫缨,要管管孩子的行為独令。
Behavior:
打開Coordinatorlayout看,Behavior是CoordinatorLayout的一個(gè)泛型抽象內(nèi)部類(這么長(zhǎng)累不累呀)好芭,所以給子view添加layout_behavior屬性是來(lái)自于它燃箭。
我寫了一個(gè)例子來(lái)理解CoordinatorLayout的工作原理:
<android.support.design.widget.CoordinatorLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinatorLayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.md.mdview.CoordinatorLayoutActivity">
<View
android:id="@+id/view_girl"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="200dp"
android:background="@mipmap/make_music_voice_changer_female" />
<View
android:id="@+id/view_uncle"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/make_music_voice_changer_uncle"
app:layout_behavior="com.example.md.mdview.RunBehavior"/>
</android.support.design.widget.CoordinatorLayout>
布局:兩個(gè)子view,操作viewgirl舍败,viewuncle也會(huì)相應(yīng)跟著走招狸,這就要寫一個(gè)聯(lián)動(dòng)關(guān)系敬拓,用自定義Behavior實(shí)現(xiàn)
public class RunBehavior extends CoordinatorLayout.Behavior<View>{
public RunBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
int top = dependency.getTop();
int left = dependency.getLeft();
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) child.getLayoutParams();
params.topMargin = top - 400;
params.leftMargin = left;
child.setLayoutParams(params);
return true;
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return true;
}
}
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) 方法:
根據(jù)條件過(guò)濾判斷返回值,返回true聯(lián)動(dòng)裙戏,返回flase不聯(lián)動(dòng)乘凸,即behavior不生效
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
當(dāng) dependency這個(gè)哥哥發(fā)生變化時(shí), 另一個(gè)child弟弟也要跟著去玩
一個(gè)view根據(jù)另一個(gè)view的變化而變化累榜, dependency被 child監(jiān)聽
功能是child的y值永遠(yuǎn)比dependency大400像素(廢話营勤,還用說(shuō)嗎)
app:layout_behavior="com.example.md.mdview.RunBehavior"
這里一定要寫上帶參數(shù)的構(gòu)造方法,因?yàn)閏oordinatorlayout是根據(jù)反射(所以是包名.類名路徑)獲取這個(gè)behavior壹罚,是從這個(gè)構(gòu)造方法獲得對(duì)象的葛作,否則會(huì)報(bào)
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
params.leftMargin = (int) (event.getX() - viewGirl.getMeasuredWidth() / 2);
params.topMargin = (int) (event.getY() - viewGirl.getMeasuredHeight() / 2);
viewGirl.setLayoutParams(params);
break;
case MotionEvent.ACTION_MOVE:
params.leftMargin = (int) (event.getX() - viewGirl.getMeasuredWidth() / 2);
params.topMargin = (int) (event.getY() - viewGirl.getMeasuredHeight() / 2);
viewGirl.setLayoutParams(params);
break;
}
return true;
}
最后是在界面監(jiān)聽手指的位置,給viewGirl設(shè)置手指的位置渔嚷,viewgril變化了,viewuncle也就隨之變化了稠曼。
好形病,在會(huì)了Coordinatorlayout的用法,最外層父布局有了霞幅,該添加兩個(gè)子view了漠吻。這里里面分別加入AppbarLayout和NestedScrollView作子view,給NestedScrollView加上behavior,就可以讓AppbarLayout跟隨NestedScrollView的Behavior聯(lián)動(dòng)司恳。Android已經(jīng)自帶了app:layout_behavior="@string/appbar_scrolling_view_behavior"途乃,只要滾動(dòng)發(fā)生,就會(huì)給自己的子view(if
instance of Appbarlayout)添加滾動(dòng)事件扔傅。不明白這倆控件緊接著看后面講解耍共。
當(dāng)前布局變?yōu)椋?/p>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0e932e"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#000"
android:padding="10dp"
android:text=""/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
NestedScrollView (viewgirl的角色)
NestedScrolling機(jī)制能夠讓父View和子View在滾動(dòng)式進(jìn)行配合,其基本流程如下:
當(dāng)子view開始滾動(dòng)之前猎塞,可以通知父View试读,讓其先于自己進(jìn)行滾動(dòng);
子View自己進(jìn)行滾動(dòng)荠耽;子view滾動(dòng)之后钩骇,還可以通知父view繼續(xù)滾動(dòng)。
而要實(shí)現(xiàn)這樣的交互機(jī)制铝量,首先父view要實(shí)現(xiàn)NestedScrollingParent接口倘屹,而子View需要實(shí)現(xiàn)NestedScrollingChild接口,在這套機(jī)制中子View是發(fā)起者慢叨,父view是接受回調(diào)并做出響應(yīng)的纽匙。
以下是幾個(gè)關(guān)鍵的類和接口
/**
* NestedScrollView is just like {@link android.widget.ScrollView}, but it supports acting
* as both a nested scrolling parent and child on both new and old versions of Android.
* Nested scrolling is enabled by default.
*/
public class NestedScrollView extends FrameLayout implements NestedScrollingParent,
NestedScrollingChild, ScrollingView {
static final int ANIMATED_SCROLL_GAP = 250;
static final float MAX_SCROLL_FACTOR = 0.5f;
private static final String TAG = "NestedScrollView";
/**
* Interface definition for a callback to be invoked when the scroll
* X or Y positions of a view change.
*
* <p>This version of the interface works on all versions of Android, back to API v4.</p>
*
* @see #setOnScrollChangeListener(OnScrollChangeListener)
*/
public interface OnScrollChangeListener {
/**
* Called when the scroll position of a view changes.
*
* @param v The view whose scroll position has changed.
* @param scrollX Current horizontal scroll origin.
* @param scrollY Current vertical scroll origin.
* @param oldScrollX Previous horizontal scroll origin.
* @param oldScrollY Previous vertical scroll origin.
*/
void onScrollChange(NestedScrollView v, int scrollX, int scrollY,
int oldScrollX, int oldScrollY);
}
private long mLastScroll;
private final Rect mTempRect = new Rect();
private OverScroller mScroller;
private EdgeEffect mEdgeGlowTop;
private EdgeEffect mEdgeGlowBottom;
······
//主要接口
NestedScrollingChild
NestedScrollingParent
//幫助類
NestedScrollingChildHelper
NestedScrollingParentHelper
AppbarLayout (viewuncle的角色)
繼承自Linearlayout,且方向是vertical拍谐,它可以讓你定制當(dāng)某個(gè)可滾動(dòng)View的滾動(dòng)手勢(shì)發(fā)生變化時(shí)哄辣,其內(nèi)部的子View實(shí)現(xiàn)何種動(dòng)作请梢。
AppBarLayout子View的動(dòng)作
內(nèi)部的子View通過(guò)在布局中加app:layout_scrollFlags設(shè)置執(zhí)行的動(dòng)作
·scroll :子view會(huì)跟隨滾動(dòng)事件一起滾動(dòng),相當(dāng)于添加到scrollview頭部
·enterAlways :只要屏幕下滑力穗,view就會(huì)立即拉下出來(lái)毅弧。
·snap :這個(gè)屬性讓控件變得有彈性,如果控件下拉了75%的高度,就會(huì)自動(dòng)展開当窗,如果只有25%顯示够坐,就會(huì)反彈回去關(guān)閉。(去試試支付寶首頁(yè)吧崖面,就是加了彈性這個(gè)效果)
·exitUntilCollapsed :當(dāng)scrollview滑到訂部元咙,再將子view折疊起來(lái)
·enterAlwaysCollapsed :當(dāng)scrollview滑到底,再將子view展開
可以給ViewPager設(shè)置行為巫员,就不需要使用NestedScrollView的滑動(dòng)庶香,實(shí)現(xiàn)與AppBarLayout聯(lián)動(dòng)。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
setExpande(boolean ) 設(shè)置展開和關(guān)閉狀態(tài)简识,默認(rèn)有開關(guān)動(dòng)畫
使用示例:
CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar赶掖,它繼承自FrameLayout。
CollapsingToolbarLayout屬性 含義
app:title 設(shè)置標(biāo)題
app:collapsedTitleGravity="center" 設(shè)置標(biāo)題位置
app:contentScrim 設(shè)置折疊時(shí)toolbar的顏色七扰,默認(rèn)是colorPrimary的色值
app:statusBarScrim 設(shè)置折疊時(shí)狀態(tài)欄的顏色 奢赂,默認(rèn)是colorPrimaryDark的色值
app:layout_collapseParallaxMultiplier 設(shè)置視差
app:layout_collapseMode="parallax" 視差模式,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果
app:layout_collapseMode="pin" 固定模式颈走,在折疊的時(shí)候最后固定在頂端
使用示例:讓圖片折疊膳灶,讓toolbar固定
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@mipmap/bg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:background="#000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
添加flags可以設(shè)置系統(tǒng)狀態(tài)欄為透明立由,如果最頂上是背景這樣用效果更佳
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
setContentView(R.layout.activity_main);
實(shí)現(xiàn)toolbar漸變顏色:AppbarLayout提供了滑動(dòng)偏移監(jiān)聽轧钓,偏移量除以appbar總高度可以得到當(dāng)前滑動(dòng)百分比。注意:這個(gè)verticalOffset是0或者負(fù)數(shù)锐膜,需要轉(zhuǎn)絕對(duì)值聋迎。
appbarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//verticalOffset始終為0以下的負(fù)數(shù)
float percent = (Math.abs(verticalOffset * 1.0f)/appBarLayout.getTotalScrollRange());
}
});
這Matial Design的設(shè)計(jì)真好,但是這名取得枣耀,一個(gè)個(gè)兒的也忒長(zhǎng)了吧霉晕,google什么時(shí)候把名字精簡(jiǎn)了啊捞奕?
好了牺堰,以后會(huì)持續(xù)更新的,喜歡我就點(diǎn)我吧颅围!