基于eclipse的android项目实战—博学谷(十 一)习题界面

本项目是用eclipse软件编写,经过我的亲自实践,其真实有效,希望能给您有所帮助
项目版本:android5.1.1
AVD建议:android4.4.2及以上
若有不足之处或不对的地方,欢迎大佬们指点

文章目录

    • 效果图:
    • 1.导入界面图片
    • 2.新建习题界面布局文件`main_view_exercises.xml`
    • 3.习题界面Item
    • 4.创建ExercisesBean
    • 5.习题界面Adapter
    • 6.习题界面逻辑代码
    • 7.功能完善

效果图:

在这里插入图片描述

1.导入界面图片

将习题界面所需图片 exercises_bg_1.pngexercises_bg_2.pngexercises_bg_3.pngexercises_bg_4.png导入drawable文 件夹中
基于eclipse的android项目实战—博学谷(十 一)习题界面_第1张图片

2.新建习题界面布局文件main_view_exercises.xml

res/layout文件夹中新建main_view_exercises.xml文件,代码如下:

<?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" 
    android:background="@android:color/white" >
    <ListView
        android:id="@+id/lv_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="55dp"
        android:divider="#E4E4E4"
        android:dividerHeight="1dp" />
</LinearLayout>

3.习题界面Item

Item界面展示章节序号、章节名称以及该章节所包含的题目数量

res/layout文件夹中,创建一个布局文件exercises_list_item.xml

<?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:background="@android:color/white"
    android:orientation="horizontal"
    android:paddingBottom="15dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp" >
    
    <TextView
        android:id="@+id/tv_order"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:background="@drawable/exercises_bg_1"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="16sp" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dp"
        android:gravity="center_vertical"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="@string/tv_title"
            android:textColor="#000000"
            android:textSize="14sp" />
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:singleLine="true"
            android:text="@string/tv_content"
            android:textColor="#a3a3a3"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>

values文件夹下的string.xml文件里面输入文本信息:

	<string name="tv_title">1章Android基础入门</string>
    <string name="tv_content">共计5</string>

4.创建ExercisesBean

创建ExercisesBean类用来存放章节及习题所包含的相关属性
每个章节所包含的属性有章节Id、章节标题、习题数量、章节序号背景、习题Id、习题题干、习题的A选项、 B选项、C选项、D选项、正确答案以及被用户选中的选项等。

china.ynyx.heyunhui.bean包中创建一个ExercisesBean类,具体代码如下:

	package china.ynyx.heyunhui.bean;
	public class ExercisesBean {
	public int id;// 每章习题id
    public String title;// 每章习题标题
    public String content;// 每章习题的数目
    public int background;// 每章习题前边的序号背景
    public int subjectId;// 每道习题的Id
    public String subject;// 每道习题的题干
    public String a;// 每道题的A选项
    public String b;// 每道题的B选项
    public String c;// 每道题的C选项
    public String d;// 每道题的D选项
    public int answer;// 每道题的正确答案
    public int select;// 用户选中的那项(0表示所选项对了,1表示A选项错,2表示B选项错,3表示C选项错,4表示D选项错)
}

5.习题界面Adapter

创建一个数据适配器对ListView进行数据适配。
选中china.ynyx.heyunhui包,在该包下创建china.ynyx.heyunhui.adapter包,在.adapter包中创建一个ExercisesAdapter 类继承 BaseAdapter
基于eclipse的android项目实战—博学谷(十 一)习题界面_第2张图片
具体代码如下:ExercisesAdapter.java

package china.ynyx.heyunhui.adapter;

import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import china.ynyx.heyunhui.R;
import china.ynyx.heyunhui.bean.ExercisesBean;

public class ExercisesAdapter extends BaseAdapter {
	private Context mContext;
	private List<ExercisesBean> ebl;
	
	public ExercisesAdapter(Context context) {
		this.mContext = context;
	}
	
	//设置数据更新界面
	public void setData(List<ExercisesBean> ebl) {
		this.ebl = ebl;
		notifyDataSetChanged();
	}
	
