将 ImageView 锚定到折叠工具栏 [英] Anchor ImageView to Collapsing Toolbar

问题描述

当一个 FloatingActionButton 被锚定到一个 CollapsingToolbarLayout 时，它会在你向上滚动时消失，当你向下滚动到某个点后它会重新出现.我想知道你是否可以用任何类型的视图来做到这一点.在我的应用程序中，我试图将 ImageView 锚定到 CollapsingToolbarLayout，但它不会像 FloatingActionButton 一样消失.这是 XML 代码.

When a FloatingActionButton is anchored to a CollapsingToolbarLayout, it disappears when you scroll up, reappears when you scroll down after a certain point. I was wondering if you can do that with any type of view. In my app, I'm trying to anchor an ImageView to the CollapsingToolbarLayout but it won't disappear like the FloatingActionButton. Here's the XML code.

<android.support.design.widget.AppBarLayout
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="252dp"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/random"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"/>

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/scrollableview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.example.sudarshan.testapp.MLRoundedImageView
    android:layout_width="152dp"
    android:layout_height="152dp"
    app:layout_anchor="@+id/bar"
    app:layout_anchorGravity="bottom|center"
    android:id="@+id/circularImage"/>
</android.support.design.widget.CoordinatorLayout>
The ImageView gets anchored but it does not disappear and reappear like the FAB does.
解决方案
This behaviour of disappearing and appearing of View is only associated with FAB(FloatingActionButton).
You should have a look on the source code of class FloatingActionButton.
Here is the method in Behavior class , inner class of FloatingActionButtonwhich is responsible for the behaviour.
@Override
        public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child,
                View dependency) {
            if (dependency instanceof Snackbar.SnackbarLayout) {
                updateFabTranslationForSnackbar(parent, child, dependency);
            } else if (dependency instanceof AppBarLayout) {
                // If we're depending on an AppBarLayout we will show/hide it automatically
                // if the FAB is anchored to the AppBarLayout
                updateFabVisibility(parent, (AppBarLayout) dependency, child);
            }
            return false;
        }
Edit

You can extend the class FloatingActionButton to achieve what I think you need.

I have extended as follows-
/**
 * Sked Series, All rights Reserved
 * Created by Sanjeet on 06-Jan-16.
 */
public class FloatingActionImageView extends FloatingActionButton {
    public FloatingActionImageView(Context context) {
        super(context);
    }

    public FloatingActionImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sBmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sBmp = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth() / factor), (int) (bmp.getHeight() / factor), false);
        } else {
            sBmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius + 5, radius + 5);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2,
                radius / 2, radius / 2, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sBmp, rect, rect, paint);

        return output;
    }

    @Override
    protected void onDraw(@NonNull Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = null;
        if (b != null) {
            bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
        } else {
            BitmapDrawable bitmapDrawable = null;
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                bitmapDrawable = ((BitmapDrawable) getResources().getDrawable(com.sked.dd.R.drawable.ic_menu_gallery, null));
            } else {
                bitmapDrawable = ((BitmapDrawable) getResources().getDrawable(com.sked.dd.R.drawable.ic_menu_gallery));
            }
            if (bitmapDrawable != null) {
                bitmap = bitmapDrawable.getBitmap();
            }
        }

        int w = getWidth();
        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);


    }
}
And here is the output -





                        
这篇关于将 ImageView 锚定到折叠工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！