就像我在以前的帖子里说: 良好的UI设计，你学习Android的好, 界面设计，你学习Android的未完成未完成. 所以今天我们开始进入界面设计实践.

[qads]

1. 概述查看

首先，我想给你介绍一点点伴您左右的Andr​​oid界面. 你遵守以下:

所有的显示元素被称为观和阶级敌人查看他们练习. 查看显示设备. 我们认为分类 2 类型:

• 查看菜单: 是现有的显示元件，我们可以直接看到的的TextView, 的EditText, 钮.
• 的ViewGroup: 另一种观点查看含有, 可容纳单一视图或包含其他的ViewGroup.

在我们的ViewGroup有多种, 在这里我向你推荐 2 最常使用的类型是RelativeLayout的和的LinearLayout.

• RelativeLayout的 另一种观点是一个ViewGroup包含和管理按照其视图之间的关系. 就像坐在你旁边你的A B, 你坐在你的C B下方,…
• 的LinearLayout 另一种观点则含有的ViewGroup和水平方向或垂直管理 (这取决于它是明). 像这样，我们排着队, 布置在水平或垂直.

今天，我们都经历练的一些应用RelativeLayout的界面设计学.
您创建一个新的项目文件和文本选项卡上执行脱机activity_main.xml中.

2. 登录界面设计的RelativeLayout

我们设想以下登录界面:

这样, 我们需要 3 的TextView (登录, 用户, 密码), 2 的EditText (用户, 密码) 和 1 钮 (行). 我们暂时向我们提出 tvLogin, TVUS, tvPassword, editUser, editPassword, btnOk.
由于我们使用的RelativeLayout, 正如我上面所说, RelativeLayout的安排在其内所基于的组件，以及它们之间的关系. 我想下一个:

• tvLogin在顶部
• tvLogin下tvUser
• 下tvUser edituser
• 下edituser tvPassword
• tvPassword下editPassword
• editPassword下btnOk

因此，我们将有下面的代码:

<?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/tvLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Login"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvUser"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvLogin"
        android:text="user" />

    <EditText
        android:id="@+id/editUser"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvUser" />

    <TextView
        android:id="@+id/tvPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editUser"
        android:text="password" />

    <EditText
        android:id="@+id/editPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvPassword" />

    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editPassword"
        android:layout_centerHorizontal="true"
        android:text="ok" />

</RelativeLayout>

他的代码解释如下. 由于这是我第一次来解释你的代码应该xml的关注. 行 机器人:XYZ 在被称为查看相应的查看选项卡这是性质.

首先，你看的第一张牌的RelativeLayout

因为RelativeLayout的所以它是一个关闭标签的ViewGroup (当前 2) 和起始标签 (当前 48) 它包含内子元素 2 这将打开卡双. 其属性被用来

机器人:layout_width VA机器人:layout_height 这里 2 唯一属性水平和垂直方向是其. 全部查看全部需要有至少 2 这个属性来确定视图的大小. 如果View没有 1 在 2 此属性将失败. 价值 2 这个属性可以得到:

– WRAP_CONTENT : 也就是，只有足够的内容 (包 – 仅仅, 内容 – 内容). 它的内容，即有多少它刚好到达那里.
– match_parent : 意味着整个的父亲 (匹配 – 总, 亲 – 亲). 那是他的父亲 (胜包含它) 多少拿出那款.
– XDpbA : 其中x是 1 雷亚尔, DP是一样的野生厘米, 米, 英寸,.. 在Android的单位长度的瞬间你还记得它是DP.
对于此的RelativeLayout的ViewGroup, 我们把水平和垂直方向都match_parent即水平和垂直采取他的父亲, 他的父亲是手机屏幕.

跟随, 你要注意的第一个TextView的卡, tvLogin
这里 2 Android的属性:layout_width VA机器人:layout_height是自然的和强制. 澄清他为了让你了解多一点:
– 其宽度设定WRAP_CONTENT – 只是足够的内容, 即整个它始终是足够的内容. 点击它，你会看到周围的蓝色边框, 它总是有内容

– 如果您设置的值，因为这是Android的:layout_width =”match_parent” 即水平你的整个宽度的家伙给它, 那是男孩的父亲，这家伙的RelativeLayout占据整个屏幕的宽度，它具有横向整个画面像这样.

