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

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

图片1：起始页面 

图片2：B区域下滑，A区域不滑动 

图片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> 

新技术，新未来！欢迎大家关注 “1024工场”微信服务号 ，时刻关注我们的最新的技术讯息！ （甭客气！尽情的扫描或者长按！）