CollapsingToolbarLayout是一個作用於Toolbar上的布局，可以讓Toolbar的效果變得更加豐富：
但是CollapsingToolbarLayout是不能獨立存在的，它這能作為AppBarLayout的直接子布局來用，而AppBarLayout又必須是CoordinatorLayout的子布局。
這是一個基本可折疊標題欄的布局，黑體加黑的是ID，ImageView就是標題欄的上展示的圖片。
<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.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="250dp"> <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"> <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.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
最外層的CoordinatorLayout沒有什么特殊的屬性，AppBarLayout同樣只是高度為250dp只是一個我覺得比較好的效果，
CollapsingToolbarLayout是這次的新布局，其中重要的屬性有：
android:theme指定了主題，
app:contentScrim指定了趨於折疊狀態和折疊后的顏色。
layout_scrollFlags指定的是滾動的效果， scroll - 想滾動就必須設置這個。enterAlways-向上滑動的時候會折疊一直到消失，如果再繼續向上滑動也不會出現，一旦向下滑動立即開始出現要結合scroll一起用。enterAlwaysCollapsed是enterAlways的補充，向上滑動的時候會折疊這個長度會被記下來，然后繼續向上滑動也不會出現，如果改為此刻再向下滑動標題欄不會出現，要一直滑到剛才記下的那個長度才會出現。 exitUntilCollapsed向上滑動的時候會折疊到一個最小高度，也就是通過minimum height 設置的最小高度后，就固定不動了，再把滑動事件交給 scrollview 繼續滑動，然后再向下滑的話一直到滑完標題欄才會開始展開。
然后是標題欄的圖片ImageView和標題欄Toolbar，重要的是app:layout_collapseMode這個屬性設為pin時表示折疊的過程中位置保持不變，parallax表示折疊過程中位置會產生一定的錯位偏移。
然后還要弄一個用於滑動的正文，CollapsingToolbarLayout和ScrollView一起使用會有滑動bug，注意要使用NestedScrollView來替代ScrollView。
<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>
NestedScrollView和AppBarLayout是同平級的所以需要 app:layout_behavior指定布局行為，指定為@string/appbar_scrolling_view_behavior將NestedScrollView放在下面不至於遮擋住標題欄。
然后NestedScrollView和ScrollView只允許存在一個直接子布局，所以嵌套了一個LinearLayout，然后里面是卡片式布局。
然后再額外加上一個懸浮按鈕，其實這里的這個懸浮按鈕我沒設置什么功能，因為如果設置在標題欄上比較好看而已。
<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>
這個懸浮按鈕FloatingActionButton和NestedScrollView、AppBarLayout都是同級的，想要把它設置到標題欄上需要先設置一個錨點app:layout_anchor這里設置在AppBar上面，然后app:layout_anchorGravity="bottom|end"設置在右下角。
最后是java代碼。
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 //標題欄設定 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 //正文設定 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 //讓返回圖標顯示出來 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 }
正文我就把圖片的名字重復了五十遍。。然后重要的是接收上一個活動的數據，得知上個活動點擊的是那一個圖片，使用了Intent，不過也不是太重點。。。所以還需要在主活動加上發送數據的代碼：
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 }
因為主活動的圖片使用的是RecyclerView所以要識別點擊的是那張圖片需要的就是修改RecyclerView的適配器了代碼如上。。。。
最后再加上一個使狀態欄和標題欄融合也就是狀態欄透明的效果
<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>
想要標題欄的圖片和狀態欄融合就需要給圖片加上android:fitsSystemWindows="true"這個屬性值，然后它的父布局都要加上。。再然后還要把狀態欄的顏色設為透明，這個效果只能是API21以上，也就是android5.0開始的，所以這是一個系統差異型的功能。
需要在res目錄新建一個values-v21目錄，然后新建一個style.xml文件：
<resources> <style name="OverWatchTheme" parent="AppTheme"> <item name="android:statusBarColor">@android:color/transparent</item> </style> </resources>
這里設置了一個名為OverWatchTheme的主題，其parent主題是AppTheme，然后將狀態欄的顏色設置為透明。
然后還要5.0以下的系統識別這個OverWatchTheme主題，所以在values目錄下的style.xml文件需要加上：
<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>
倒數第二第三行的代碼，因為是5.0以下的系統使用的所以空的就行單純繼承AppTheme就好了。
最后讓相應的活動使用這個主題在AndroidManifest中
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="xbt.exp19"> .... <activity android:name=".Main2Activity" android:theme="@style/OverWatchTheme"></activity> </application> </manifest>
最終效果：
ImageView