AndroidStdio LinearLayout 线性布局写一个登录界面
先看效果图:
这个登录界面采用垂直方向的线性布局,主体分为三个部分:上面的图片区,中间的表单区,下面的链接区。图片区包含一个ImageView;表单区包含用户名文本框,用户名输入框,密码文本框,密码输入框以及登录按钮;链接区包含忘记密码和注册新用户。完整代码会贴在下面,接下来先简单说一下LinearLayout线性布局。
概览
LinearLayout 线性布局有两种,分别是水平线性布局和垂直线性布局,LinearLayout属性中android:orientation为设置线性布局当其="vertical"时,为 垂直线性布局,当其="horizontal"时,为水平线性布局,不管是水平还是垂直线性布局一行(列)只能放置一个控件。
layout_gravity和gravity
android:gravity用于设置子组件的对齐方式
left 左
right 右
center 中间
bottom 底部
center_vertical 竖直居中
center_horizontal 水平居中
center_horizontal | right 可以组合搭配
layout_gravity用于设置子组件相对于LinearLayout的位置
可取值与gravity类似,不过如果方向设为horizontal(水平),只有top,bottom,center_vertical和center有效;如果方向设为vertical,只有left,right,center_horizontal和center有效
layout_weight权重
它的作用是让子组件按一定比例来占有父布局剩余的空间
计算方法为:本组件的高度=本组件原有高度+父布局剩余空间所占比例高度
layout_margin和padding
layout_margin:子组件和父组件之间的距离,单位通常常用dp
layout_marginTop
layout_marginBottom
layout_marginLeft
layout_marginRight
padding:用在父组件上,设置父组件和子组件之间的留白
paddingTop
paddingBottm
paddingLeft
paddingRight
登录界面代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".LoginActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="292dp"
android:background="@color/colorLogin"
android:orientation="vertical"
>
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="283dp"
app:srcCompat="@drawable/login" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="用户名" />
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="55dp"
android:ems="10"
android:inputType="textPersonName"
android:text="" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="密码" />
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="55dp"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorLogin"
android:layout_marginTop="20dp"
android:text="登录" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="140dp"
android:textColor="@color/colorPrimary"
android:text="忘记密码" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="140dp"
android:text="注册新用户"
android:textColor="@color/colorPrimary" />
</LinearLayout>
</LinearLayout>
t_marginRight="140dp"
android:text="注册新用户"
android:textColor="@color/colorPrimary" />
</LinearLayout>
</LinearLayout>