CollapsingToolbarLayout 是 Android Design Support 库中的一个UI组件,用于实现可折叠的工具栏。它通常与 AppBarLayout 和 Toolbar 一起使用,提供了一个灵活的布局,可以在滚动时实现工具栏的展开和折叠效果。
xml:
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:contentScrim="#E65989"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/tupian"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="5000dp"
android:text="T"
android:textSize="300sp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Activity:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); // 启用左上角的返回键
// 设置标题
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setTitle("标题");
// 悬浮按钮
FloatingActionButton floatingButton = findViewById(R.id.floatingButton);
floatingButton.setOnClickListener(v ->
Toast.makeText(this, "点击了悬浮按钮", Toast.LENGTH_SHORT).show());
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
if (item.getItemId() == android.R.id.home) {
Toast.makeText(this, "点击了返回键", Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
}
总结来说,CollapsingToolbarLayout 是一个强大的UI组件,可以实现可折叠的工具栏效果。它提供了丰富的定制选项,使得开发人员可以根据需求创建吸引人且具有动态效果的界面。通过与 AppBarLayout 和 Toolbar 等组件的结合使用,CollapsingToolbarLayout 提供了一种简单而有效的方式来实现流畅的工具栏折叠体验。