Android布局
线性布局(LinearLayout)
常用属性:
- android:id 设置控件ID
- android:layout_width 设置控件宽度
- android:layout_height 设置控件高度
- android:backgroud 设置背景色/图片
- android:layout_margin 设置控件外边距
- andorid:layout_padding 设置控件内边距
- androdi:orientation 设置布局方式(纵向或者横向)
- android:gravity 设置控件内部元素对齐方式
- android:layout_weight 设置控件权重
权重是在控件本身的长宽基础上加屏幕空间剩余部分
例:两个控件长宽都是0dp 权重设置为一样,那么他们将平分父控件所占用控件,
其中一个控件设置非0dp,一个为0dp,权重一样,
那么非0dp的控件所占用控件为非0值加上权重所分配的屏幕控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:background="#0000ff"
android:layout_width="400dp"
android:layout_height="400dp"
>
<View
android:layout_weight="1"
android:background="#ff0000"
android:layout_width="100dp"
android:layout_height="match_parent"/>
<View
android:background="#ffff00"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>
相对布局(RelativeLayout)
常用属性:
- android:layout_toLeftOf 在谁的左边
- android:layout_toRightOf 在谁的右边
- android:layout_aligoBottom 跟谁底部对齐
- android:layout_alignParentBottom 与父控件底部对齐
- android:layout_below 在谁的下边
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="@+id/v1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff0000" />
<View
android:id="@+id/v2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/v1"
android:background="#ff00ff" />
<LinearLayout
android:id="@+id/lyout1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="@+id/v2"
android:background="#00ff00"
android:orientation="horizontal"
android:padding="15dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0033" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#3300ff"
android:padding="15dp">
<View
android:id="@+id/v3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#ff0033" />
<View
android:id="@+id/v4"
android:layout_toRightOf="@+id/v3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:background="#333300" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
练习
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="@+id/lyout1"
android:background="#292f45"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/tv1"
android:background="@drawable/ic_baseline_arrow_back_ios_24"
android:layout_margin="10dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_toRightOf="@id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:text="测试"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="20dp"
android:paddingTop="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#292f45"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/rlyou1"
android:background="#ffffff"
android:layout_height="80dp"
android:layout_width="match_parent">
<RelativeLayout
android:id="@+id/rv1"
android:background="#ff00ff"
android:layout_width="80dp"
android:gravity="center"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_toRightOf="@+id/rv1"
android:background="#ffff00"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="15dp"
android:id="@+id/rlyou2"
android:background="#ffffff"
android:layout_height="80dp"
android:layout_width="match_parent">
<RelativeLayout
android:id="@+id/rv2"
android:background="#ff00ff"
android:layout_width="80dp"
android:gravity="center"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_toRightOf="@+id/rv2"
android:background="#ffff00"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="15dp"
android:id="@+id/rlyou3"
android:background="#ffffff"
android:layout_height="80dp"
android:layout_width="match_parent">
<RelativeLayout
android:id="@+id/rv3"
android:background="#ff00ff"
android:layout_width="80dp"
android:gravity="center"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout
android:layout_toRightOf="@+id/rv3"
android:background="#ffff00"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="测试1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>