[移动开发] Android界面布局

? 利用线性布局实现如下界面：

?实验过程：

刚刚接触Android studio，面对第一个实验有些无从下手，所以先收集了资料。

线性布局的重点为：vertical(垂直布局)；horizontal（水平布局）

线性布局由：LinearLayout类来代表，它可以控制各组件横向排列，也可以控制各组件纵向排列。

所以四行四列，运用嵌套，先用一个垂直的LinearLayout，里面放四个水平的LinearLayout，然后在水平的LinearLayout里面放TextView。

部分代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView... />
        <TextView... />
        <TextView.../>
        <TextView... />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView.../>
        <TextView... />
        <TextView.../>
        <TextView.../>
    </LinearLayout>...

为了达到如图上的间隔效果，加入

<TextView

android:layout_marginTop="5px"
android:layout_marginBottom="5px"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"/>

为了达到如图上的边框效果，在shape.xml中加入

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1px" android:color="#fff"/>
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
</shape>

最后得到：

Android布局实验——约束布局

?? 利用ConstraintLayout实现如下界面：

约束布局中最重要的为被约束的组件的位置，以及相对定位的常用属性：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

（作者：四会歌神陈子豪
链接：https://www.jianshu.com/p/17ec9bd6ca8a
来源：简书）

只要弄清楚组件与组件之间的位置，就可以很好的运用ConstraintLayout

先固定input组件：

<TextView
...
android:id="@+id/TextView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

然后利用input组件固定好结果组件：

<TextView
    android:id="@+id/TextView2"
    app:layout_constraintEnd_toEndOf="@id/TextView1"
    app:layout_constraintTop_toBottomOf="@id/TextView1"
    app:layout_constraintStart_toStartOf="@id/TextView1"
    />

只要固定好以上两个界面，下面的计算器案件部分，就很简单了

<Button
    android:id="@+id/Button1"
...
    app:layout_constraintTop_toBottomOf="@id/TextView2"
    app:layout_constraintLeft_toLeftOf="@id/TextView2"
    tools:ignore="MissingConstraints">
</Button>

<Button
    android:id="@+id/Button2"
...
    app:layout_constraintTop_toBottomOf="@id/TextView2"
    app:layout_constraintLeft_toRightOf="@id/Button1"
    app:layout_constraintBaseline_toBaselineOf="@id/Button1"
    tools:ignore="MissingConstraints">
</Button>

<Button
    android:id="@+id/Button3"
...
    app:layout_constraintTop_toBottomOf="@id/TextView2"
    app:layout_constraintLeft_toRightOf="@id/Button2"
    app:layout_constraintBaseline_toBaselineOf="@id/Button2"
    tools:ignore="MissingConstraints">
</Button>

<Button
    android:id="@+id/Button4"
...
    app:layout_constraintTop_toBottomOf="@id/TextView2"
    app:layout_constraintLeft_toRightOf="@id/Button3"
    app:layout_constraintBaseline_toBaselineOf="@id/Button3"
    tools:ignore="MissingConstraints">
</Button>

按键第一层出现，后面的以此对应上面的约束即可

PS:虽然使用的组件与计算器的无关，但是我已经尽量图片上模仿了。

Android布局实验——表格布局

? 利用表格布局实现如下界面：

?表格布局由TableLayout所代表，它与LinearLayout类似，但不需要明确包含多少行，多少列，而是通过添加TableRow和其他组件来控制表格的行数和列数。

TableRow代表一行，一行中有几列则由TableRow中有多少组件决定。

PS：因为我不太看得懂老师这个到底是哪里运用了表格，所以就按照我自己的理解，每一行由2到3列，中间的留白部分，我用拉伸但不输入文字的

<TextView
    android:text="">
</TextView>

如果有错误还请大家多多指教，不要骂我谢谢谢谢( ?? ω ?? )?

我的结果如下：

?新手还请大家多多指教，三个实验其实都不太会╥﹏╥...

[移动开发]Android界面布局