简单考试系统的实现
先来看一下我们需要实现的功能:
在这里我们可以看到在最上面要实现图片的点按功能;然后在每个选项卡中需要设置独立的布局;
首先我们要用到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即可将其中的每一个分页一并显示出来。
- TabHost常用组件
– 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;
– 添加选项卡 : addTab(tabSpec); - 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>
到这里我们的简单考试系统就基本实现了;当然还可以在现有的基础上进行美化或者增加新的功能;