	//获取Item的总数
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return ebl == null ? 0 : ebl.size();
	}

	/**
	 * 根据position得到对应Item的对象
	 */
	@Override
	public ExercisesBean getItem(int position) {
		return ebl == null ? null : ebl.get(position);
	}

	//根据position得到对应Item的id
	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	/**
	 * 得到相应position对应的Item视图,position是当前Item的位置,
	 * convertView参数就是滚出屏幕的Item的View
	 */
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		final ViewHolder vh;
		//复用convertView
		if (convertView == null) {
			vh = new ViewHolder();
			convertView = LayoutInflater.from(mContext).inflate(
					R.layout.exercises_list_item, null);
			vh.title = (TextView) convertView.findViewById(R.id.tv_title);
			vh.content = (TextView) convertView.findViewById(R.id.tv_content);
			vh.order = (TextView) convertView.findViewById(R.id.tv_order);
			convertView.setTag(vh);
		} else {
			vh = (ViewHolder) convertView.getTag();
		}
		//获取position对应的Item的数据对象
		final ExercisesBean bean = getItem(position);
		if (bean != null) {
			vh.order.setText(position + 1 + "");
			vh.title.setText(bean.title);
			vh.content.setText(bean.content);
			vh.order.setBackgroundResource(bean.background);
		}
		//每个Item的点击事件
		convertView.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				if (bean == null)
					return;
				//跳转到习题详情页面
			}
		});
		return convertView;
	}
	
	class ViewHolder {
		public TextView title, content;
		public TextView order;
	}
}

6.习题界面逻辑代码

习题界面主要用于展示《Android移动开发基础案例教程》1〜10章的习题。我们可以将数据信息封装到ExercisesBean对象中,在习题界面进行展示。
china.ynyx.heyunhui.view包中创建一个ExercisesView
具体代码如下:ExercisesView.java

package china.ynyx.heyunhui.view;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ListView;
import china.ynyx.heyunhui.R;
import china.ynyx.heyunhui.adapter.ExercisesAdapter;
import china.ynyx.heyunhui.bean.ExercisesBean;

public class ExercisesView {

	private ListView lv_list;
    private ExercisesAdapter adapter;
    private List<ExercisesBean> ebl;
    private Activity mContext;
    private LayoutInflater mInflater;
    private View mCurrentView;
    
    public ExercisesView(Activity context) {
        mContext = context;
        // 为之后将Layout转化为view时用
        mInflater = LayoutInflater.from(mContext);
    }
    private void createView() {
        initView();
    }
    /**
     * 初始化控件
     */
    private void initView() {
        mCurrentView = mInflater
                .inflate(R.layout.main_view_exercises, null);
        lv_list = (ListView) mCurrentView.findViewById(R.id.lv_list);
        adapter = new ExercisesAdapter(mContext);
        initData();
        adapter.setData(ebl);
        lv_list.setAdapter(adapter);
    }
    /**
     * 设置数据
     * 首先创建ExercisesBean对象,之后 将每一章的章节Id、章节标题、习题数量和序号背景存入ExercisesBean对象中
     */
    private void initData() {
        ebl = new ArrayList<ExercisesBean>();
        for (int i = 0; i < 10; i++) {
            ExercisesBean bean = new ExercisesBean();
            bean.id=(i + 1);
            switch (i) {
                case 0:
                    bean.title="第1章 Android基础入门";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_1);
                    break;
                case 1:
                    bean.title="第2章 Android UI开发";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_2);
                    break;
                case 2:
                    bean.title="第3章 Activity";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_3);
                    break;
                case 3:
                    bean.title="第4章 数据存储";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_4);
                    break;
                case 4:
                    bean.title="第5章 SQLite数据库";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_1);
                    break;
                case 5:
                    bean.title="第6章 广播接收者";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_2);
                    break;
                case 6:
                    bean.title="第7章 服务";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_3);
                    break;
                case 7:
                    bean.title="第8章 内容提供者";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_4);
                    break;
                case 8:
                    bean.title="第9章 网络编程";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_1);
                    break;
                case 9:
                    bean.title="第10章 高级编程";
                    bean.content="共计5题";
                    bean.background=(R.drawable.exercises_bg_2);
                    break;
                default:
                    break;
            }
            ebl.add(bean);
        }
    }
    /**
     * 获取当前在导航栏上方显示对应的View
     */
    public View getView() {
        if (mCurrentView == null) {
            createView();
        }
        return mCurrentView;
    }
    /**
     * 显示当前导航栏上方所对应的view界面
     */
    public void showView() {
        if (mCurrentView == null) {
            createView();
        }
        mCurrentView.setVisibility(View.VISIBLE);
    }
}

7.功能完善

(1)修改底部导航栏
由于习题界面是通过底部导航栏界面跳转的,因此需要在“我的模块”中找到MainActivity.java 文件中如下代码:

private ExercisesView mExercisesView;

如图:
基于eclipse的android项目实战—博学谷(十 一)习题界面_第3张图片
找到该文件的createView()方法,在注释"//习题界面"下方添加如下代码:

				if (mExercisesView == null) {
                    mExercisesView = new ExercisesView(this);
                    mBodyLayout.addView(mExercisesView.getView());
                } else {
                    mExercisesView.getView();
                }
                mExercisesView.showView();

基于eclipse的android项目实战—博学谷(十 一)习题界面_第4张图片


参考资料:《android项目实战——博学谷》(黑马程序员著)

你可能感兴趣的:(Android)