Android学习笔记七----简单考试系统的实现

简单考试系统的实现
先来看一下我们需要实现的功能：

在这里我们可以看到在最上面要实现图片的点按功能；然后在每个选项卡中需要设置独立的布局;
首先我们要用到TabHost布局，TabHost是整个Tab的容器，包括两部分，TabWidget和FrameLayout。TabWidget就是每个tab的标签，FrameLayout则是tab内容。
TabWidget通过切换多个标签从而显示出多个不同内容，能够展示内容丰富的页面信息，而且彼此之间不会干扰，有利于展示。
要使用TabHost,首先需要通过getTabHost方法来获取TabHost的对象，然后通过addTab方法来向TabHost中添加 Tab。当然每个Tab在切换时都会产生一个事件，要捕捉这个事件需要设置TabActivity的事件监听 setOnTabChangedListener。

先来进行布局设计：
在主布局文件下应用TabHost布局，先应用TabWidget来设置标签卡，然后在后面设置FrameLayout；在FrameLayout中通过设置多个LinearLayout来实现每个标签卡中所需要显示的内容；代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mytabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </TabWidget>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--单选题-->
            <LinearLayout
                android:id="@+id/llsingle"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="你现在住在哪个省？"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                </TextView>
                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <RadioButton
                        android:text="A、江苏省"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    </RadioButton>
                    <RadioButton
                        android:text="B、浙江省"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    </RadioButton>
                    <RadioButton
                        android:text="C、山东省"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    </RadioButton>
                    <RadioButton
                        android:text="D、陕西省"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    </RadioButton>
                </RadioGroup>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/llmulti"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="你的爱好有："
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <CheckBox
                    android:text="A、篮球"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <CheckBox
                    android:text="B、足球"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <CheckBox
                    android:text="C、游泳"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <CheckBox
                    android:text="D、排球"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/llblank"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="你的电话号码为："
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/llgudge"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="你结婚了吗？"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <RadioGroup
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <RadioButton
                        android:text="未婚"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>
                    <RadioButton
                        android:text="已婚"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>
                </RadioGroup>
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

```java
在这里插入代码片

需要注意的是：在这里的TabWidget和FrameLayout的id在Android中是有固定格式的，不能进行自定义的；
TabWidget必须设置android:id为@android:id/tabs
FrameLayout需要设置android:id为@android:id/tabcontent
但是TabHost的id是可以进行自定义的；
在布局中应用RadioGroup和RadioButton来实现单选的样式；
应用CheckBox实现多选；
应用EditText实现内容的输入；
我们的Activity文件中对tabhost的功能的实现；
TabHost相当于浏览器中浏览器分布的集合，而Tabspec则相当于浏览器中的每一个分页面。在Android中，每一个TabSpec分布可以是一个组件，也可以是一个布局，然后将每一个分页装入TabHost中，TabHost即可将其中的每一个分页一并显示出来。

1. TabHost常用组件
   – 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;
   – 添加选项卡 : addTab(tabSpec);
2. TabHost使用步骤
   a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;
   b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;
   c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;
   d. 创建添加选项卡 : 通过TabHost创建添加选项卡;
   通过定义TabHost来实现对tabhost的调用；
   代码如下：

package com.example.lesson6_exam;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    TabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.main);
        initView();
        tabHost.setup();//运行tabHost
        Drawable drawable1 = getResources().getDrawable(R.mipmap.no__1);//将图片转化为Drawable类型
        //下面创建TabSpec
        TabHost.TabSpec TabSpec1 = tabHost.newTabSpec("tab1").setIndicator(getTabItem(R.mipmap.no__1,"单选题")).setContent(R.id.llsingle);
        tabHost.addTab(TabSpec1);
        Drawable drawable2 = getResources().getDrawable(R.mipmap.no__2);
        TabHost.TabSpec TabSpec2 = tabHost.newTabSpec("tab2").setIndicator(getTabItem(R.mipmap.no__2,"多选题")).setContent(R.id.llmulti);
        tabHost.addTab(TabSpec2);
        Drawable drawable3 = getResources().getDrawable(R.mipmap.no__3);
        TabHost.TabSpec TabSpec3 = tabHost.newTabSpec("tab3").setIndicator(getTabItem(R.mipmap.no__3,"填空题")).setContent(R.id.llblank);
        tabHost.addTab(TabSpec3);
        Drawable drawable4 = getResources().getDrawable(R.mipmap.no__4);
        TabHost.TabSpec TabSpec4 = tabHost.newTabSpec("tab4").setIndicator(getTabItem(R.mipmap.no__4,"判断题")).setContent(R.id.llgudge);
        tabHost.addTab(TabSpec4);
        tabHost.setCurrentTab(1);//设置默认页

        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {//设置弹窗提示
                if (tabId.equals("tab1")){
                    Toast.makeText(MainActivity.this,"你选择了单选题",Toast.LENGTH_SHORT).show();
                }
                if (tabId.equals("tab2")){
                    Toast.makeText(MainActivity.this,"你选择了多选题",Toast.LENGTH_SHORT).show();
                }
                if (tabId.equals("tab3")){
                    Toast.makeText(MainActivity.this,"你选择了填空题",Toast.LENGTH_SHORT).show();
                }
                if (tabId.equals("tab4")){
                    Toast.makeText(MainActivity.this,"你选择了判断题",Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
    void initView(){
        tabHost = this.findViewById(R.id.mytabhost);

    }

    public View getTabItem(int imgID,String info){
        LinearLayout ll = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.tabicon,null);
        //将文本和图片的两个内容映射到这个方法中
        ImageView img = (ImageView) ll.findViewById(R.id.img);
        img.setBackgroundResource(imgID);
        TextView tv = ll.findViewById(R.id.tv);
        tv.setText(info);
        return ll;
    }
}

在这里我们的tab卡需要的形式如下图所示：

图片+文字的形式：
我们需要在布局文件中定义新的布局来完成：
在新的布局文件中我们需要在LinearLayout实现图片+文字，所以在里面放入ImageView和TextView两个组件；并设置相应的大小；
代码如下：

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

    <ImageView

        android:layout_gravity="center"
        android:id="@+id/img"
        android:background="@mipmap/no__1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_gravity="center"
        android:id="@+id/tv"
        android:text="单选题"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

到这里我们的简单考试系统就基本实现了；当然还可以在现有的基础上进行美化或者增加新的功能；