面对常用布局的小经验(二)-协议框

发布时间:2019-06-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了面对常用布局的小经验(二)-协议框脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

clipboard.png

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

实现

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

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

<RelativeLayout >"http://schemas.andROId.COM/apk/res/android"
    >"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出来看看:

clipboard.png

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

@H_126_201@面对常用布局的小经验(二)-协议框

恩,英文果然啰嗦,高度自动撑大了,没有问题,信心满满交给测试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了。

结语

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

脚本宝典总结

以上是脚本宝典为你收集整理的面对常用布局的小经验(二)-协议框全部内容,希望文章能够帮你解决面对常用布局的小经验(二)-协议框所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。