什么是 CoordinatorLayout
CoordinatorLayout,是繼承自 FrameLayout 偿衰。該布局非常好用,能夠協(xié)調(diào)子元素之間的依賴(lài)關(guān)系缤言。CoordinatorLayout通過(guò)協(xié)調(diào)調(diào)度子布局的形式實(shí)現(xiàn)觸摸影響布局的形式產(chǎn)生動(dòng)畫(huà)效果视事。常常與CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout跌穗、NestedScrollView虏辫、Toolbar砌庄。這幾個(gè)控件相互配合,可以寫(xiě)出一個(gè)類(lèi)似上面效果圖不錯(cuò)的頁(yè)面出來(lái)娄昆。
這邊附上官網(wǎng)的介紹鏈接稿黄,有興趣看英文文檔的強(qiáng)烈推薦:
http://android-developers.blogspot.com/2015/05/android-design-support-library.html
實(shí)現(xiàn)的核心代碼
main_activity.xml 代碼如下:
<?xml version="1.0" encoding="utf-8"?><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">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:focusable="true"
android:focusableInTouchMode="true" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#30469b"
app:expandedTitleMarginBottom="160dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/iv_img"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:src="@drawable/aa"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="22dp"
android:layout_marginLeft="38dp"
android:layout_marginRight="34dp"
android:textColor="@android:color/black"
android:textSize="16sp"
android:text="Android是一種基于Linux的自由及開(kāi)放源代碼的操作系統(tǒng),主要使用于移動(dòng)設(shè)備壳贪,如智能手機(jī)和平板電腦,由Google公司和開(kāi)放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開(kāi)發(fā)"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
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:text="@string/content"
android:lineSpacingExtra="8dp"
android:textSize="20sp" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
mainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Android 概要簡(jiǎn)述");
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.back);
}
}
常用屬性講解
看到上面核心代碼,是不是覺(jué)得使用起來(lái)很簡(jiǎn)單留潦,其實(shí)關(guān)鍵代碼就是一個(gè)布局辣往。外層是CoordinatorLayout 包裹,因?yàn)镃oordinatorLayout前面說(shuō)了站削,它是繼承自五大布局中的 FrameLayout,所以用法與之類(lèi)似菩鲜。
這個(gè)動(dòng)畫(huà)效果最重要重點(diǎn)使用了CollapsingToolbarLayout可實(shí)現(xiàn)Toolbar的折疊效果惦积。
有幾個(gè)重要的屬性需要重點(diǎn)介紹下:1、app:contentScrim="#30469b"
設(shè)置當(dāng)完全CollapsingToolbarLayout收縮后ToolBar的背景顏色馅笙。2厉亏、app:layout_scrollFlags="scroll|exitUntilCollapsed"
當(dāng)用戶(hù)向上拉時(shí)收縮時(shí),可以固定Toolbar一直在上面皿淋。3恬试、app:expandedTitleMarginStart="48dp"
可以設(shè)置擴(kuò)張時(shí)候標(biāo)題向左填充的距離。4哑舒、app:layout_collapseParallaxMultiplier="0.5"
CollapsingToolbarLayout滑動(dòng)時(shí)洗鸵,子視圖的視覺(jué)差仗嗦,可以通過(guò)這個(gè)屬性來(lái)改變。值的范圍[0.0,1.0]火邓,值越大視察越大德撬。5、app:layout_collapseMode=”parallax”
app:layout_collapseMode="pin"
子視圖的折疊模式鸣驱,有兩種蝠咆,經(jīng)常使用:
pin:設(shè)置為這個(gè)模式時(shí)北滥,當(dāng)CollapsingToolbarLayout完全收縮后再芋,Toolbar還可以保留在屏幕上坚冀,在折疊的時(shí)候最后固定在頂端;
parallax:視差模式记某,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果液南。
簡(jiǎn)單介紹CoordinatorLayout的用法,沒(méi)有深入介紹滑凉,大家如果需要深入了解這個(gè)控件的使用,在這里推薦一篇我認(rèn)為寫(xiě)的好的博客給大家深入學(xué)習(xí)咒钟。
鏈接如下:http://blog.csdn.net/xyz_lmn/article/details/48055919