2025年3月31日 星期一 乙巳(蛇)年 正月初一 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > 安卓(android)开发

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

时间:01-12来源:作者:点击数:20

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

下面配上本次试验UI界面
在这里插入图片描述
- 1.首先设置成线性布局,添加orientation属性,设置成垂直
  • android:orientation="vertical"
- 设置padding为8dp(Padding 为内边框,指该控件内部内容,如文本/图片距离该控件的边距)
  • android:padding="8dp"
- 2.建立一个testview写标题
  • <TextView
  • android: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控件
  • <CheckBox
  • android:id="@+id/cb_rm"
  • android:layout_width="wrap_content"
  • android:layout_height="wrap_content"
  • android:text="记住密码"
  • android:textSize="18dp"
  • />
-6.再在里面建立一个testview(忘记密码)
  • <TextView
  • android: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"?>
  • <LinearLayout
  • xmlns:android="http://schemas.android.com/apk/res/android"
  • android:orientation="vertical"
  • android:layout_width="match_parent"
  • android:layout_height="match_parent"
  • android:padding="8dp"
  • android:background="#F8F7F7">
  • <TextView
  • android:layout_width="match_parent"
  • android:layout_height="wrap_content"
  • android:text="账号登录"
  • android:textSize="40dp"/>
  • <EditText
  • android: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"/>
  • <EditText
  • android: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"/>
  • <Button
  • android:layout_marginTop="25dp"
  • android:layout_width="300dp"
  • android:layout_height="60dp"
  • android:text="登录"
  • android:textSize="25dp"
  • android:layout_gravity="center"/>
  • <RelativeLayout
  • android:layout_marginTop="50dp"
  • android:layout_width="match_parent"
  • android:layout_height="wrap_content">
  • <CheckBox
  • android:id="@+id/cb_rm"
  • android:layout_width="wrap_content"
  • android:layout_height="wrap_content"
  • android:text="记住密码"
  • android:textSize="18dp"/>
  • <TextView
  • android: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>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门