RelativeLayout
是相对布局在页面上相对于页面坐标进行布局设置。比如可以通过确定对象A确定对象B的位置,B可以在A的上下左右,对象B距离A的位置。
RelativeLayout的灵活性很高,但在实际操作过程中我很难确定定位对象的位置,最后用图形界面手托才完成页面的布局。
页面截图如下
实现代码如下
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent" >
5
6 <TextView
7 android:id="@+id/userName"
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:layout_alignBottom="@+id/tipUserName"
11 android:layout_alignParentTop="true"
12 android:text="@string/user_name"
13 android:textSize="20sp" />
14
15 <EditText
16 android:id="@+id/tipUserName"
17 android:layout_width="match_parent"
18 android:layout_height="wrap_content"
19 android:layout_toRightOf="@id/userName"
20 android:inputType="text"
21 android:text="@string/tip_user_name" />
22
23 <TextView
24 android:id="@+id/passWord"
25 android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:layout_above="@+id/checkBox"
28 android:layout_alignParentLeft="true"
29 android:layout_below="@id/userName"
30 android:layout_toLeftOf="@+id/tipUserName"
31 android:text="@string/user_password"
32 android:textSize="20sp" />
33
34 <EditText
35 android:id="@+id/tipPassword"
36 android:layout_width="match_parent"
37 android:layout_height="wrap_content"
38 android:layout_below="@id/tipUserName"
39 android:layout_toRightOf="@id/passWord"
40 android:inputType="textPassword"
41 android:text="@string/tip_user_password" />
42
43 <Button
44 android:id="@+id/logInBtn"
45 android:layout_width="wrap_content"
46 android:layout_height="wrap_content"
47 android:layout_below="@id/passWord"
48 android:text="@string/login_Btn" />
49
50 <CheckBox
51 android:id="@+id/checkBox"
52 android:layout_width="match_parent"
53 android:layout_height="wrap_content"
54 android:layout_below="@id/tipPassword"
55 android:layout_toRightOf="@id/logInBtn"
56 android:text="@string/rember_pass" />
57
58 </RelativeLayout>
用户名和密码字体过小,可用android:textSize="XXsp"调整字体大小。
我本来想通过用户名框的位置定下用户名输入框的位置和密码框的位置,再通过密码框的位置定位到密码输入框的和登陆按钮的位置,最后通过登陆按钮来确定单选框的位置。最后结果就是由于用户名框和密码框太小,导致部分挤在了一起,特别难看。
LinearLayout
线性布局也是一种比较灵活的布局方式, 通过直接的线性布局对页面直接实现布局。
在使用LinearLayout 的时候,思路大致是将页面母板分成若干部分,然后母板LinearLayout 使用android:orientation="vertical"将各个部分垂直分布,然后每个部分中的各个对象通过android:orientation="horizontal"实现各个对象的横向分布。
实现页面如下
实现代码如下
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical"
6 tools:context="${packageName}.${activityClass}"
7 tools:ignore="Orientation" >
8
9 <LinearLayout
10 android:layout_width="match_parent"
11 android:layout_height="wrap_content"
12 android:orientation="horizontal" >
13
14 <TextView
15 android:id="@+id/userName"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:text="@string/user_name" />
19
20 <EditText
21 android:id="@+id/tipUserName"
22 android:layout_width="0dp"
23 android:layout_height="wrap_content"
24 android:layout_weight="1"
25 android:inputType="text"
26 android:text="@string/tip_user_name" />
27 </LinearLayout>
28
29 <LinearLayout
30 android:layout_width="match_parent"
31 android:layout_height="wrap_content"
32 android:orientation="horizontal" >
33
34 <TextView
35 android:id="@+id/passWord"
36 android:layout_width="wrap_content"
37 android:layout_height="wrap_content"
38 android:text="@string/user_password" />
39
40 <EditText
41 android:id="@+id/tipPassword"
42 android:layout_width="0dp"
43 android:layout_height="wrap_content"
44 android:layout_weight="1"
45 android:inputType="textPassword"
46 android:text="@string/tip_user_password" />
47 </LinearLayout>
48
49 <LinearLayout
50 android:layout_width="match_parent"
51 android:layout_height="wrap_content"
52 android:orientation="horizontal" >
53
54 <Button
55 android:id="@+id/logInBtn"
56 android:layout_width="wrap_content"
57 android:layout_height="wrap_content"
58 android:text="@string/login_Btn" />
59
60 <CheckBox
61 android:id="@+id/checkBox"
62 android:layout_width="wrap_content"
63 android:layout_height="wrap_content"
64 android:text="@string/rember_pass" />
65 </LinearLayout>
66
67 </LinearLayout>
在使用LinearLayout 的时候要注意将各个对象包裹进 LinearLayout 。已经有了母板LinearLayout 就不用再重行创建LinearLayout 面板了。对于LinearLayout 的实现思路还是挺清晰的,所以部署起来还是不算很难。
LinearLayout和RelativeLayout
共有属性:
java代码中通过btn1关联次控件
android:id="@+id/btn1"
控件宽度
android:layout_width="80px" //"80dip"或"80dp"
android:layout_width =“wrap_content”
android:layout_width =“match_parent”
控件高度
android:layout_height="80px" //"80dip"或"80dp"
android:layout_height =“wrap_content”
android:layout_height =“match_parent”
控件排布
android:orientation="horizontal”
android:orientation="vertical“
控件间距
android:layout_marginLeft="5dip" //距离左边
android:layout_marginRight="5dip" //距离右边
android:layout_marginTop="5dip" //距离上面
android:layout_marginRight="5dip" //距离下面
android:paddingLeft="5dip"
控件显示位置
android:gravity="center" //left,right, top, bottom
android:gravity="center_horizontal"
android:layout_gravity是本元素对父元素的重力方向。
android:layout_gravity属性则设置控件本身相对于父控件的显示位置
android:gravity是本元素所有子元素的重力方向。
android:layout_gravity="center_vertical"
android:layout_gravity="left"
android:layout_gravity="left|bottom"
TextView中文本字体
android:text="@String/text1" //在string.xml中定义text1的值
android:textSize="20sp"
android:textColor=”#ff123456”
android:textStyle="bold" //普通(normal), 斜体(italic),粗斜体(bold_italic)
TextView中,控制其以...结束
android:ellipsize="end"
只有一行
android:singleLine="true"
定义控件是否可见
android:visibility=”visible” //可见
android:visibility=”invisible” //不可见,但是在布局中占用的位置还在
android:visibility=”gone” //不可见,完全从布局中消失
定义背景图片
android:background="@drawable/img_bg" //img_bg为drawable下的一张图片
seekbar控件背景图片及最大值
android:progressDrawable="@drawable/seekbar_img"
android:thumb="@drawable/thumb"
android:max = "60"
android:layout_alignWithParentIfMissing="true"
仅在RelativeLayout中有效:
在父亲布局的相对位置
android:layout_alignParentLeft="true" //在布局左边
android:layout_alignParentRight="true" //在布局右边
android:layout_alignParentTop="true" //在布局上面
android:layout_alignParentBottom="true " //在布局的下面
在某个控件的相对位置
android:layout_toRightOf="@id/button1" //在控件button1的右边,不仅仅是紧靠着
android:layout_toLeftOf="@id/button1" //在控件button2的左边,不仅仅是紧靠着
android:layout_below="@id/button1 " //在控件button1下面,不仅仅是正下方
android:layout_above=“@id/button1” //在控件button1下面,不仅仅是正下方
定义和某控件对奇
android:layout_alignTop=”@id/button1” //和控件button1上对齐
android:layout_alignBottom=”@id/button1” //和控件button1下对齐
android:layout_alignLeft=”@id/button1” //和控件button1左对齐
android:layout_alignRight=”@id/button1” //和控件button2右对齐
android:layout_centerHorizontal="true" //水平居中
android:layout_centerVertical="true"
android:layout_centerInParent="true"
仅在LinearLayout中有效设置控件在一排或一列中所占比例值
android:layout_weight="1"