RelativeLayout
是相对布局在页面上相对于页面坐标进行布局设置。比如可以通过确定对象A确定对象B的位置,B可以在A的上下左右,对象B距离A的位置。
RelativeLayout的灵活性很高,但在实际操作过程中我很难确定定位对象的位置,最后用图形界面手托才完成页面的布局。
页面截图如下
实现代码如下
- <?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" >
- <TextView
- android:id="@+id/userName"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignBottom="@+id/tipUserName"
- android:layout_alignParentTop="true"
- android:text="@string/user_name"
- android:textSize="20sp" />
- <EditText
- android:id="@+id/tipUserName"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_toRightOf="@id/userName"
- android:inputType="text"
- android:text="@string/tip_user_name" />
- <TextView
- android:id="@+id/passWord"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_above="@+id/checkBox"
- android:layout_alignParentLeft="true"
- android:layout_below="@id/userName"
- android:layout_toLeftOf="@+id/tipUserName"
- android:text="@string/user_password"
- android:textSize="20sp" />
- <EditText
- android:id="@+id/tipPassword"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/tipUserName"
- android:layout_toRightOf="@id/passWord"
- android:inputType="textPassword"
- android:text="@string/tip_user_password" />
- <Button
- android:id="@+id/logInBtn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/passWord"
- android:text="@string/login_Btn" />
- <CheckBox
- android:id="@+id/checkBox"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/tipPassword"
- android:layout_toRightOf="@id/logInBtn"
- android:text="@string/rember_pass" />
- </RelativeLayout>
<?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" >
<TextView
android:id="@+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/tipUserName"
android:layout_alignParentTop="true"
android:text="@string/user_name"
android:textSize="20sp" />
<EditText
android:id="@+id/tipUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/userName"
android:inputType="text"
android:text="@string/tip_user_name" />
<TextView
android:id="@+id/passWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/checkBox"
android:layout_alignParentLeft="true"
android:layout_below="@id/userName"
android:layout_toLeftOf="@+id/tipUserName"
android:text="@string/user_password"
android:textSize="20sp" />
<EditText
android:id="@+id/tipPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tipUserName"
android:layout_toRightOf="@id/passWord"
android:inputType="textPassword"
android:text="@string/tip_user_password" />
<Button
android:id="@+id/logInBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/passWord"
android:text="@string/login_Btn" />
<CheckBox
android:id="@+id/checkBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tipPassword"
android:layout_toRightOf="@id/logInBtn"
android:text="@string/rember_pass" />
</RelativeLayout>
用户名和密码字体过小,可用android:textSize="XXsp"调整字体大小。
我本来想通过用户名框的位置定下用户名输入框的位置和密码框的位置,再通过密码框的位置定位到密码输入框的和登陆按钮的位置,最后通过登陆按钮来确定单选框的位置。最后结果就是由于用户名框和密码框太小,导致部分挤在了一起,特别难看。
LinearLayout
线性布局也是一种比较灵活的布局方式, 通过直接的线性布局对页面直接实现布局。
在使用LinearLayout 的时候,思路大致是将页面母板分成若干部分,然后母板LinearLayout 使用android:orientation="vertical"将各个部分垂直分布,然后每个部分中的各个对象通过android:orientation="horizontal"实现各个对象的横向分布。
实现页面如下
实现代码如下
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="${packageName}.${activityClass}"
- tools:ignore="Orientation" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal" >
- <TextView
- android:id="@+id/userName"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/user_name" />
- <EditText
- android:id="@+id/tipUserName"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:inputType="text"
- android:text="@string/tip_user_name" />
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal" >
- <TextView
- android:id="@+id/passWord"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/user_password" />
- <EditText
- android:id="@+id/tipPassword"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:inputType="textPassword"
- android:text="@string/tip_user_password" />
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal" >
- <Button
- android:id="@+id/logInBtn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/login_Btn" />
- <CheckBox
- android:id="@+id/checkBox"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/rember_pass" />
- </LinearLayout>
- </LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="${packageName}.${activityClass}"
tools:ignore="Orientation" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/user_name" />
<EditText
android:id="@+id/tipUserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="text"
android:text="@string/tip_user_name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/passWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/user_password" />
<EditText
android:id="@+id/tipPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="textPassword"
android:text="@string/tip_user_password" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="@+id/logInBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login_Btn" />
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/rember_pass" />
</LinearLayout>
</LinearLayout>
在使用LinearLayout 的时候要注意将各个对象包裹进
LinearLayout
。已经有了母板LinearLayout 就不用再重行创建LinearLayout 面板了。对于LinearLayout 的实现思路还是挺清晰的,所以部署起来还是不算很难。