如何根据滚动方向折叠/展开视图？

Question

我有一个View和一个RecyclerView,它位于LinearLayout中.我想要实现的是这样的:

https://material.google.com/patterns/scrolling-techniques.html#scrolling-techniques-behavior

基本上当我向上滚动RecyclerView时,View会折叠.如果我向下滚动RecyclerView,它会扩展.

我尝试了各种方法,但如果手指在滚动位置周围抖动,动画会断断续续.如果手指在一个方向上进行有意的滚动运动,它只会动画很好.我该怎么做呢？

Answer 1

您必须将 Coordinator Layout 与 CollapsingToolbarLayout 一起使用

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:stateListAnimator="@animator/appbar_always_elevated" //I put this here because I want to have shadow when is open, but you have to create the xml file.
    android:background="@color/WHITE">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
        app:expandedTitleMarginStart="72dp"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"> //HERE you should take a look what you want your collapse bar do.

        <Here you put the content for you collapse bar, like a ImageView>

        <android.support.v7.widget.Toolbar //This is the size of your fixed bar when you collapse, even here you can put a back button, for example
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/main_home_list_swipe"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_home_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout >

Obs：如果你把一个 xml 文件放在注释中会出错。正在求婚，所以你会记得阅读哈哈哈

Answer 2

试试这个：- 我也想在自定义视图上使用这种动画，我已经通过这种方式实现了。

public class TestActivity extends AppCompatActivity {
    private static final int HIDE_THRESHOLD = 20;
    //this is you custom layout it is any thing.
    LinearLayout customLayout;
    private int scrolledDistance = 0;
    private boolean controlsVisible = true;
    private RecyclerView recyclerView;

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

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                scrolledDistance = dy;
                if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
                    hideViews();
                    controlsVisible = false;
                } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
                    showViews();
                    controlsVisible = true;
                }
            }
        });
    }

    private void hideViews() {
        customLayout.animate().translationY(-customLayout.getHeight()).setInterpolator(new AccelerateInterpolator(2));
    }

    private void showViews() {
        customLayout.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
    }
}

编辑 - 1 用于ScrollView尝试此侦听器

scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
                    hideViews();
                    controlsVisible = false;
                    scrolledDistance = 0;
                } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
                    showViews();
                    controlsVisible = true;
                    scrolledDistance = 0;
                }
            }
        });

希望也能帮到你...

Answer 3

您需要使用CoordinatorLayout来实现您想要的。您可以在本教程中找到所有需要的信息。