Android布局实验

Android布局实验

实验要求

学习官方文档

https://developer.android.google.cn/guide/topics/ui/declaring-layout.html

LinearLayoutTest工程——线性布局

RelativeLayoutTest工程——相对布局

TableLayoutTest工程——表格布局

安卓布局的学习较为简单，但是需要极大的耐心和创造性，博主我就不太擅长布局的编写，对页面的美观性要求极低，所以在此希望同学们把这作为最低标准，博主自己都觉得自己的界面太丑了……而且办法也很笨，只适合初学者。

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

实验环境

本实验在Android Studio3.1.0以上版本进行

实验步骤

1.在res的layout目录下新建你所需要的.xml文件

2.实验源码

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,3" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,4" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,3" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,4" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,3" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,4" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        android:textColor="#ffffff"
        tools:text="1,2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,3" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:textColor="#ffffff"
        android:layout_marginTop="3dip"
        android:layout_marginLeft="3dip"
        tools:text="1,4" />
    </LinearLayout>
</LinearLayout>

若是通过activity调用演示，则在java目录创建Activity

源码调用

package com.example.sxy.exam3;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.linearlayout);//调用以上线性布局
//        setContentView(R.layout.relativelayout);
//        setContentView(R.layout.tablelayout);
//快捷键注释Ctrl+/
}
}

实验结果

实验二：利用相对布局实现如下界面

实验环境与步骤同上

实验源码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="0dp"
android:background="#000000"
android:orientation="horizontal">

<Button
    android:id="@+id/b1"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:layout_marginStart="3dp"
    android:textColor="#000000"
    tools:text="Red" />

<Button
    android:id="@+id/b2"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="152dp"
    android:background="#ff8247"
    android:textColor="#000000"
    tools:text="orange" />

<Button
    android:id="@+id/b3"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="302dp"
    android:background="#fff000"
    android:textColor="#000000"
    tools:text="yellow" />

<Button
    android:id="@+id/b4"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="80dp"
    android:layout_marginTop="100dp"
    android:background="#b3ee3a"
    android:textColor="#000000"
    tools:text="green" />

<Button
    android:id="@+id/b5"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="170dp"
    android:layout_marginTop="100dp"
    android:background="#6495ED"
    android:textColor="#000000"
    tools:text="blue" />

<Button
    android:id="@+id/b6"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="260dp"
    android:layout_marginTop="100dp"
    android:background="#4b0082"
    android:textColor="#000000"
    tools:text="indigo" />

<Button
    android:id="@+id/b7"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_marginTop="200dp"
    android:background="#BA55D3"
    android:textColor="#000000"
    tools:text="violef" />
</RelativeLayout>

实验结果

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

实验环境与步骤同上

实验源码

<?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:stretchColumns="1"
android:background="#000000">

<TableRow>
<TextView
    android:layout_column="1"
    android:text="Open..."
    android:padding="3dip"
    android:textColor="#ffffff"/>
<TextView
    android:text="Ctrl-O"
    android:gravity="right"
    android:padding="3dip"
    android:textColor="#ffffff"/>

</TableRow>

<TableRow>
<TextView
    android:layout_column="1"
    android:text="Save..."
    android:padding="3dip"
    android:textColor="#ffffff"/>
<TextView
    android:text="Ctrl-S"
    android:gravity="right"
    android:padding="3dip"
    android:textColor="#ffffff"/>
</TableRow>

<TableRow>
<TextView
    android:layout_column="1"
    android:text="Save As..."
    android:padding="3dip"
    android:textColor="#ffffff"/>
<TextView
    android:text="Ctrl-Shift-S"
    android:gravity="right"
    android:padding="3dip"
    android:textColor="#ffffff"/>
</TableRow>

<View
android:layout_height="2dip"
android:background="#ffffff"/>
<TableRow>
    <TextView
        android:text="X"
        android:textColor="#ffffff"
        android:padding="3dip"/>
    <TextView
        android:text="Import..."
        android:textColor="#ffffff"
        android:padding="3dip"/>
</TableRow>
<TableRow>
    <TextView
        android:text="X"
        android:textColor="#ffffff"
        android:padding="3dip"/>
    <TextView
        android:text="Emport..."
        android:textColor="#ffffff"
        android:padding="3dip"/>
    <TextView
        android:text="Ctrl-E"
        android:gravity="right"
        android:textColor="#ffffff"
        android:padding="3dip"/>
</TableRow>
<View
    android:layout_height="2dip"

    android:background="#ffffff"/>
<TableRow>
    <TextView
        android:layout_column="1"
        android:textColor="#ffffff"
        android:text="Quit"
        android:padding="3dip"/>
</TableRow>
</TableLayout>

实验结果