工具栏折叠时如何使用动画调整搜索视图宽度 [ANDROID]

Posted 2023-02-19

【中文标题】工具栏折叠时如何使用动画调整搜索视图宽度 [ANDROID]

【英文标题】：How Resize search view width with animation, when toolbar collapse [ADNROID]

【发布时间】：2022-01-24 02:38:05

【问题描述】：

大家好，我在折叠工具栏中有搜索视图，我想在工具栏折叠时调整 searchView 宽度，例如，当工具栏未折叠时，搜索视图宽度为“match_parent”，当用户向下滚动且工具栏折叠时，搜索视图应该宽度应该变成例如 200dp 。我怎样才能做到这一点？

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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_
    android:layout_
    android:padding="10dp"
    android:background="@color/black">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_
        android:layout_>

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_
            android:layout_
            android:fitsSystemWindows="true"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginStart="15dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <androidx.appcompat.widget.SearchView
                android:id="@+id/searchView"
                android:layout_
                android:layout_
                android:padding="10dp"
                android:background="@color/white"
                android:layout_gravity="bottom"
                android:clickable="false"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_>

                <TextView
                    android:layout_
                    android:layout_
                    android:layout_gravity="start"
                    android:text="TITLE"
                    android:textStyle="bold"
                    android:textSize="30sp"
                    app:layout_collapseMode="parallax"/>


            </androidx.appcompat.widget.Toolbar>

            <com.google.android.material.imageview.ShapeableImageView
                android:layout_
                android:layout_
                android:layout_gravity="right"
                android:paddingTop="5dp"
                android:paddingEnd="5dp"
                app:layout_collapseMode="pin"
                app:srcCompat="@drawable/ic_baseline_boy_24">
            </com.google.android.material.imageview.ShapeableImageView>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_
        android:layout_
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">


        <TextView
            android:id="@+id/text_home"
            android:layout_
            android:layout_
            android:text="dasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadasdasdsadas"
            android:textAlignment="center"
            android:textSize="20sp" />

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这是我的应用的 gif 图像 https://im5.ezgif.com/tmp/ezgif-5-7e95a858c4.gif

【参考方案1】：

您可以在工具栏折叠时以编程方式调整搜索视图的大小。

试试这个：

SearchView searchView = findViewById(R.id.search);
AppBarLayout appBarLayout = findViewById(R.id.app_bar);

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() 
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) 
        if (verticalOffset == 0)
        
           // Fully expanded
           searchView.getLayoutParams().width = CollapsingToolbarLayout.LayoutParams.MATCH_PARENT;

        
        else
        
           // Not fully expanded or Collapsed
           searchView.getLayoutParams().width = dpToPx(200);
        
    
);

这里我们使用一个函数将 dp 更改为 px，因为宽度以像素为单位。

dpToPx(int dp)：

public int dpToPx(int dp) 
    float density = this.getResources()
            .getDisplayMetrics()
            .density;
    return Math.round((float) dp * density);

【讨论】：

感谢您的回复，昨天我也做了同样的事情，它工作正常，但有点奇怪，因为没有动画，宽度大小变化非常直，您有什么解决方案吗？我需要添加一些动画