Android第三讲——五大布局(UI)
2015-08-19 18:47
225 查看
Android的五大布局
UI:View与ViewGroup对象建立的UIViewGroup是包含多个View与ViewGroup的容
器ViewGroup继承于View
嵌套层次不要超过10层,否则低运行效率
px像素
dp一英寸上存在160px 那么1dp=1px 一英寸/160,手机不同分辨率不同dp不同
sp 文字的大小跟dp一样,只用于文本的大小
LinearLayout(线性布局)
RelativeLayout(相对布局)
FrameLayout(帧布局)
TableLayout(表格布局)
AbsoluteLayout(绝对布局)
LinearLayout
RelativeLayout
FrameLayout
TableLayout
AbsoluteLayout
线性布局LinearLayout
只能是单列或者单行没有设置orientation默认horizontal(水平)
vertical(垂直)
gravity:表示控件所处的位置
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button1"/> </LinearLayout>
layout_gravity相对于父控件
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" android:layout_gravity="center_horizontal"/><!-- 表示此按钮处于相对于父控件的水平居中-->
layout_weight所占比重
<Button android:layout_width="match_parent" android:layout_weight="1" android:layout_height="wrap_content" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" android:layout_gravity="center_horizontal"/>
练习,写出如下布局:
1、
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
2、
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> </LinearLayout>
3、需要LinearLayout嵌套
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2"> <LinearLayout android:layout_width="0dp" android:layout_weight="2" android:orientation="vertical" android:layout_height="match_parent"> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2"/> </LinearLayout> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>
4、需要LinearLayout嵌套
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <LinearLayout android:layout_width="0dp" android:layout_weight="2" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> </LinearLayout> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <LinearLayout android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> <Button android:layout_width="0dp" android:layout_weight="2" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>
相对布局RelativeLayout
alignParentLeft Right Bottom Top相对父控件的上下左右centerInParent centerVertical
centerHorizontal相对父控件的中心
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Button3"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="Button4"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Button5"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="Button6"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button7"/> </RelativeLayout>
如图:
toLeftOf toRightOf above below相对后边跟的id的控件的上下左右
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/button_1" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/button_1" android:text="Button3"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button_1" android:text="Button4"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button_1" android:text="Button5"/> </RelativeLayout>
如图:
alignLeft alignRight alignBottom alignTop相对有空间的上下左右边对齐
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/button_1" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/button_1" android:text="Button4"/> </RelativeLayout>
如图:
alignBaseline基准线对齐
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@id/button_1" android:text="Button2"/> </RelativeLayout>
如图:
帧布局FrameLayout
visibility()属性;visible显示 invisible不显示但是占用位置 gone直接去掉可以叠加.
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="150dp" android:layout_height="150dp" /> <Button android:layout_width="100dp" android:layout_height="100dp" android:textAllCaps="false" android:text="@string/button2"/> </FrameLayout>
此时两个Button都可见
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="150dp" android:layout_height="150dp" android:visibility="invisible" /> <Button android:layout_width="100dp" android:layout_height="100dp" android:textAllCaps="false" android:text="@string/button2"/> </FrameLayout>
此时最下边的Button不可见,但是它还占用着位置
表格布局TableLayout
一般的:首先要有TableRow<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3"/> </TableRow> <TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3"/> </TableRow><TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3"/> </TableRow> </TableLayout>
collapseColumns隐藏某一列
TableLayout内加入此句:0表示第一列,依次类推
android:collapseColumns="0"
此时隐藏了第一列。
shrinkColumns自动收缩某一列,防止其他列被挤出去
android:shrinkColumns="0" <!--将Button1改为 --> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1sfdsaaaaaaaaaaaaaadsffffffffff"/>
layout_span表示占几列
<!--在Button1中加入layout_span--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" <!--"2"表示此Button占2列--> android:layout_span="2" android:text="Button1"/>
此时Button1占两列。
绝对布局AbsoluteLayout
·不推荐使用直接随意拖拽。
相关文章推荐
- 设计模式之建造者模式(Builder Pattern)
- Version和Build字段的关系
- Android 中MenuInflater的使用(布局定义菜单
- [LeetCode]Unique Paths II
- [LeetCode]Unique Paths
- StringBuffer和StringBuilder的区别
- UIViewController的详细介绍
- iOS UIScrollView实现无限滚动,思路与代码
- iOS:UITextField中文输入法输入时对字符长度的限制
- 将webkit内核封装为duilib的浏览器控件
- 分享个Duilib中基于wke的浏览器控件
- HDU 2767--Proving Equivalences【scc缩点构图 && 求向图中最少增加多少条边才可以使新图强连通】
- sql server UI怎么设置自增加id?
- iOS SDK详解之UIToolBar
- 树莓派2在U8300W平台上用pppd拨号时出现“pppd: The remote system is required to authenticate itself”
- mysql 错误 SQL Error: 1366: Incorrect string value: "\xE8\xAF\xA6\xE7\xBB\x86…" for column "address"
- class priority_queue<> 简单介绍
- 多线程之四:NSOperation与NSOperationQueue
- quicksumpoj
- IOS第11天(4:UIDatePicker时间选择,和键盘处理,加载xib文件,代理模式)