android 收缩布局

Android收缩布局的使用

Android开发中，我们经常需要在布局中添加一些可收缩的元素，例如展开/折叠的菜单、可展开的卡片等。这些可收缩布局可以提供更好的用户体验和更高的可用性。本文将介绍Android中收缩布局的基本概念和使用方法，并通过代码示例进行演示。

收缩布局的基本概念

收缩布局是指用户可以手动展开或折叠的布局。当布局折叠时，其中的内容会被隐藏起来，只显示摘要信息或标题。当用户点击或操作某个触发器时，布局会展开，显示完整的内容。收缩布局的设计可以提高用户界面的简洁性和易用性。

在Android中，我们可以使用CollapsingToolbarLayout和NestedScrollView等组件来实现收缩布局。

使用CollapsingToolbarLayout和NestedScrollView实现收缩布局

CollapsingToolbarLayout是一个可以实现Toolbar折叠和展开效果的布局容器。它通常与AppBarLayout和Toolbar一起使用。NestedScrollView是一个可以实现嵌套滚动效果的滚动视图容器。

以下是一个简单的示例代码，演示了如何使用CollapsingToolbarLayout和NestedScrollView实现一个简单的收缩布局：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <!-- 收缩时显示的内容 -->

            <androidx.appcompat.widget.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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 完整内容 -->

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在上述代码中，我们使用CoordinatorLayout作为根布局容器，AppBarLayout作为CollapsingToolbarLayout的父布局。CollapsingToolbarLayout中的Toolbar会在折叠时固定在屏幕顶部，同时可以添加其他视图元素。

NestedScrollView作为CollapsingToolbarLayout之下的子布局容器，用于展示完整的内容，并在需要时进行垂直滚动。

使用代码示例演示收缩布局的效果

下面的示例代码演示了如何在收缩布局中添加图片和文本内容，并实现当用户滚动时，图片逐渐折叠隐藏，标题栏逐渐显示的效果。

class MainActivity : AppCompatActivity() {

    private lateinit var appBarLayout: AppBarLayout
    private lateinit var collapsingToolbarLayout: CollapsingToolbarLayout
    private lateinit var imageView: ImageView
    private lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        appBarLayout = findViewById(R.id.appBarLayout)
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout)
        imageView = findViewById(R.id.imageView)
        textView = findViewById(R.id.textView)

        setSupportActionBar(findViewById(R.id.toolbar))

        appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
            val maxScroll = appBarLayout.totalScrollRange
            val percentage = Math.abs(verticalOffset).toFloat() / maxScroll.toFloat()

            imageView.alpha = 1 - percentage
            textView.alpha = 1 - percentage

            val colorPrimary = ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)
            val colorTransparent = ContextCompat.getColor(this@MainActivity, android.R.color.transparent)