– Android的属性:layout_centerHorizo​​ntal =”真正” 也就是说，我们把它的家伙中间水平. 中央 – 中间, 横 – 水平. 所以，你会在屏幕中央看到tvLogin. 如果设置了宽度为match_parent (即整个屏幕) 然后它在中间的布局并作为什么作为恒定 (因为它是整个宽度, 这中间的那个) 和文本 “登录” 位于左边的数字之间，是不再. 你歧视 1 查看报价 2 作为其的组件和它的内容. 随着TextView中被围住的文本布局, 其内容是文本. 有了它的一部分RelativeLayout的包裹架, 其内容是里面的孩子们. 所以在这种情况下，当希望文本tvLogin你的宽度以及match_parent之间，则必须使用属性 机器人:重力=”中央”. 机器人:重心位置来定义视图的内容.
具体什么时候会TextViewLogin以下树脂:

<TextView
    android:id="@+id/tvLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="Login"
    android:textSize="24sp" />

– Android的属性:TEXTSIZE =”24SP” 也就是说，我们设置字体大小是24sp. 字号单位是SP.

接下来的EditText查看edituser及以下

它们是相同的，并且 1 属性:

机器人:layout_below : 下面的一些方法. 下面的事情是由视有关它的ID确定.

还需要更多的观相同属性都可以在RelativeLayout的使用

• 机器人:layout_above : 上方有一定看法 (参数是视ID)
• 机器人:layout_toLeftOf : 位于某些视图左侧 (参数是视ID)
• 机器人:layout_toRightOf: 位于一定的看法的权利 (参数是视ID)
• 机器人:layout_alignParentTop, 机器人:layout_alignParentRight, 机器人:layout_alignParentBottom, 机器人:layout_alignParentLeft : 属性指定位于上, 权, 下面, 查看爸爸离开. 我们的说法是事实, 假.

3. 与RelativeLayout的接口设计聊天室

聊天界面，我们都在谈论它的应用程序界面，Facebook的梅萨. 意味着 2 人们互相聊天. 所以你预想的界面将如下:

根据上面的图像, 我们需要 1 ListView控件 (认为这是允许显示数据列表), 1 和的EditText 1 的ImageButton是按钮图像. 我们把它们分别ID lvMessage, editMessage, btnSend.

• btnSend位于屏幕标题下方，并位于屏幕标题的右侧
• editMessage也位于屏幕下方的标题和btnSend左.
• lvMessage上方editMessage.

现在你创建 1 通过在文件夹上右击新的接口文件 布局 在 水库 选择 新 - >布局资源文件 并命名文件 layout_chat.xml

接下来，创建 1 发送按钮图标如下. 用鼠标右键单击该文件夹 绘制在res
选 新 - >矢量资产. 对话框，单击选择按钮.

另一个对话框出现那么多的图标, 你拉下来约 2/3 然后选择发送图标:

点击确定, 并重新命名图标的回报 ic_send

最后点击下一步 - >完成. 现在，图标都在文件夹绘制创建, 实际上它是由XML画.

现在打开layout_chat.xml的文本选项卡. 你会看到的LinearLayout默认, 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"
    android:orientation="vertical">

    <ListView
        android:id="@+id/lvMessage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/editMessage" />

    <EditText
        android:id="@+id/editMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btnSend" />

    <ImageButton
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_send" />

</RelativeLayout>

在此代码自己解释的属性, 只有唯一的属性 机器人:SRC 装置的路径中的文件图标. 这里值 @绘制/ ic_send 即在一个文件夹绘制ic_send检索文件.

有一点要注意的是，你会看到在ListView的预览界面中，就像这样描述. 它被描述为包含元素的列表，但是当你运行应用程序，你会看到空表, 因为我们没有数据. 稍后，我们将与稍后再处理. 本文仅界面设计独.

此时你运行程序仍会显示界面我们做桌面登录, 更改界面，你需要的文件聊天MainActivity.java变化 的setContentView(R.layout.activity_main); 到 的setContentView(R.layout.layout_chat); 就是这样.

今天，他的所有稍长一点，但放了很多的希望. 好的设计是好的编程. 祝你有效的学习. 如果您有任何疑问，意见, 每股请保持文章下面评论.