Android开发实践:布局的平分

简介:


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


一、效果图


201355141.png


二、思考 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 >


效果如图所示:


202738817.png


(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 >


效果如图所示:


202621615.png


三、 在水平方向“均分”整个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 >


效果如图:

203157172.png


由图中效果可以看到,两个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,如需转载请自行联系原作者

目录
打赏
0
0
0
0
265
分享
相关文章
Termux安卓终端美化与开发实战:从下载到插件优化,小白也能玩转Linux
Termux是一款安卓平台上的开源终端模拟器,支持apt包管理、SSH连接及Python/Node.js/C++开发环境搭建,被誉为“手机上的Linux系统”。其特点包括零ROOT权限、跨平台开发和强大扩展性。本文详细介绍其安装准备、基础与高级环境配置、必备插件推荐、常见问题解决方法以及延伸学习资源,帮助用户充分利用Termux进行开发与学习。适用于Android 7+设备,原创内容转载请注明来源。
123 19
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
76 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
203 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
66 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
156 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
escrcpy 是一款基于 Scrcpy 的开源项目,使用 Electron 构建,提供图形化界面来显示和控制 Android 设备。它支持 USB 和 Wi-Fi 连接,帧率可达 30-120fps,延迟低至 35-70ms,启动迅速且画质清晰。escrcpy 拥有丰富的功能,包括自动化任务、多设备管理、反向网络共享、批量操作等,无需注册账号或广告干扰。适用于游戏直播、办公协作和教育演示等多种场景,是一款轻量级、高性能的 Android 控制工具。
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
62 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
92 19
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
120 14
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等