Android常用布局之LinearLayout(线性布局)仿酷狗登录界面
-
酷狗的登录界面
-
仿写的界面
- 布局代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0091fc"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="10dp"
android:src="@mipmap/ico_exit" />
LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
android:textColor="#fffdff"
android:textSize="20sp" />
LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#f7f7f7"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@mipmap/ico_head" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#ffffff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="账号"
android:textColor="#000000"
android:textSize="15sp" />
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@null"
android:hint="请输入银行卡账号"
android:textColorHint="#dadada"
android:textSize="15sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:src="@mipmap/ico_down" />
LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#dadada" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="密码"
android:textColor="#000000"
android:textSize="15sp" />
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@null"
android:hint="请输入银行卡密码"
android:textColorHint="#dadada"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="忘记密码"
android:textColor="#0091fc"
android:textSize="13sp" />
LinearLayout>
LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:background="#0091fc"
android:text="登录"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:text="快速注册"
android:textColor="#0091fc"
android:textSize="13sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginTop="180dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#dadada" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="其他登录方式"
android:textColor="#88858585"
android:textSize="13sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#dadada" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:drawableTop="@mipmap/ico_wb"
android:gravity="center"
android:text="微博"
android:textColor="#88000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:drawablePadding="5dp"
android:drawableTop="@mipmap/ico_qq"
android:gravity="center"
android:text="QQ"
android:textColor="#88000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:drawablePadding="5dp"
android:drawableTop="@mipmap/ico_wx"
android:gravity="center"
android:text="微信"
android:textColor="#88000000" />
LinearLayout>
LinearLayout>
LinearLayout常用属性：
android:orientation:布局中组件的排列方式，有vertical垂直,horizontal水平两种
android:gravity:控件所包含的子元素的对齐方式
android:layout_weight:控件占父元素的比重
android:layout_width:布局的宽度
android:layout_height:布局的高度
android:layout_marginLeft:左边距
android:layout_marginRight:右边距
android:layout_marginTop:上边距
android:drawableTop:设置图片在文字的上方
android:background:背景(可以是图片，也可以是颜色值)