布局文件的使用

     在Android中，UI界面是非常重要的，能够直接决定界面的美观度，而界面又是通过布局文件设定的。以下是一些有关于布局文件使用的实验，通过这些能够加深对布局文件的理解。

    实验一、线性布局的使用

    具体代码如下：

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#000"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#778"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#005"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#005525"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#CC0000"/>
</LinearLayout>

    运行效果如图：

    

    阐述：该实验主要是针对于线性布局文件的背景颜色和weight权重的使用，通过android:background=“”对背景颜色进行设置，通过android:layout_weight=""使每一个Button按钮平均占有页面，五个按钮垂直分布。

    实验二、布局文件的使用

    具体代码如下：

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
<EditText
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="To"/>
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Subject"/>
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Message"
       android:gravity="top"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        g android:layout_gravity="right"
        android:text="send"/>
</LinearLayout>

    运行效果如图：

   

    阐述：本实验通过Button和EditText两个按钮及其分别的属性对页面进行了布局，在第一个EditText中，android:layout_width="fill_parent"android:layout_height="wrap_content"分别对于页面的宽和高进行了设置，使高扩展至父元素大小，高能够显示全部内容即可，用hint对按钮添加了文字；第二个EditText与第一个类似，不做介绍；在第三个EditText按钮中，改变了它的weight权重，使其占满剩下的空间，同时对文字的对齐方式也做了设置，使其在顶端对齐；在Button按钮中，对于它的宽有了明确的设置，同时设置了按钮的对齐方式，使其右对齐。 

    实验三、相对布局的使用

    具体代码如下：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/smile1"
    android:id="@+id/imageview2"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageview4"
        app:srcCompat="@mipmap/rabbit1"
        android:layout_toLeftOf="@+id/imageview2"
        android:layout_centerVertical="true"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageview6"
        app:srcCompat="@mipmap/rabbit1"
        android:layout_toRightOf="@+id/imageview2"
        android:layout_centerVertical="true"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageview10"
        app:srcCompat="@mipmap/rabbit3"
        android:layout_centerHorizontal="true"
       android:layout_below="@+id/imageview2"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageview3"
        app:srcCompat="@mipmap/rabbit4"
        android:layout_centerHorizontal="true"
       android:layout_above="@id/imageview2"
        />
</RelativeLayout>

    运行效果如图：

    阐述：相对布局中为了将图片放置进去，设置了五个ImageView按钮，将图片放置与mipmap文件夹中，同时通过android:layout_centerHorizontal="true"和android:layout_centerVertical="true"属性决定它在父布局中水平居中还是垂直居中，通过android:layout_toLeftOf="@+id/imageview2"，android:layout_toRightOf="@+id/imageview2"，android:layout_above="@+id/imageview2"，android:layout_below="@+id/imageview2"决定在指定控件的左右上下。

    实验四、表格布局的使用

    具体代码如下：

    <?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:orientation="vertical"
    android:stretchColumns="1">
<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Account:"/>
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Input your account"/>
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"
            android:text="Password:"/>
        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint=""/>
      </TableRow>
    <Button android:id="@+id/button3"
        android:text="Login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</TableLayout>

    运行效果如图：

    阐述：在TableLayout中，行数由TableRow对象控制，也就是说有多少TableRow对象，就有多少行。在上述实验中，我们可以清晰地看到有两个TableRow对象，即这个表格布局有两行，同时通过android:stretchColumns="1"属性指定了有一列。在第一个TableRow中，我放置了两个控件，分别为Button和TextView，在其中写入了文本，并设置了高和宽。在第二个TableRow中，也进行了同样的内容。最后再添加一个Button控件，写入我们所需要的文本，本实验完成。