CollapsingToolbarLayout是一個(gè)作用于Toolbar上的布局长已，可以讓Toolbar的效果變得更加豐富：
但是CollapsingToolbarLayout是不能獨(dú)立存在的凰锡，它這能作為AppBarLayout的直接子布局來用，而AppBarLayout又必須是CoordinatorLayout的子布局祈噪。
這是一個(gè)基本可折疊標(biāo)題欄的布局，黑體加黑的是ID尚辑，ImageView就是標(biāo)題欄的上展示的圖片辑鲤。
按 Ctrl+C 復(fù)制代碼
<textarea style="margin: 0px; padding: 0px; width: 836px; height: 600px; font-family: "Courier New"; font-size: 12px; line-height: 1.5;"></textarea>
按 Ctrl+C 復(fù)制代碼
最外層的CoordinatorLayout沒有什么特殊的屬性，AppBarLayout同樣只是高度為250dp只是一個(gè)我覺得比較好的效果杠茬，
CollapsingToolbarLayout是這次的新布局月褥，其中重要的屬性有：
android:theme指定了主題，
app:contentScrim指定了趨于折疊狀態(tài)和折疊后的顏色瓢喉。
layout_scrollFlags指定的是滾動(dòng)的效果宁赤， scroll - 想滾動(dòng)就必須設(shè)置這個(gè)。enterAlways-向上滑動(dòng)的時(shí)候會(huì)折疊一直到消失栓票，如果再繼續(xù)向上滑動(dòng)也不會(huì)出現(xiàn)决左，一旦向下滑動(dòng)立即開始出現(xiàn)要結(jié)合scroll一起用。enterAlwaysCollapsed是enterAlways的補(bǔ)充走贪，向上滑動(dòng)的時(shí)候會(huì)折疊這個(gè)長(zhǎng)度會(huì)被記下來佛猛，然后繼續(xù)向上滑動(dòng)也不會(huì)出現(xiàn)，如果改為此刻再向下滑動(dòng)標(biāo)題欄不會(huì)出現(xiàn)坠狡，要一直滑到剛才記下的那個(gè)長(zhǎng)度才會(huì)出現(xiàn)挚躯。 exitUntilCollapsed向上滑動(dòng)的時(shí)候會(huì)折疊到一個(gè)最小高度，也就是通過minimum height 設(shè)置的最小高度后擦秽，就固定不動(dòng)了码荔，再把滑動(dòng)事件交給 scrollview 繼續(xù)滑動(dòng)漩勤，然后再向下滑的話一直到滑完標(biāo)題欄才會(huì)開始展開。
然后是標(biāo)題欄的圖片ImageView和標(biāo)題欄Toolbar缩搅，重要的是app:layout_collapseMode這個(gè)屬性設(shè)為pin時(shí)表示折疊的過程中位置保持不變越败，parallax表示折疊過程中位置會(huì)產(chǎn)生一定的錯(cuò)位偏移。
然后還要弄一個(gè)用于滑動(dòng)的正文硼瓣，CollapsingToolbarLayout和ScrollView一起使用會(huì)有滑動(dòng)bug究飞，注意要使用NestedScrollView來替代ScrollView。
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><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" android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout ...
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="15dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="35dp" app:cardCornerRadius="4dp">
<TextView android:id="@+id/overwatch_content_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout></pre>
[
](javascript:void(0); "復(fù)制代碼")
NestedScrollView和AppBarLayout是同平級(jí)的所以需要 app:layout_behavior指定布局行為堂鲤，指定為@string/appbar_scrolling_view_behavior將NestedScrollView放在下面不至于遮擋住標(biāo)題欄亿傅。
然后NestedScrollView和ScrollView只允許存在一個(gè)直接子布局，所以嵌套了一個(gè)LinearLayout瘟栖，然后里面是卡片式布局狮荔。
然后再額外加上一個(gè)懸浮按鈕爷耀，其實(shí)這里的這個(gè)懸浮按鈕我沒設(shè)置什么功能慧脱，因?yàn)槿绻O(shè)置在標(biāo)題欄上比較好看而已镜廉。
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><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" android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout ....
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView ...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/ic_comment" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout></pre>
[
](javascript:void(0); "復(fù)制代碼")
這個(gè)懸浮按鈕FloatingActionButton和NestedScrollView、AppBarLayout都是同級(jí)的寓涨，想要把它設(shè)置到標(biāo)題欄上需要先設(shè)置一個(gè)錨點(diǎn)app:layout_anchor這里設(shè)置在AppBar上面盯串，然后app:layout_anchorGravity="bottom|end"設(shè)置在右下角。
最后是java代碼戒良。
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 1 public class Main2Activity extends AppCompatActivity { 2
3 public static final String OVERWATCH_NAME = "overWatch_name";
4
5 public static final String OVERWATCH_IMAGE_ID = "overWatch_image_id";
6 @Override
7 protected void onCreate(Bundle savedInstanceState) { 8 super.onCreate(savedInstanceState);
9 setContentView(R.layout.activity_main2); 10
11 //獲取圖片的name和ID
12 Intent intent = getIntent(); 13 String overWatchName = intent.getStringExtra(OVERWATCH_NAME); 14 int overWatchId = intent.getIntExtra(OVERWATCH_IMAGE_ID, 0); 15
16 //標(biāo)題欄設(shè)定
17 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 18 CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collaping_toobar); 19 ImageView overWatchImageView = (ImageView) findViewById(R.id.overwatch_image_view); 20 Glide.with(Main2Activity.this).load(overWatchId).into(overWatchImageView); 21 setSupportActionBar(toolbar); 22
23 //正文設(shè)定
24 TextView overWatchTextView = (TextView) findViewById(R.id.overwatch_content_text); 25 collapsingToolbar.setTitle(overWatchName); 26 String overWatchContent = makeContentText(overWatchName); 27 overWatchTextView.setText(overWatchContent); 28
29 //讓返回圖標(biāo)顯示出來
30 ActionBar actionBar = getSupportActionBar(); 31 if(actionBar != null){ 32 actionBar.setDisplayHomeAsUpEnabled(true); 33 } 34 } 35
36 private String makeContentText(String overWatchName){ 37 StringBuilder ContentText = new StringBuilder(); 38 for(int i = 0; i < 500; i++){ 39 ContentText.append(overWatchName); 40 } 41 return ContentText.toString(); 42 } 43
44 public boolean onOptionsItemSelected(MenuItem item){ 45 switch (item.getItemId()){ 46 case android.R.id.home: 47 finish(); 48 return true; 49 } 50 return super.onOptionsItemSelected(item); 51 } 52 }</pre>
](javascript:void(0); "復(fù)制代碼")
正文我就把圖片的名字重復(fù)了五十遍体捏。。然后重要的是接收上一個(gè)活動(dòng)的數(shù)據(jù)糯崎，得知上個(gè)活動(dòng)點(diǎn)擊的是那一個(gè)圖片译打，使用了Intent，不過也不是太重點(diǎn)拇颅。。乔询。所以還需要在主活動(dòng)加上發(fā)送數(shù)據(jù)的代碼：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 1 public class OverWatchAdapter extends RecyclerView.Adapter<OverWatchAdapter.ViewHolder> { 2
3 ....
4 public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 5 if(mContext == null){
6 mContext = parent.getContext(); 7 }
8 View view = LayoutInflater.from(mContext).inflate(R.layout.overwatch_item,parent,false);
9 final ViewHolder holder = new ViewHolder(view); 10 holder.cardView.setOnClickListener(new View.OnClickListener() { 11 @Override 12 public void onClick(View view) { 13 int position = holder.getAdapterPosition(); 14 OverWatch overWatch = mOverWatch.get(position); 15 Intent intent = new Intent(mContext,Main2Activity.class); 16 intent.putExtra(Main2Activity.OVERWATCH_NAME, overWatch.getName()); 17 intent.putExtra(Main2Activity.OVERWATCH_IMAGE_ID,overWatch.getImageID()); 18 mContext.startActivity(intent); 19 } 20 }); 21 return holder; 22 } 23 .... 24 }</pre>
](javascript:void(0); "復(fù)制代碼")
因?yàn)橹骰顒?dòng)的圖片使用的是RecyclerView所以要識(shí)別點(diǎn)擊的是那張圖片需要的就是修改RecyclerView的適配器了代碼如上樟插。。竿刁。黄锤。
最后再加上一個(gè)使?fàn)顟B(tài)欄和標(biāo)題欄融合也就是狀態(tài)欄透明的效果
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><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" android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collaping_toobar" android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true">
<ImageView android:id="@+id/overwatch_image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" app:layout_collapseMode="parallax" android:fitsSystemWindows="true"/> ... </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout> ... </android.support.design.widget.CoordinatorLayout></pre>
[
](javascript:void(0); "復(fù)制代碼")
想要標(biāo)題欄的圖片和狀態(tài)欄融合就需要給圖片加上android:fitsSystemWindows="true"這個(gè)屬性值，然后它的父布局都要加上食拜。鸵熟。再然后還要把狀態(tài)欄的顏色設(shè)為透明，這個(gè)效果只能是API21以上负甸，也就是android5.0開始的流强，所以這是一個(gè)系統(tǒng)差異型的功能痹届。
需要在res目錄新建一個(gè)values-v21目錄，然后新建一個(gè)style.xml文件：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><resources>
<style name="OverWatchTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources></pre>
[
](javascript:void(0); "復(fù)制代碼")
這里設(shè)置了一個(gè)名為OverWatchTheme的主題打月，其parent主題是AppTheme队腐，然后將狀態(tài)欄的顏色設(shè)置為透明。
然后還要5.0以下的系統(tǒng)識(shí)別這個(gè)OverWatchTheme主題奏篙，所以在values目錄下的style.xml文件需要加上：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="OverWatchTheme" parent="AppTheme">
</style>
</resources></pre>
[
](javascript:void(0); "復(fù)制代碼")
倒數(shù)第二第三行的代碼柴淘，因?yàn)槭?.0以下的系統(tǒng)使用的所以空的就行單純繼承AppTheme就好了。
最后讓相應(yīng)的活動(dòng)使用這個(gè)主題在AndroidManifest中
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="xbt.exp19"> .... <activity android:name=".Main2Activity" android:theme="@style/OverWatchTheme"></activity>
</application>
</manifest></pre>
[
](javascript:void(0); "復(fù)制代碼")
最終效果：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word;">ImageView</pre>
