Android的编程 – 帖子 4: 接口设计的RelativeLayout
就像我在以前的帖子里说: 良好的UI设计,你学习Android的好, 界面设计,你学习Android的未完成未完成. 所以今天我们开始进入界面设计实践.
[qads]
1. 概述查看
首先,我想给你介绍一点点伴您左右的Android界面. 你遵守以下:
所有的显示元素被称为观和阶级敌人查看他们练习. 查看显示设备. 我们认为分类 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_centerHorizontal =”真正” 也就是说,我们把它的家伙中间水平. 中央 – 中间, 横 – 水平. 所以,你会在屏幕中央看到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); 就是这样.
今天,他的所有稍长一点,但放了很多的希望. 好的设计是好的编程. 祝你有效的学习. 如果您有任何疑问,意见, 每股请保持文章下面评论.
服务员! 我觉得有很多了在这个岗位再! 我有这样的忠告! 还是你做 1 尽可能多的预期范围 1 应用程式来先生! 我认为会有兴趣多了一个人!
谢谢. 我也这样想和做 2 系列是数据库和JSON. 您可以参考脱机. 我想写这个系列对于初学者, 对于日食之前他所有的天,已发现广泛使用很老.
https://www.cachhoc.net/android/#android-database
你还记得这是什么离线的ImageButton.
我哥哥要建立混色应用: 输入 3 颜色编码R, 摹, B –> 提供拼色.
注意: cần hiển thị màu của các màu thành phần thì làm như thế nào ạ
Cái này mình chưa thử làm, nên không rõ công thức pha màu lắm. 🙂