Android的约束布局,表格布局及线性布局
一、约束布局(ConstraintLayout)的创建及使用,及个人的相关实验说明
有关于此布局的创建和使用,推荐看一看ConstraintLayout的创建和使用。
看完之后开始拖拽Textview组件进入布局,输入每个组件的内容,然后调整背景颜色,成品如图:
每一个组件调整位置,建议使用右边的Attributes工具栏中的:
笔者在这里不一一举例,创建了布局之后可以慢慢调整慢慢体会这个布局。
布局调整完毕之后,代码如下(代码会在调整过程中自动生成):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@android:color/black">
<TextView
android:id="@+id/textView"
android:layout_width="144dp"
android:layout_height="77dp"
android:background="@android:color/holo_red_dark"
android:gravity="center"
android:text="@string/red"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="150dp"
android:layout_height="77dp"
android:background="@android:color/holo_orange_dark"
android:gravity="center"
android:text="@string/orange"
app:layout_constraintEnd_toStartOf="@+id/textView3"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textView3"
android:layout_width="144dp"
android:layout_height="77dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="@string/yellow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textView4"
android:layout_width="126dp"
android:layout_height="95dp"
android:layout_marginStart="134dp"
android:layout_marginLeft="134dp"
android:layout_marginTop="134dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="@string/green"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textView5"
android:layout_width="97dp"
android:layout_height="95dp"
android:layout_marginTop="57dp"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="@string/blue"
app:layout_constraintEnd_toStartOf="@+id/textView6"
app:layout_constraintStart_toEndOf="@+id/textView4"
app:layout_constraintTop_toBottomOf="@+id/textView2"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textView6"
android:layout_width="126dp"
android:layout_height="95dp"
android:layout_marginTop="134dp"
android:layout_marginEnd="134dp"
android:layout_marginRight="134dp"
android:background="@android:color/holo_purple"
android:gravity="center"
android:text="@string/purple"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/textView8"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="@string/violef"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
二、表格布局 (Tablelayout)
表格布局也不难,也是创建和使用,创建就按下图所示创建就行(右键layout->new):
②默认是线性布局(LinearLayout)改成Tablelayout
关于使用,粗略使用就是表格行(TableRow),还有表格的一些属性,可以在这个作者写的博客里简单了解一下:
表格布局的属性及应用
总而言之我们最后用表格布局做了一个菜单栏,它长这样:
自动生成的代码是这样的:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_dark"
android:stretchColumns="1">
<TableRow>
<TextView
android:padding="3dp"
android:text="open..."
android:textColor="@android:color/background_light" />
<TextView
android:gravity="right"
android:padding="3dp"
android:text="crtl-o"
android:textColor="@android:color/background_light" />
</TableRow>
<TableRow>
<TextView
android:padding="3dp"
android:text="save..."
android:textColor="@android:color/background_light" />
<TextView
android:gravity="right"
android:padding="3dp"
android:text="ctrl-s"
android:textColor="@android:color/background_light" />
</TableRow>
<TableRow>
<TextView
android:padding="3dp"
android:text="save as..."
android:textColor="@android:color/background_light" />
<TextView
android:gravity="right"
android:padding="3dp"
android:text="crtl-shift-s"
android:textColor="@android:color/background_light" />
</TableRow>
<ImageView
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/colorAccent" />
<TableRow>
<TextView
android:padding="3dp"
android:text="X Import"
android:textColor="@android:color/background_light" />
</TableRow>
<TableRow>
<TextView
android:padding="3dp"
android:text="X Export..."
android:textColor="@android:color/background_light" />
<TextView
android:gravity="right"
android:padding="3dp"
android:text="crtl-E"
android:textColor="@android:color/background_light" />
</TableRow>
<ImageView
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/colorAccent" />
<TableRow>
<TextView
android:padding="3dp"
android:text="Quit"
android:textColor="@android:color/background_light" />
</TableRow>
</TableLayout>
三、线性布局
线性布局的创建类似于表格布局,这里不多赘述。
我也不知道怎么说,有些东西都是做的时候慢慢领悟的,比如线性布局的嵌套,你观察下面代码,可以看到一层线性布局里面套了4个线性布局,再使用垂直排布android:orientation="vertical"的属性,才可以使4个线性布局展开。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn1"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn2"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn3"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn4"
tools:ignore="ButtonStyle" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn5"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn6"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn7"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn8"
tools:ignore="ButtonStyle" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn9"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn10"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn11"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn12"
tools:ignore="ButtonStyle" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn13"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn14"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn15"
tools:ignore="ButtonStyle" />
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="@string/bn16"
tools:ignore="ButtonStyle" />
</LinearLayout>
</LinearLayout>
最后成果如图: