隐藏并显示片段中的布局会导致GridView闪烁

时间:2018-10-06 11:50:00

标签: android android-viewpager android-gridview android-collapsingtoolbarlayout flicker

在我的片段中,我正在使用一个折叠式工具栏,其中包含一个ViewPager和一个搜索框。在ViewPager下方有一个GridView。当用户向下滚动时,包含ViewPager和搜索框的工具栏将折叠。我遇到的问题是,当它折叠时,我想在折叠的工具栏下方显示搜索框。因此,我在折叠的工具栏下面创建了一个额外的布局,其中包含另一个搜索框。我使多余的布局相对于工具栏的折叠和展开是可见的和隐藏的。我的问题是当使多余的布局的可见性消失时,下面的GridView闪烁了,这会给用户带来糟糕的体验。我想要一个平滑的过渡而不会闪烁GridView。

我现在所做的如下:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:orientation="vertical"
    android:layout_marginBottom="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="200dp">
                    
                    <android.support.v4.view.ViewPager
                        android:id="@+id/view_pager"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:layout_gravity="top"
                        android:scaleType="centerCrop"
                        android:background="@drawable/loading_image"
                        android:fitsSystemWindows="true"
                        app:layout_collapseMode="pin" />
                    
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/user"
                        android:text=""
                        android:gravity="center"
                        android:layout_centerInParent="true"
                        android:textSize="16sp"
                        android:textColor="#ff0000"/>
                    
                    <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/transparent"
                        android:layout_below="@+id/user"
                        android:layout_marginLeft="15dp"
                        android:layout_marginRight="15dp">
                        
                        <EditText
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:hint="Search here"
                            android:padding="10dp"
                            android:id="@+id/srch"
                            android:textColor="#000"
                            android:maxLines="1"
                            android:background="@drawable/search_border_grey"/>
                        
                        <ImageButton
                            android:id="@+id/button1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:src="@drawable/search_24"
                            android:layout_centerVertical="true"
                            android:background="#fff"
                            android:layout_margin="5dp"
                            android:text="Button"/>
                    </RelativeLayout>
                    <LinearLayout
                        android:id="@+id/layoutDots"
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="10dp"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:orientation="horizontal"></LinearLayout>
                </RelativeLayout>
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_gravity="center"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <RelativeLayout
                    android:id="@+id/rl_srch2"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="?attr/actionBarSize"
                    android:background="@android:color/transparent"
                    android:layout_marginLeft="15dp"
                    android:gravity="center"
                    android:layout_marginBottom="5dp"
                    android:layout_marginRight="15dp">

                    <EditText
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="Search here"
                        android:padding="10dp"
                        android:id="@+id/srch2"
                        android:maxLines="1"
                        android:textColor="#000"
                        android:background="@drawable/search_border_grey"/>

                    <ImageButton
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:src="@drawable/search_24"
                        android:layout_centerVertical="true"
                        android:background="#fff"
                        android:layout_margin="5dp"
                        android:text="Button"/>

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

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:id="@+id/root_layout"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <GridView
            android:id="@+id/customgrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:paddingBottom="20dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="2"
            android:verticalSpacing="3dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

在我的片段中,我使用以下代码来隐藏和显示布局

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        boolean isShow = true;
        int scrollRange = -1;

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

                if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // Collapsed
                    if(is_visible_toolbar == false) {
                    toolbar.setVisibility(View.VISIBLE);
                    is_visible_toolbar = true;
                    toolbar.startAnimation(fadeIn);
                }
                } else if (verticalOffset == 0) {
                // Expanded
                    toolbar.startAnimation(fadeOut);
                    toolbar.setVisibility(View.GONE);
                    is_visible_toolbar = false;
                } else {
                // Somewhere in between
                    toolbar.setVisibility(View.GONE);
                    is_visible_toolbar = false;
                }
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {
                    collapsingToolbar.setTitle("");
                    isShow = true;
                } else if (isShow) {
                    collapsingToolbar.setTitle(" ");
                    isShow = false;
                }
    }
});

这是布局,有2个搜索框。首先是折叠式工具栏,其次是折叠式工具栏和gridView。

aa

如何避免GridView闪烁,或者是否有满足我要求的更好方法?感谢您的所有答复。

0 个答案:

没有答案