实例4 帧布局结构的学习

在本小节中,通过FrameLayout帧布局的应用,构建了一个饮食介绍的界面。并通过本程序的实现,来向读者介绍FrameLayout帧布局的具体应用。

【实例描述】

该小节构建了一个饮食介绍的小程序,在本程序中可以显示需要的信息。在网页的右下角有一个“退出”按钮,单击“退出”按钮,即可退出网页。本实例的运行效果图,如图2-4所示。

图2-4 饮食介绍小网页

提示:本程序的功能是显示信息到主界面,并且可以单击“退出”按钮退出本程序,如图2-4所示。

【实现过程】

本程序的开发主要运用了FrameLayout帧布局的相关知识。帧布局是最简单的布局之一,采用帧布局的容器中无论放入多少个控件,默认情况下控件都对齐到容器的左上角。

如果控件一样大,同一时刻只能见到最上面的一个控件。

【代码解析】

首先为读者介绍本程序的主界面main.xml的开发,代码如下。

代码位置:见随书光盘中源代码/第2章/Sample2_4/ res/layout目录下的main.xml。

    1   <?xml version="1.0" encoding="utf-8"?>
    2   <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3        android:layout_width="fill_parent"
    4        android:layout_height="fill_parent"
    5        android:background="#edab4a"
    6        android:id="@+id/fl">
    7        <LinearLayout
    8            android:orientation="vertical"
    9            android:layout_width="fill_parent"
    10           android:layout_height="fill_parent"
    11           android:id="@+id/cc">
    12           <LinearLayout
    13               android:orientation="horizontal"
    14               android:layout_width="fill_parent"
    15               android:layout_height="40dip"
    16               android:id="@+id/tt"
    17               android:background="@drawable/title">
    18               <TextView
    19               android:text=
    20               "土豆白菜汤的做法 … …"
    21               android:layout_width="fill_parent"
    22               android:layout_height="wrap_content"
    23               android:id="@+id/t"
    24               android:textColor="#FF0000"
    25               android:gravity="center"
    26               android:textSize="30dip">
    27               </TextView>                        <!--TextView控件-->
    28           </LinearLayout>                        <!--LinearLayout-->
    29           <LinearLayout
    30               android:orientation="horizontal"
    31               android:gravity="center_horizontal"
    32               android:layout_width="fill_parent"
    33               android:layout_height="wrap_content"
    34               android:id="@+id/tt">
    35               <TextView
    36               android:text="... ..."
    37               android:layout_width="fill_parent"
    38               android:layout_height="wrap_content"
    39               android:id="@+id/t"
    40               android:textColor="#FF0000">
    41               </TextView>                        <!--TextView控件-->
    42           </LinearLayout>                        <!--LinearLayout-->
    43       </LinearLayout>                            <!--LinearLayout-->
    44       <LinearLayout
    45           android:layout_width="fill_parent"
    46           android:layout_height="fill_parent"
    47           android:id="@+id/lllll"
    48           android:gravity="bottom|right">
    49           <Button
    50               android:text="退出"
    51               android:id="@+id/b"
    52               android:layout_width="wrap_content"
    53               android:layout_height="wrap_content">
    54           </Button>                                  <!--Button控件-->
    55       </LinearLayout>                                 <!--LinearLayout-->
    56  </FrameLayout>

上面已经介绍了本程序主界面main.xml的开发,接下来为读者介绍本程序具体功能的实现,代码如下。

代码位置:见随书光盘中源代码/第2章/Sample2_4/src/com/bn/ex2d目录下的Sample2_4_Activity.class。

    1   package com.bn. ex2d;                           //包名
    2   import android.app.Activity;                    //包引用声明,该处有所省略,读者可自行查看随书光盘源代码
    3   public class Sample2_4_Activity extends Activity {  //该类继承自Activity类
    4      public void onCreate(Bundle savedInstanceState){    //onCreate方法
    5          super.onCreate(savedInstanceState);           //继承父类的onCreate方法
    6          setContentView(R.layout.main);                //界面跳转到main.xml界面
    7          Button b=(Button)this.findViewById(R.id.b);   //获取Button按钮
    8          b.setOnClickListener(                        //为Button按钮添加监听器
    9            new OnClickListener(){
    10                    public void onClick(View v){
    11                        System.exit(0);           //当单击Button按钮时,退出程序
    12               }}
    13        );
    14  }}

提示:在该xml文件中实现了布局的设置。总的布局为FrameLayout布局,其中包括一个垂直模式的LinearLayout线性布局和一个gravity设置为bottom和right的LinearLayout线性布局。通过对各个控件的属性设置,实现了该小软件的界面效果。

提示:在Activity类中,获取了按钮对象,并对其添加了按钮监听器,实现了单击按钮后退出程序的功能。