在协调器布局中折叠布局并设置最小高度后保留图像

Question

我在 collapseToolbarLayout 工作，在 appBar 的设计中，它应该是 appBar 底部锚点中的图像（大多数设计都放一个 floatingActionButton 。 . 这里我使用的是图像）我需要在向上滚动时部分折叠，但不是完全折叠。所以我得到了一些解决方案来设置最小高度

我尝试了一种解决方案及其工作，但是，当我完全向上滚动时，图像已被剪切并且工具栏消失，如何使图像保持原样而不被剪切，以防floatingActionButton 如果你理解我的意思，按钮就会消失，我不希望它消失或被剪切

查看此图片以了解发生了什么

我想要的是在这里保留这样的图像以及工具栏

布局如下

<?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_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/pink"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".MainActivity"
        android:paddingBottom="?attr/actionBarSize"
        tools:showIn="@layout/activity_main"
        >

        <RelativeLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_marginTop="80dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent">


            <TextView
                android:id="@+id/offerNameTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginBottom="20dp"
                android:letterSpacing="0.01"
                android:text="Get a Pizza Free"
                android:textColor="@color/colorPrimary"
                android:textSize="34sp"
                android:textStyle="bold"/>


            <TextView
                android:id="@+id/descTitTxt"
                style="@style/AppTheme"
                android:textColor="@color/colorPrimary"
                android:layout_below="@+id/offerNameTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Description"
                />


            <TextView android:id="@+id/offerDescTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:layout_below="@+id/descTitTxt"
                android:fontFamily="sans-serif"
                android:textStyle="normal"
                android:layout_marginTop="8dp"
                android:textColor="@color/colorPrimary"
                android:letterSpacing="0.03"
                android:lineSpacingExtra="12sp"
                android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Rutrum 
      placerat habitant in eget. Enim elementum in sed lorem nisi purus pharetra. Suscipit 
      pellentesque nibh interdum ultrices enim, amet libero gravida scelerisque Rutrum 
      placerat."
                />


            <View
                android:id="@+id/line"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:layout_marginTop="100dp"
                android:layout_below="@+id/offerDescTxt"
                android:background="@color/colorPrimary"
                android:alpha="0.4"/>

            <LinearLayout
                android:id="@+id/socialMediaLayout"
                android:layout_marginTop="40dp"
                android:layout_below="@+id/line"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center"
                android:padding="10dp">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:tint="@color/colorPrimary"
                    android:layout_marginEnd="40dp"
                    android:src="@drawable/ic_launcher_background"/>

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:tint="@color/colorPrimary"
                    android:layout_marginEnd="40dp"
                    android:src="@drawable/abc_vector_test"/>

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:tint="@color/colorPrimary"
                    android:layout_marginEnd="40dp"
                    android:src="@drawable/ic_launcher_background"/>

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:tint="@color/colorPrimary"
                    android:layout_marginEnd="40dp"
                    android:src="@drawable/ic_launcher_foreground"/>

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:tint="@color/colorPrimary"
                    android:src="@drawable/ic_launcher_foreground"/>



            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginTop="20dp"
                android:layout_below="@+id/socialMediaLayout"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:fontFamily="sans-serif-medium"
                    android:textStyle="normal"
                    android:textColor="@color/colorPrimary"
                    android:letterSpacing="0.01"
                    android:lineSpacingExtra="6sp"
                    android:text=" Contact"
                    />
            </LinearLayout>

        </RelativeLayout>

    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true">

        <om.metamorph.mycollapsingdemo.CustomCollapseLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:minHeight="100dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/expandedImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:background="@drawable/immmg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@color/colorPrimary"
                android:alpha="0.8"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center">

                    <TextView
                        android:id="@+id/TitleTxt"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:fontFamily="sans-serif-medium"
                        android:gravity="bottom|center"
                        android:text="Pizza Hut"
                        android:textColor="@color/colorAccent"
                        android:textSize="18sp"
                        android:textStyle="bold" />
                </RelativeLayout>

            </androidx.appcompat.widget.Toolbar>

        </om.metamorph.mycollapsingdemo.CustomCollapseLayout>
    </com.google.android.material.appbar.AppBarLayout>


    <ImageView
        android:id="@+id/fab"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|start"
        android:src="@drawable/img22" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这里是 MainActivity

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ImageView fab = (ImageView) findViewById(R.id.fab);

    fab.bringToFront();
    AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        boolean isShow = false;
        int scrollRange = -1;

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {


            /**
             * Collapsed
             */
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                fab.animate().scaleX((float)0.4).setDuration(3000);
                fab.animate().scaleY((float)0.4).setDuration(3000);
                fab.animate().alpha(1).setDuration(0);

                /**
                 * Expanded
                 */
            } else if (verticalOffset == 0) {
                fab.animate().scaleX((float)1).setDuration(100);
                fab.animate().scaleY((float)1).setDuration(100);
                fab.animate().alpha(1).setDuration(0);
                /**
                 * Somewhere in between
                 */
            } else {
                final int scrollRange = appBarLayout.getTotalScrollRange();
                float offsetFactor = (float) (-verticalOffset) / (float) scrollRange;
                float scaleFactor = 1F - offsetFactor * .5F;
                fab.animate().scaleX(scaleFactor);
                fab.animate().scaleY(scaleFactor);
            }
        }
    });

}
}

这是我用来将高度固定到我想要的高度的自定义折叠布局 class，

public class CustomCollapseLayout extends FrameLayout {
    private static final String TAG = "CollapsingImageLayout";

    private WindowInsetsCompat mLastInsets;

    private int mImageTopExpanded;


    private int mImageTopCollapsed;


    private OnOffsetChangedListener mOnOffsetChangedListener;

    public CustomCollapseLayout(Context context) {
        this(context, null);
    }

    public CustomCollapseLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomCollapseLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mImageTopCollapsed = getResources().getDimensionPixelOffset(R.dimen.image_top_margin_collapsed);


        ViewCompat.setOnApplyWindowInsetsListener(this,
                new androidx.core.view.OnApplyWindowInsetsListener() {
                    @Override
                    public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
                        return setWindowInsets(insets);
                    }
                });
    }


    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        // Add an OnOffsetChangedListener if possible
        final ViewParent parent = getParent();
        if (parent instanceof AppBarLayout) {
            if (mOnOffsetChangedListener == null) {
                mOnOffsetChangedListener = new OnOffsetChangedListener();
            }
            ((AppBarLayout) parent).addOnOffsetChangedListener(mOnOffsetChangedListener);
        }

        // We're attached, so lets request an inset dispatch
        ViewCompat.requestApplyInsets(this);
    }


    private WindowInsetsCompat setWindowInsets(WindowInsetsCompat insets) {
        if (mLastInsets != insets) {
            mLastInsets = insets;
            requestLayout();
        }
        return insets.consumeSystemWindowInsets();
    }

    class OnOffsetChangedListener implements AppBarLayout.OnOffsetChangedListener {

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {


        }
    }
}

请帮助我是 cllapsetoolbarlayout 的新手，如果有什么不清楚的地方请告诉我，在此先感谢

Answer 1

这里的 hack 是使 ImageView 在其他布局之上，使其更高 z-index

final ImageView fab = (ImageView) findViewById(R.id.fab);
ViewCompat.setTranslationZ(fab, 100);

在协调器布局中折叠布局并设置最小高度后保留图像

Keep the image after collapse the layout in coordinator layout and set min height

android

android-toolbar

android-collapsingtoolbarlayout

appbar

coordinator-layout