Android视觉UI开发—01—标题栏吸顶

漂亮的事物经常能抓住人的眼球，使人乐意了解或使用它。一款Android应用，如果具有特征鲜明的主题风格和漂亮的交互界面，是容易收获一大批用户的。实现优秀交互风格，离不开对Android布局的透彻理解和View组件的灵活使用，其实布局（xxxLayout）是ViewGroup的子类，而ViewGroup又是View的子类，之所将布局单独列出来是为了突出其重要性。本篇的主要目的是实现一种标题栏吸顶效果。本方案使用到了RelativeLayout和LinearLayout两种布局，ScrollView、GridView和TextView三种View组件。该方案的关键点：监听ScrollView的滑动情况，来判断是否需要显示要吸顶的标题栏。

布局文件基本结构：

<RelativeLayout ...> 

    <!-- 1  最上的菜单栏-->
    <LinearLayout ...>
        <TextView .../>
    </LinearLayout>
    
    <!--  2  菜单栏下面整个是ScrollView-->
    <ScrollView
        ...
        android:id="@+id/scroll_view"
        android:background="@color/colorWhite"
        android:layout_marginTop="40dp">
        <LinearLayout ...>
            <LinearLayout
                android:layout_height="300dp"
                android:orientation="vertical"
                android:gravity="center"
                android:orientation="vertical"
                ... >
                <TextView
                    android:id="@+id/main_title"
                    android:layout_height="45dp" 
                    ... />
                <TextView
                    android:id="@+id/main_title_sub"
                    android:layout_width="match_parent" 
                    android:layout_height="25dp" 
                    ... />                                   
            </LinearLayout>
            <GridView
                android:id="@+id/grid_view"
                android:layout_height="1700dp"
                android:background="@color/colorWhite"
                ... />
        </LinearLayout>
    </ScrollView>
    
    <!--  3  隐藏的标题栏 用来吸顶效果-->
    <TextView
        android:id="@+id/main_title_hold_top"
        android:layout_height="45dp"
        android:layout_marginTop="40dp"
        android:background="@color/colorWhite"
        android:visibility="gone"
        .../>

</RelativeLayout>

为了更清晰展示布局文件层次结构，省去了部分属性。很明显布局文件根元素是RelativeLayout，其中包含了三个子元素：LinearLayout、ScrollView和TextView，其中TextView默认让它不可见，这个TextView就是用来显示吸顶效果的。这三个子元素中内容最多的就是ScrollView，它仅包含一个LinearLayout；也就是说ScrollView用LinearLayout来组织内部元素。这个LinearLayout里面包含了两个子元素LinearLayout和GridView。其中我们的标题就在LinearLayout中，main_title就是我们要吸顶的标题。
我们观察一下main_title，再看一下main_title_hold_top，发现二者的layout_height和background是一样的。main_title和main_title_sub在LinearLayout中间，所以main_title距离最上菜单栏(300 - 70) / 2 = 115dp。

topHoldText = findViewById(R.id.main_title_hold_top);
scrollView = findViewById(R.id.scroll_view);
scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                Log.d(TAG, "onScrollChange: scrollY == "+ scrollY);
                if( scrollY >= 345){
                    topHoldText.setVisibility(View.VISIBLE);
                }else{
                    topHoldText.setVisibility(View.GONE);
                }
            }
        });

在程序中监听scrollView的变化，当scrollY >= 345时，就让main_title_hold_top显示出来。为什么是345呢？是根据设备的屏幕参数确定的，345/3 = 115dp。这距离刚好和main_title一致。
当main_title_hold_top显示出来的时候，就会覆盖其后面的scrollView的内容。这样就实现了吸顶效果。

Android视觉UI开发—01—标题栏吸顶

猜你喜欢