先看效果图:
当界面开始滑动时,“用户名用户名”文字便会缩小折叠到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);
}
}