1. 程式人生 > >CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout實現摺疊式ToolBar

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout實現摺疊式ToolBar

先看效果圖:
在這裡插入圖片描述

當介面開始滑動時,“使用者名稱使用者名稱”文字便會縮小摺疊到ToolBar上。
要實現這個效果,需要用到以下幾個控制元件:CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout+Toolbar+RecyclerView

佈局檔案程式碼如下:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PersonalHomepageActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@color/white">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/white"
            app:expandedTitleGravity="bottom"
            app:expandedTitleMarginStart="35dp"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleTextStyle"
            app:expandedTitleTextAppearance="@style/ExpandedTitleTextStyle"
            android:id="@+id/collapsing_toolbar_layout"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="246dp">

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/city6"
                    app:layout_collapseMode="parallax" />

                <com.mikhaellopez.circularimageview.CircularImageView
                    android:id="@+id/circularImageView4"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_marginStart="28dp"
                    android:layout_marginTop="108dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/city4"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="70dp"
                    android:layout_height="30dp"
                    android:layout_marginBottom="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginTop="8dp"
                    android:background="@drawable/button_shape"
                    android:text="關注"
                    android:textColor="#000"
                    android:textSize="10sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/imageView" />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#a3a1a1"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toStartOf="parent" />

                <TextView
                    android:id="@+id/textView11"
                    android:layout_width="60dp"
                    android:layout_height="20dp"
                    android:layout_marginBottom="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:gravity="center"
                    android:maxLines="1"
                    android:text="粉絲:111"
                    android:textSize="10sp"
                    app:layout_constraintBottom_toBottomOf="@+id/circularImageView4"
                    app:layout_constraintStart_toEndOf="@+id/circularImageView4"
                    app:layout_constraintTop_toTopOf="@+id/circularImageView4"
                    app:layout_constraintVertical_bias="1.0" />

                <ImageView
                    android:id="@+id/imageView10"
                    android:layout_width="10dp"
                    android:layout_height="20dp"

                    android:layout_marginBottom="8dp"
                    app:layout_constraintBottom_toBottomOf="@+id/textView11"
                    app:layout_constraintStart_toEndOf="@+id/textView11"
                    app:layout_constraintTop_toTopOf="@+id/textView11"
                    app:layout_constraintVertical_bias="0.0"
                    app:srcCompat="@drawable/shugang" />

                <TextView
                    android:id="@+id/textView12"
                    android:layout_width="60dp"
                    android:layout_height="20dp"
                    android:layout_marginTop="8dp"
                    android:gravity="center"
                    android:maxLines="1"
                    android:text="關注:99999"
                    android:textSize="10sp"
                    app:layout_constraintBottom_toBottomOf="@+id/imageView10"
                    app:layout_constraintStart_toEndOf="@+id/imageView10"
                    app:layout_constraintTop_toTopOf="@+id/imageView10"
                    app:layout_constraintVertical_bias="1.0" />
                    
            </android.support.constraint.ConstraintLayout>
            
            <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.v7.widget.Toolbar>
            
        </android.support.design.widget.CollapsingToolbarLayout>
        
    </android.support.design.widget.AppBarLayout>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycleview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >
        </android.support.v7.widget.RecyclerView>

</android.support.design.widget.CoordinatorLayout>

Java程式碼:

public class PersonalHomepageActivity extends AppCompatActivity {

    private RecyclerView recycleview;
    private Toolbar toolbar;
    private ImageView imageView;
    private CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_personal_homepage);


        toolbar = findViewById(R.id.toolbar);
        collapsingToolbarLayout  = findViewById(R.id.collapsing_toolbar_layout);
        recycleview = findViewById(R.id.recycleview);
        imageView = findViewById(R.id.imageView);

        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);  //在toolbar左側新增一個預設的返回圖示
        getSupportActionBar().setHomeButtonEnabled(true);   //設定返回鍵可用

        collapsingToolbarLayout.setTitle("使用者名稱使用者名稱");		//設定toolbar文字
        collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLACK);		//設定摺疊後的文字顏色
        collapsingToolbarLayout.setExpandedTitleColor(Color.BLACK);			//設定未摺疊的文字顏色

        recycleview.setLayoutManager(new LinearLayoutManager(this));
        recycleview.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));  //新增預設的分割線
        mRecycleViewAdapter adapter = new mRecycleViewAdapter(this);
        recycleview.setAdapter(adapter);
   	 }
    
    //返回鍵監聽
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home){
            finish();
        }
        return super.onOptionsItemSelected(item);

    }
}