Instagram喜欢在自定义图库中滚动

Question

任何人都可以建议如何在我的机器人应用程序中实现以下内容？我创建了一个自定义图库,当选择图像时,我会像Instagram一样显示图像的预览.现在,当我蜷缩起来时,我需要大约20%的图像视图像这样坚持到顶部:

我现在正在使用,Observablegrid视图,它没有那么多用!

请提出任何想法.谢谢!

Answer 1

这是我使用相同的 Observablegridview 的答案，它在滚动网格时经过一些分析和修改后开始工作。

对于要显示的图像网格，请使用此ObservableGridView.java

这是xml布局

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mainFrame">

    <com.sampleapp.Observablescroll.ObservableGridView
        android:id="@+id/camera_gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:numColumns="4" />

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/gallery_lay"
            android:layout_width="wrap_content"
            android:layout_height="365dp"
            android:background="@color/black"
            android:orientation="vertical">

            <com.fenchtose.nocropper.CropperImageView
                android:id="@+id/gallery_click_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"
                app:grid_color="@color/action_bar_color" /> 

        </RelativeLayout>

        <View
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp" />

    </RelativeLayout>
</FrameLayout>

在您的 java 类中，实现ObservableScrollViewCallbacks

        mHeaderView = (RelativeLayout) rootview.findViewById(R.id.header);
        mToolbarView = rootview.findViewById(R.id.toolbar);
        camera_gridView = (ObservableGridView) rootview.findViewById(R.id.camera_gridView);


        LayoutInflater inflaters = LayoutInflater.from(getActivity());
        camera_gridView.addHeaderView(inflaters.inflate(R.layout.image_holder_view, camera_gridView, false)); 
// view that leaves 300dp space to display the selected image from the grid 
      camera_gridView.addHeaderView(inflaters.inflate(R.layout.sticky_tool_bar_view, camera_gridView, false)); 
// a sticky view with action bar's height, so that the grid doesn't scroll above this

        camera_gridView.setScrollViewCallbacks(this);


//overridden methods

   @Override
    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        if (dragging) {
            int toolbarHeight = mToolbarView.getHeight();
            //    int toolbarHeight = 300;
            if (camera_gridView.getCurrentScrollY() == 0) {
                showToolbar();

        }
        if (firstScroll) {

            float currentHeaderTranslationY = ViewHelper.getTranslationY(mHeaderView);
            if (-toolbarHeight < currentHeaderTranslationY) {
                mBaseTranslationY = scrollY;
            }
        }
        float headerTranslationY = ScrollUtils.getFloat(-(scrollY - mBaseTranslationY), -toolbarHeight, 0);
        ViewPropertyAnimator.animate(mHeaderView).cancel();
        ViewHelper.setTranslationY(mHeaderView, headerTranslationY);
    }
}

@Override
public void onDownMotionEvent() {

}

@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
    mBaseTranslationY = 0;

    if (scrollState == ScrollState.DOWN) {
        int toolbarHeight = mToolbarView.getHeight();
        if (camera_gridView.getCurrentScrollY() == 0) {
            showToolbar();

        }
        int scrollY = camera_gridView.getCurrentScrollY();
        if (toolbarHeight <= scrollY) {
            hideToolbar();

        } else {
            showToolbar();
        }

    } else if (scrollState == ScrollState.UP) {
        int toolbarHeight = mToolbarView.getHeight();
        int scrollY = camera_gridView.getCurrentScrollY();
        if (toolbarHeight <= scrollY) {
            System.out.println("++++upif" + scrollY);
            hideToolbar();
        } else {
            System.out.println("++++upelse" + scrollY);
            showToolbar();
        }
        if (camera_gridView.getCurrentScrollY() == 0) {
            showToolbar();
        }
    } else {
        if (!toolbarIsShown() && !toolbarIsHidden()) {
            showToolbar();
        }
    }
}

//method to show the toolbar
    private void showToolbar() {
        float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
        if (headerTranslationY != 0) {
            ViewPropertyAnimator.animate(mHeaderView).cancel();
            ViewPropertyAnimator.animate(mHeaderView).translationY(0).setDuration(200).start();
        }
    }

//method to hide the toolbar
    private void hideToolbar() {
        float headerTranslationY = ViewHelper.getTranslationY(mHeaderView);
        int toolbarHeight = mToolbarView.getHeight();
        if (headerTranslationY != -toolbarHeight) {
            ViewPropertyAnimator.animate(mHeaderView).cancel();
            ViewPropertyAnimator.animate(mHeaderView).translationY(-toolbarHeight).setDuration(200).start();
        }
    }

   private boolean toolbarIsShown() {
        return ViewHelper.getTranslationY(mHeaderView) == 0;
    }
private boolean toolbarIsHidden() {
    return ViewHelper.getTranslationY(mHeaderView) == -mToolbarView.getHeight();
}