CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout實現摺疊式ToolBar
阿新 • • 發佈:2018-12-12
先看效果圖:
當介面開始滑動時,“使用者名稱使用者名稱”文字便會縮小摺疊到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); } }