移动应用开发技术-实验2.4

结合 FrameLayout 与 TabHost 实现类似如图 16 所示程序界面和底部菜单栏功能。底部

菜单栏有 5 个按钮，程序启动时默认进入主页按钮页面，只有一个 imageview 控件用来展示

一个网页图像。按底部不同的按钮，可以在不同的界面切换。此外，每个按钮具有两个不同

的状态。其他界面分别采用线性布局、相对布局、表布局与网格布局设计，具体界面内容见

图 17~ 图 20 。图中采用的图片可以不同。（几乎是要将学过的布局文件全部结合起来，操作相对难一些）

主页放一个图片很好解决，采用相对布局或者线性布局都可。其他页面需要什么样的布局显示就要采取什么样的布局文件，这块用到了LinearLayout,RelativeLayout,TableLayout和GridLayout，不知道这些布局的可以上网或者翻书查一查使用这些布局的属性。由于TabHost是以框架布局为框架的，所以使用TabHost时要采用框架布局，还要为其添加TabWidget属性，具体布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--实现底部导航-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/zhuye"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_horizontal">
                <ImageView
                    android:id="@+id/picture"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/test1"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/xianxing"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="用户名:"
                    android:gravity="left"
                    android:textSize="30dp"/>
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <Button
                        android:id="@+id/open"
                        android:layout_width="150dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="2.0"
                        android:text="取消" />
                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:alpha="0"
                        android:layout_weight="1.0"/>

                    <Button
                        android:id="@+id/save"
                        android:layout_width="150dp"
                        android:layout_height="wrap_content"
                       android:layout_weight="2.0"
                        android:text="确认" />
                </LinearLayout>
            </LinearLayout>

            <RelativeLayout
                android:id="@+id/edit"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/text"
                    android:textSize="30dp"
                    android:text="用户名："
                    android:gravity="left"/>
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/text"
                    android:id="@+id/edittext"/>

                <Button
                    android:id="@+id/cancel"
                    android:layout_width="150sp"
                    android:layout_toRightOf="@+id/ok"
                    android:layout_marginLeft="10dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/edittext"
                    android:text="取消" />

                <Button
                    android:id="@+id/ok"
                    android:layout_width="150sp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="100dp"
                    android:layout_below="@+id/edittext"
                    android:text="确认" />
            </RelativeLayout>

            <TableLayout
                android:id="@+id/seek"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TableRow>
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textSize="24sp"
                    android:text="用户名:"
                    android:gravity="center"
                    android:paddingBottom="12dp"/>
                <EditText
                    android:id="@+id/edit1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                </TableRow>
                <TableRow>
                <Button
                    android:id="@+id/seekbut1"
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="50dp"
                    android:text="确认" />
                    <Button
                        android:id="@+id/seekbut2"
                        android:layout_width="150dp"
                        android:layout_marginLeft="10dp"
                        android:layout_height="wrap_content"
                        android:text="取消" />
                </TableRow>
            </TableLayout>

            <GridLayout
                android:id="@+id/time"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:rowCount="4"
                android:columnCount="4"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="用户名："
                    android:layout_row="0"
                    android:layout_columnSpan="1"
                    android:textSize="30dp"/>
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_row="0"
                    android:layout_columnSpan="2"/>
                <TextView
                    android:layout_row="1"
                    android:layout_column="0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="    密码："
                    android:layout_columnSpan="1"
                    android:textSize="30dp"/>
                <EditText
                    android:layout_row="1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_columnSpan="2"/>
                <Button
                    android:layout_row="2"
                    android:layout_width="120dp"
                    android:layout_height="wrap_content"
                    android:text="清空输入"
                    android:layout_columnSpan="1"/>
                <Button
                    android:layout_row="2"
                    android:layout_width="120dp"
                    android:layout_height="wrap_content"
                    android:text="下一步"
                    android:layout_columnSpan="1"/>
            </GridLayout>
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_weight="0" />
    </LinearLayout>
</TabHost>

每个小布局中的元素排列情况遵守实验报告上额排列情况，除此之外，点击下面的底部选项卡时还会有提示产生。具体java中代码如下：

package com.example.myapplication4;

import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private TabHost myTabHost;                    //定义TabHost
    private int[] layRes = {R.id.xianxing, R.id.edit, R.id.seek, R.id.time,R.id.zhuye};//定义内嵌布局管理器ID
    private Button openButton;

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.open:
                Toast.makeText(MainActivity.this, "这是打开取消按钮", Toast.LENGTH_LONG).show();
                break;
        }
    }


    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_three);    //调用默认布局管理器
        myTabHost = findViewById(R.id.tabhost); //取得TabHost对象

        myTabHost.setup();
        //建立TabHost对象
        TabSpec myTab1 = myTabHost.newTabSpec("线性布局");    //定义TabSpec
        myTab1.setIndicator("线性布局");                            //设置选项文字
        myTab1.setContent(layRes[0]);                //设置显示的组件
        myTabHost.addTab(myTab1);                    //增加选项

        TabSpec myTab2 = myTabHost.newTabSpec("相对布局");    //定义TabSpec
        myTab2.setIndicator("相对布局").setContent(layRes[1]);                //设置显示的组件
        myTabHost.addTab(myTab2);                    //增加选项

        TabSpec myTab3 = myTabHost.newTabSpec("表布局");    //定义TabSpec
        myTab3.setIndicator("表布局").setContent(layRes[2]);                //设置显示的组件
        myTabHost.addTab(myTab3);                    //增加选项

        TabSpec myTab4 = myTabHost.newTabSpec("网格布局")    //定义TabSpec
                .setIndicator("网格布局")                   //设置选项文字
                .setContent(layRes[3]);                //设置显示的组件
        myTabHost.addTab(myTab4);

        TabSpec myTab5 = myTabHost.newTabSpec("主页")    //定义TabSpec
                .setIndicator("主页")                   //设置选项文字
                .setContent(layRes[4]);                //设置显示的组件
        myTabHost.addTab(myTab5);



        myTabHost.setCurrentTab(4);                //设置开始默认选项
        openButton = findViewById(R.id.open);
        openButton.setOnClickListener(this);
        //选项切换事件处理，setOnTabChangedListener
        myTabHost.setOnTabChangedListener(new OnTabChangeListener() {
            public void onTabChanged(String tabId) {
                Dialog dialog = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("提示")
                        .setMessage("当前选中：" + tabId + "选项")
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int whichButton) {
                                dialog.cancel();
                            }
                        }).create();//创建按钮
                dialog.show();
            }
        });
    }
}