CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现折叠式ToolBar

先看效果图:
在这里插入图片描述android

当界面开始滑动时,“用户名用户名”文字便会缩小折叠到ToolBar上。
要实现这个效果,须要用到如下几个控件:CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout+Toolbar+RecyclerViewweb

布局文件代码以下:

<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);

    }
}