日积月累:布局横竖向滑动需求的实现

在工作过程当中,出现这样一个需求。要求屏幕中的内容分为两个区域,我称为A区域和B区域,要求B区域可以竖直和横向滑动,A区域能随着B区域横向滑动(但不能竖直滑动),并且A区域位于屏幕的底部,B区域位于A区域的上部。效果图如下 

Image

图片1:起始页面 

Image

图片2:B区域下滑,A区域不滑动 

Image

图片3:B区域横滑,A区域随之滑动 

根据需求,我们需要实现横向和竖向的滑动,不由的想起HorizontalScrollView和ScrollView两个对象;并且要求A区域位于屏幕的底部,B区域位于A区域的上部,所以我想使用RelativeLayout来实现。 

布局如下 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
ᅠ ᅠ android:layout_width="match_parent" 
ᅠ ᅠ android:layout_height="match_parent" 
ᅠ ᅠ android:paddingBottom="@dimen/activity_vertical_margin" 
ᅠ ᅠ android:paddingLeft="@dimen/activity_horizontal_margin" 
ᅠ ᅠ android:paddingRight="@dimen/activity_horizontal_margin" 
ᅠ ᅠ android:paddingTop="@dimen/activity_vertical_margin" 
ᅠ ᅠ tools:context=".MainActivity" > 
ᅠ ᅠ <HorizontalScrollView 
ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
        android:layout_height="match_parent" > 
        <!--注意一:HorizontalScrollView必须以布局作为子元素,由于我们需要控制两个区域的相对位置,所以我们选择RelativeLayout作为子元素--> 
ᅠ ᅠ ᅠ ᅠ <RelativeLayout 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
            android:layout_height="match_parent" > 
            <!--注意二:由于A区域,B区域相对布局的标准,由于布局的顺序解析过程,必须将A区域放置在B区域的上方--> 
            <!--A区域--> 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ <TextView 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:id="@+id/select_bar" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_height="wrap_content" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_alignParentBottom="true" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:background="#12010234" 
                android:text="A区域1A区域2A区域3... …A区域24" 
                android:textSize="50sp" /> 
            <!--注意三:由于A区域不能竖向滑动,则只放在HorizontalScrollView中,B区域能横向、竖向滑动,故包含在HorizontalScrollView和ScrollView中。--> 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ <ScrollView 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:id="@+id/ball_bar" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_height="wrap_content" 
                android:layout_above="@id/select_bar" > 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ <LinearLayout 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_height="wrap_content" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:background="#97687876" 
                    android:orientation="vertical" > 
                    <!--B区域--> 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ <TextView 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
                        android:layout_height="wrap_content" 
                        android:text="B区域1B区域2B区域3... … 区域10B" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:textSize="50sp" /> 
                       … … … …  
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ <TextView 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_width="match_parent" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:layout_height="wrap_content" 
                        android:text=B区域90B区域92B区域93... … 区域100B" 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ android:textSize="50sp" /> 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ </LinearLayout> 
ᅠ ᅠ ᅠ ᅠ ᅠ ᅠ </ScrollView> 
ᅠ ᅠ ᅠ ᅠ </RelativeLayout> 
ᅠ ᅠ </HorizontalScrollView> 
</RelativeLayout> 

你可能感兴趣的:(android,scrollview)