android ——可折疊式標題欄

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代碼。

public class Main2Activity extends AppCompatActivity {

    public static final String OVERWATCH_NAME = "overWatch_name";

    public static final String OVERWATCH_IMAGE_ID = "overWatch_image_id";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //獲取圖片的name和ID
        Intent intent = getIntent();
        String overWatchName = intent.getStringExtra(OVERWATCH_NAME);
        int overWatchId = intent.getIntExtra(OVERWATCH_IMAGE_ID, 0);

        //標題欄設定
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collaping_toobar);
        ImageView overWatchImageView = (ImageView) findViewById(R.id.overwatch_image_view);
        Glide.with(Main2Activity.this).load(overWatchId).into(overWatchImageView);
        setSupportActionBar(toolbar);

        //正文設定
        TextView overWatchTextView = (TextView) findViewById(R.id.overwatch_content_text);
        collapsingToolbar.setTitle(overWatchName);
        String overWatchContent = makeContentText(overWatchName);
        overWatchTextView.setText(overWatchContent);

        //讓返回圖標顯示出來
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
    }

    private String  makeContentText(String overWatchName){
        StringBuilder ContentText = new StringBuilder();
        for(int i = 0; i < 500; i++){
            ContentText.append(overWatchName);
        }
        return ContentText.toString();
    }

    public boolean onOptionsItemSelected(MenuItem item){
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

正文我就把圖片的名字重復了五十遍。。然后重要的是接收上一個活動的數據，得知上個活動點擊的是那一個圖片，使用了Intent，不過也不是太重點。。。所以還需要在主活動加上發送數據的代碼：

public class OverWatchAdapter extends RecyclerView.Adapter<OverWatchAdapter.ViewHolder> {

....
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(mContext).inflate(R.layout.overwatch_item,parent,false);
        final ViewHolder holder = new ViewHolder(view);
        holder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = holder.getAdapterPosition();
                OverWatch overWatch = mOverWatch.get(position);
                Intent intent = new Intent(mContext,Main2Activity.class);
                intent.putExtra(Main2Activity.OVERWATCH_NAME, overWatch.getName());
                intent.putExtra(Main2Activity.OVERWATCH_IMAGE_ID,overWatch.getImageID());
                mContext.startActivity(intent);
            }
        });
        return  holder;
    }
....
}

因為主活動的圖片使用的是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