博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android开发实践:布局的平分
阅读量:6836 次
发布时间:2019-06-26

本文共 3735 字,大约阅读时间需要 12 分钟。

从一个简单的任务入手,“如何在水平方向上一左一右均匀地放置两个Button”,有很多种方式可以实现这个功能,在此做一个简单的总结,顺便深入理解下有关 gravity, layout_weight 等相关概念的原理和应用。


一、效果图


二、思考 RelativeLayout 和 LinearLayout 中分别如何左右放置button


(1) 在RelativeLayout中放置


由于 RelativeLayout 内部的子控件都可以指定相对位置,因此很容易实现左右放置两个Button的任务,如下所示:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<
RelativeLayout
    
android:layout_width
=
"match_parent"
    
android:layout_height
=
"wrap_content"
   
android:orientation
=
"horizontal"
>
   
    
<
Button
       
android:layout_width
=
"wrap_content"
       
android:layout_height
=
"wrap_content"
       
android:text
=
"Left Button"
        
android:layout_alignParentLeft
=
"true"
/>
   
    <
Button
       
android:layout_width
=
"wrap_content"
        
android:layout_height
=
"wrap_content"
        
android:text
=
"Right Button"
        
android:layout_alignParentRight
=
"true"
/>
   
</
RelativeLayout
>

效果如图所示:


(2) 在LinearLayout中放置

由于LinearLayout是顺序排放所有的控件,如果希望两个button分开地位于一左一右,则必须在两个Button之间再加一个layout_weight为1.0的隐形view才能实现。示例如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<
LinearLayout
    
android:layout_width
=
"match_parent"
    
android:layout_height
=
"wrap_content"
    
android:layout_margin
=
"10dp"
    
android:orientation
=
"horizontal"
>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    
<
Button
        
android:layout_width
=
"wrap_content"
        
android:layout_height
=
"wrap_content"
        
android:text
=
"Left Button"
/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    
<
View
        
android:layout_width
=
"0dp"
        
android:layout_weight
=
"1.0"
        
android:layout_height
=
"0dp"
/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    
<
Button
        
android:layout_width
=
"wrap_content"
        
android:layout_height
=
"wrap_content"
        
android:text
=
"Right Button"
/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
</
LinearLayout
>


效果如图所示:


三、 在水平方向“均分”整个Layout


其实,对于LinearLayout而言,最简单地平分方式就是将子控件的layout_width属性值设置为0,同时layout_weight属性设置为1.0这样,所有的子控件就会自动均分整个LinearLayout ,例如:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<
LinearLayout
    
android:layout_width
=
"match_parent"
   
android:layout_height
=
"wrap_content"
   
android:layout_margin
=
"10dp"
   
android:orientation
=
"horizontal"
>
   
   <
Button
       
android:layout_width
=
"0dp"
       
android:layout_height
=
"wrap_content"
       
android:layout_weight
=
"1.0"
       
android:text
=
"Left Button"
/>
   
    
<
Button
       
android:layout_width
=
"0dp"
       
android:layout_height
=
"wrap_content"
       
android:layout_weight
=
"1.0"     
        
android:text
=
"Right"
/>
   
</
LinearLayout
>


效果如图:

由图中效果可以看到,两个Button很好地一左一右平分了整个LinearLayout,但是由于Button的layout_width设置的是0dp,通过layout_weight来决定长度,因此Button都被横向拉长了,如果希望Button的layout_width设置为wrap_content,那该如何实现均分呢?其实,可以通过在Button外再包围一层LinearLayout来实现,示例如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<
LinearLayout
    
android:layout_width
=
"match_parent"
    
android:layout_height
=
"wrap_content"
    
android:layout_margin
=
"10dp"
    
android:orientation
=
"horizontal"
>   
                                                                                                                                                                                                                                                                                                                                   
    
<
LinearLayout
        
android:layout_width
=
"0dp"
        
android:layout_height
=
"wrap_content"
        
android:layout_weight
=
"1.0"
        
android:orientation
=
"horizontal"
>       
                                                                                                                                                                                                                                                                                                                                   
        
<
Button
        
android:layout_width
=
"wrap_content"
            
android:layout_height
=
"wrap_content"       
            
android:text
=
"Left Button"
            
android:layout_gravity
=
"center"
/>
    
</
LinearLayout
>
                                                                                                                                                                                                                                                                                                                                   
    
<
LinearLayout
        
android:layout_width
=
"0dp"
        
android:layout_height
=
"wrap_content"
        
android:layout_weight
=
"1.0"
        
android:orientation
=
"horizontal"
        
android:gravity
=
"center_horizontal"
>
                                                                                                                                                                                                                                                                                                                                   
        
<
Button
        
android:layout_width
=
"wrap_content"
            
android:layout_height
=
"wrap_content"
            
android:text
=
"Right Button"
/>
    
</
LinearLayout
>
</
LinearLayout
>


这样地话,由两个Button外围的LinearLayout平分了整个水平的layout,两个button的大小采用wrap_content,也不会被拉伸,并且通过外围的LinearLayout的android:gravity属性实现了居中。


这里注意Button外围的LinearLayout的android:gravity属性,很关键,该属性决定其子控件在该控件中的位置。所以Button外围的LinearLayout设置了android:gravity="center",因此Button才能在该LinearLayout的正中央。


思考,如果给Button加一个android:gravity="right"的属性,会是什么效果呢?


答案: 会使得 Button 内部的文字向右靠齐,而不是在中央。

本文转自 Jhuster 51CTO博客,原文链接:http://blog.51cto.com/ticktick/1321114,如需转载请自行联系原作者

你可能感兴趣的文章
pfSense book之硬件配置指南
查看>>
存储过程总结 2
查看>>
C#高性能大容量SOCKET并发(十):SocketAsyncEventArgs线程模型
查看>>
phpcurl 请求Chunked-Encoded data 遇到的一个问题
查看>>
ASPX页面中不放置Form元素的问题
查看>>
docker~Dockerfile优化程序的部署
查看>>
你可能不需要一个 JavaScript 框架(二)
查看>>
【Android】显示Emoji表情字符
查看>>
C++ Exercises(十八)
查看>>
21.5. 流量控制
查看>>
WSRP调用中的一些问题
查看>>
Android 正则表达式
查看>>
5.22. Spring boot with Cache
查看>>
[裴礼文数学分析中的典型问题与方法习题参考解答]4.3.13
查看>>
string Join
查看>>
布线须知:机柜在数据中心机房的三个新用途
查看>>
迁移到云:渐进但不可逆转
查看>>
Patchwork间谍组织将目标扩大至政府
查看>>
工业物联网为“两化融合”带来巨大推力
查看>>
《UNIXLinux程序设计教程》一3.7 非阻塞I/O
查看>>