面对常用布局的小经验（二）-协议框

前言

今天我们来看看很常见的协议框布局，为了规避风险、蒙骗用户，产品经理说要加个协议框，UI设计MM给出了设计：

看起来挺简单，那就开工啦。

实现

恩，本人最喜欢的就是RelativeLayout，简洁高效，先试试看。

思路：协议框高度wrapcontent，三个控件使用layout_below排列。

<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:background="#CCCCCC">

    <RelativeLayout
        android:id="@+id/i_am_father"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#f7f7f7">
        
        <TextView
            android:id="@+id/i_am_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="@string/title" 
            android:textSize="18sp"/>
        
        <TextView
            android:id="@+id/i_am_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/i_am_title"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="10dp"
            android:text="@string/xxx_content" 
            android:textSize="14sp"/>
        
        <Button 
            android:id="@+id/i_am_ok"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/i_am_content"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="5dp"
            android:layout_centerHorizontal="true"
            android:text="I am ok" 
            android:textSize="14dp"
            android:background="#CCCCCC"/>
        
    </RelativeLayout>

</RelativeLayout>

run出来看看：

不错，作为立志服务全球的APP，切换到英文下试试看。

恩，英文果然啰嗦，高度自动撑大了，没有问题，信心满满交给测试MM了，坐等赞美吧。

问题

第二天测试MM说有问题，what，这么简单的东西，原来丧心病狂的MM将字体切换成了超大字体：

噢，按钮看不到了，国外老年用户再也无法使用我们的APP了。

尝试解决1

第一想法当然是加个scrollView,让整个布局可滚动，可产品说按钮要一直在底部可显示，中间内容可滚动，并且只有在内容将协议框撑大到超出页面时才需要滚动，像这样：

• 思考流
  scrollView高度不定死，需要随内容撑大，并且不能将按钮挤下去，那么需要先将按钮固定在底部，使用layout_matchParentBottom，scrollView高度使用wrap_content。

<ScrollView
            android:id="@+id/content_scoller"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_below="@id/i_am_title"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="15dp">
                <TextView
                    android:id="@+id/i_am_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="@string/xxx_content" 
                    android:textSize="14sp"/>
        </ScrollView>
        
        <Button 
            android:id="@+id/i_am_ok"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="5dp"
            android:layout_centerHorizontal="true"
            android:text="I am ok" 
            android:textSize="14dp"
            android:background="#CCCCCC"/>

试试看：

貌似可以，哈哈。
切回标准字体看看：

咦，内容少的时候协议框高度怎么没收缩呢。
原来，我们协议框的高度是wrap_content，当按钮align_parentBottom时，系统找不到基准高度去计算这个位置，所以系统将协议框的高度变为match_parent，这样就能找到基准高度去计算了。

解决

FrameLayout配合gravity属性也可以实现底部对齐，来试试吧，将根布局改为FrameLayout，将button的gravity属性设置为bottom，同时，scrollView设置marginBottom为按钮的高度，这样文本就不会被按钮挡住。

<FrameLayout
        android:id="@+id/i_am_frame"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical">
        <RelativeLayout
            android:id="@+id/i_am_father"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="#f7f7f7">
            
            <TextView
                android:id="@+id/i_am_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="@string/title" 
                android:textSize="18sp"/>
            
            <ScrollView
                android:id="@+id/content_scoller"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" 
                android:layout_below="@id/i_am_title"
                android:layout_marginTop="15dp"
                android:layout_marginBottom="55dp"
                >
                    <TextView
                        android:id="@+id/i_am_content"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="@string/xxx_content" 
                        android:textSize="14sp"/>
            </ScrollView>
        </RelativeLayout>
        
        <Button 
            android:id="@+id/i_am_ok"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="5dp"
            android:layout_centerHorizontal="true"
            android:text="I am ok" 
            android:textSize="14dp"
            android:background="#CCCCCC"/>
    </FrameLayout>

run起来看看：
（1）标准字体下

（2）超大字体下

这下算是ok了。

结语

布局虽小，恶心起来也还是要人命的啊，提醒各位看官，代码实现前还是要多考虑考虑可能遇到的场景哦～