移动开发技术（Android）——实验2 Android布局管理器的应用

一、实验目的

1．掌握几种布局管理器的特点；
2．掌握几种布局管理器定义的语法格式；
3．掌握几种布局管理器常用XML属性；
4．掌握布局创建的步骤；
5．掌握View类的常用属性及属性设置方法。

二、实验内容

（一）创建一个Android项目，名称为“shiyan0201_专业_×××”

（1）界面构成：1个文本框用于显示文本内容；
（2）程序功能：程序运行后，文本框中的文本内容显示为学生本人的学号、姓名、班级，颜色为非黑色，字号30sp。
（3）实验报告中要求用语言描述具体的实验步骤，并附以截图做辅助说明。

1.文字说明

a.首先创建一个名为“shiyan0201_专业_×××”的android application
b.在xml布局文件中添加一个TextView文本框，设置id为android:id="@+id/tv"。
c.在JAVA文件中对TextView的内容、颜色、大小进行设置。

2.代码

xml文件代码

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="zheli" 
       />

</RelativeLayout>

MainActivity.java文件代码

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView tv = (TextView)findViewById(R.id.tv);
        tv.setText("xxxxxxxxx");
        tv.setTextColor(Color.BLUE);
        tv.setTextSize(30);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

（二）创建一个Android项目，名称为“shiyan0202_专业_×××”

（1）在res\layout目录下创建5个布局文件，名称分别为“linearlayout.xml”、“relativelayout.xml”、“tablelayout.xml”、“framelayout.xml”、“gridlayout.xml”；
（2）为每个布局文件进行界面代码编写，界面效果见课件“2 Android布局管理”的【例1】—【例5】；
（3）实验报告中要求用语言描述具体的实验步骤，并附以截图做辅助说明。

①linearlayout.xml

①linearlayout.xml

首先插入一个button1，权重设置为40%.
然后再插入线性布局管理器，权重设置为40%水平方向,背景颜色为浅绿色。
在这个线性布局管理器中插入两个按钮button4和button5.
再插入两个按钮button2（不设权重）和button3（权重40%）.

<?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:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" 
            android:layout_weight="0.4"/>

        <LinearLayout
            android:layout_width="305dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.40"
            android:background="#6b8e23"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="Button4" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|right"
                android:text="Button5" 
                android:layout_weight="0.9"
                />
        </LinearLayout>
        
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
         />
        
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" 
            android:layout_weight="0.2"/>
        
</LinearLayout>

②relativelayout.xml

②relativelayout.xml

首先插入16个button，分为命名为Bt1——Bt16.
Bt1不做设置，Bt2水平居中，Bt3与布局管理器右对齐，
Bt4垂直居中，Bt5水平垂直居中，Bt6垂直居中且与布局管理器右对齐，
Bt7在布局管理器左下角，Bt8在布局管理器底部且水平居中，Bt9在布局管理器右下角，
Bt10在Bt2的下方、Bt5的上方、Bt1的右侧并与Bt2右边界对齐，
Bt11在Bt10下侧、Bt4右侧、Bt5左侧、Bt7上侧
Bt12在Bt11右侧、Bt5左侧且与Bt11中线对齐。

<?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" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bt1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Bt2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Bt3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Bt4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Bt5" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Bt5" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Bt7" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Bt8" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Bt9" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button5"
        android:layout_alignRight="@id/button2"
        android:layout_below="@id/button2"
        android:layout_toRightOf="@id/button1"
        android:text="Bt10" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button8"
        android:layout_below="@id/button10"
        android:layout_toLeftOf="@id/button5"
        android:layout_toRightOf="@id/button4"
        android:text="Bt11" />

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_toRightOf="@id/button11"
        android:layout_below="@id/button5"
        android:layout_alignBaseline="@id/button11"
        android:layout_toLeftOf="@id/button6"

        android:text="Bt12" />

</RelativeLayout>

③tablelayout.xml

③tablelayout.xml

在table布局管理器中，插入两行分别设置textView内容为“点a/b”，EditText两个并设置hint内容为“x/y”，最后添加一个button内容为“确定”。

<?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,2" >

    <TableRow>

        <TextView android:text="点a：" />

        <EditText android:hint="x" />

        <EditText android:hint="y" />
    </TableRow>

    <TableRow>

        <TextView android:text="点b：" />

        <EditText android:hint="x" />

        <EditText android:hint="y" />
    </TableRow>

    <Button android:text="确定" />

</TableLayout>

④framelayout.xml

④framelayout.xml

首先为framelayout添加一个前景图片android:foreground="@drawable/ic_launcher"
之后依次设置三个TextView，第1个宽高设置为280dp, 第2个宽高设置为230dp, 第3个宽高设置为180dp
layout_gravity设置为"center"，背景颜色分别设置为"#ff0000"、"#00ff00"、"#0000ff"

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/ic_launcher"
    android:foregroundGravity="bottom|right" >

    <TextView
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:layout_gravity="center"
        android:background="#ff0000" />

    <TextView
        android:layout_width="230dp"
        android:layout_height="230dp"
        android:layout_gravity="center"
        android:background="#00ff00" />

    <TextView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"
        android:background="#0000ff" />

</FrameLayout>

⑤gridlayout.xml

⑤gridlayout.xml

创建一个网格布局管理器，列数设置为4
之后添加16个button，分别命名为bt1——bt16
第一个button前添加三个<space>，bt12和bt13后分别添加一个<space>
Bt13跨两列，并且layout_gravity设置为"填充"
Bt15跨两行，并且layout_gravity设置为"垂直填充"
Bt16跨三行，并且layout_gravity设置为"水平填充"

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4" >

    <Space />

    <Space />

    <Space />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt4" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt5" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt6" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt7" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt8" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt9" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt10" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt11" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt12" />

    <Space />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="bt13" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bt14" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_vertical"
        android:layout_rowSpan="2"
        android:text="bt15" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:layout_gravity="fill_horizontal"
        android:text="bt16" />

    <Space />

    <Space />

    <Space />

    <Space />

</GridLayout>