andriod一个的简单UI界面

最近在学习Android App的开发，会不时推出一些我做的，与大家进行交流。
这次分享的是一个简单的UI界面，最终的实现效果如下：

具体代码如下，一些知识点需要自己仔细琢磨才行哟：

<TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="356dp"
    android:layout_height="270dp"
    android:layout_marginTop="8dp"
    android:background="@color/colorAccent"
    android:shrinkColumns="0,1,2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:layout_marginTop="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:text="独占一行" />

    <TableRow>

        <Button
            android:layout_marginTop="8dp"
            android:text="0000000000000000"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:textSize="20sp" />

        <Button
            android:layout_marginTop="8dp"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:text="1111111111111111"
            android:textSize="20sp" />

        <Button
            android:layout_marginTop="8dp"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="4dp"
            android:text="2222222222222222"
            android:textSize="20sp" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_marginTop="8dp"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:text="2222222222222222"
            android:textSize="20sp" />

        <Button
            android:layout_marginTop="14dp"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:layout_span="2"
            android:text="我占两列"
            android:textSize="20sp"
            />
    </TableRow>
</TableLayout>

<TableLayout
    android:id="@+id/tableLayout2"
    android:layout_width="356dp"
    android:layout_height="70dp"
    android:layout_marginTop="32dp"
    android:background="#FFCD6B"
    android:shrinkColumns="0,1,2"
    android:stretchColumns="0,1,2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.352"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tableLayout">

    <TableRow>

        <Button
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:text="填充一" />

        <Button
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="8dp"
            android:text="填充二" />

        <Button
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="6dp"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="8dp"
            android:text="普通三" />
    </TableRow>
</TableLayout>

<TableLayout
    android:id="@+id/tableLayout6"
    android:layout_width="360dp"
    android:layout_height="110dp"
    android:layout_marginTop="24dp"
    android:shrinkColumns="0,1,2"
    android:stretchColumns="0,1,2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tableLayout2">

    <TableRow>

        <ImageView
            android:layout_width="106dp"
            android:layout_height="100dp"
            android:src="@drawable/onmk" />

        <ImageView
            android:layout_width="106dp"
            android:layout_height="100dp"
            android:src="@drawable/asok" />

        <ImageView
            android:layout_width="106dp"
            android:layout_height="100dp"
            android:src="@drawable/zxc" />
    </TableRow>
</TableLayout>

在这个位置（drawable）添加相应相应图片，用的是.png格式：

到此，基本上算是完成了。
欢迎大家浏览与评论！