失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Android Studio入门级UI界面设计(图文+解析)

Android Studio入门级UI界面设计(图文+解析)

时间:2019-01-08 23:57:50

相关推荐

Android Studio入门级UI界面设计(图文+解析)

本文以图片加上解析,希望小白可以理解通透

下面配上本次试验UI界面
- 1.首先设置成线性布局,添加orientation属性,设置成垂直

android:orientation="vertical"

- 设置padding为8dp(Padding 为内边框,指该控件内部内容,如文本/图片距离该控件的边距)

android:padding="8dp"

- 2.建立一个testview写标题

<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="账号登录"android:textSize="40dp"/>

标题字体大小 40dp(android:textSize=“40dp”)

-3. 建立两个editview,输入框

要让Edittext单行显示

android:maxLines="1"

限制显示文本长度,超出不显示

android:maxLength="10"

文本为空时候显示的文本

android:hint="请输入你的账号(最多十个字符)"

文本过长时,省略号显示在结尾

android:ellipsize="end"

距离顶部的距离

android:layout_marginTop="80dp"

-4. 建立登录按钮,button

android:layout_gravity是用来设置该view相对与父view 的位置.比如一个button 在linearlayout里,你想把该button放在linearlayout里靠左、靠右等位置就可以通过该属性设置

android:layout_gravity="center"

-5. 添加一个相对布局RelativeLayout,在里面建立CheckBox控件

<CheckBoxandroid:id="@+id/cb_rm"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="记住密码"android:textSize="18dp"/>

-6.再在里面建立一个testview(忘记密码)

<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:text="忘记密码"android:textColor="#9E2222"android:layout_centerVertical="true"android:textSize="18dp" />

将控件的右边缘和父控件的右边缘对齐

android:layout_alignParentRight="true"

将控件置于垂直方向的中心位置

android:layout_centerVertical="true"

-试验成功,代码如下

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="8dp"android:background="#F8F7F7"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="账号登录"android:textSize="40dp"/><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入你的账号(最多十个字符)"android:id="@+id/et_username"android:layout_marginTop="80dp"android:textColor="#9ACCA7"android:maxLines="1"android:ellipsize="end"android:maxLength="10"/><EditTextandroid:id="@+id/et_pw"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入你的密码"android:layout_marginTop="10dp"android:textColor="#DAC3E0"android:maxLines="1"android:ellipsize="end"/><Buttonandroid:layout_marginTop="25dp"android:layout_width="300dp"android:layout_height="60dp"android:text="登录"android:textSize="25dp"android:layout_gravity="center"/><RelativeLayoutandroid:layout_marginTop="50dp"android:layout_width="match_parent"android:layout_height="wrap_content"><CheckBoxandroid:id="@+id/cb_rm"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="记住密码"android:textSize="18dp"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:text="忘记密码"android:textColor="#9E2222"android:layout_centerVertical="true"android:textSize="18dp" /></RelativeLayout></LinearLayout>

如果是新入门的同学可以参考之前的文章哦

Android Studio 安装配置完整教程

Android Studio入门级教程

Android 布局 天气预报demo

如果觉得《Android Studio入门级UI界面设计(图文+解析)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。