个人完成案例之乐学成语（显示学习列表和连接主界面）

个人完成案例之乐学成语（显示学习列表和连接主界面）

做完了显示主界面，接下来我们完成显示学习列表页面。

修改values中的Strings.xml文件如下：

<span style="font-size:14px;"><string-array name="category">
<item>动物类</item>
<item>自然类</item>
<item>人物类</item>
<item>季节类</item>
<item>数字类</item>
<item>寓言类</item>
<item>其他类</item>
</string-array></span>

定义一个ListView适配器的实体类。在entity包下新建类Category，代码如下：

package com.edu.happyidiom.entity;

public class Category {
private String name;//类别名称
private int imageId;//类别对应的图片
public Category(String name, int imageId) {
super();
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}

在layout下新建activity_study.xml文件，主要添加了一个ListView控件。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_ling"
tools:context=".StudyActivity" >

<ListView
android:id="@+id/lvCategories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layoutAnimation="@anim/anim_layout_listview"
android:listSelector="#00000000"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" >
</ListView>

</RelativeLayout>

在layout下新建category_item.xml文件，为ListView控件指定一个我们自定义的布局（在这个布局中，我们定义了一个ImageView用来显示类别的图片，定义了一个TextView用来显示类别的名称）。

<?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="horizontal"
android:padding="10dp"
>
<ImageView
android:id="@+id/category_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/category_animal"
/>

<TextView
android:id="@+id/category_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/animal"
android:gravity="center"
android:textAppearance="?@android:attr/textAppearanceLarge"
/>

</LinearLayout>

接下来我们需要在应用的包下创建adapter包，在该包下创建一个自定义的适配器CategoryAdapter继承自ArrayAdapter,并将泛型指定为Category类。（在CategoryAdapter类中新增内部类ViewHolder,用于对控件的实例进行缓存，getView()方法中的convertView参数用于将之前加载好的布局进行缓存，若convertView为空，则使用LayoutInflater去加载布局，若不为空则直接对convertView进行重用）

package com.edu.happyidiom.adapter;

import java.util.List;

import com.edu.happyidiom.entity.Category;
import com.example.happyidiom.R;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CategoryAdapter extends ArrayAdapter<Category>{
private int resourceld;

public CategoryAdapter(Context context, int resource,
List<Category> objects) {
super(context, resource, objects);
// TODO Auto-generated constructor stub
resourceld=resource;
}
public View getView(int position,View convertView,ViewGroup parent){
Category category=getItem(position);//获取当前项的Category实例
View view;
ViewHolder viewHolder;
if(convertView==null){
view=LayoutInflater.from(getContext()).inflate(resourceld, null);//为子项加载传入的布局
viewHolder=new ViewHolder();
viewHolder.categoryImage=(ImageView) view.findViewById(R.id.category_image);
viewHolder.categoryName=(TextView) view.findViewById(R.id.category_name);
view.setTag(viewHolder);//将ViewHolder存储在View中
}else{
view=convertView;
viewHolder=(ViewHolder) view.getTag();//重新获取ViewHolder
}
viewHolder.categoryImage.setImageResource(category.getImageId());//显示图片
viewHolder.categoryName.setText(category.getName());//显示文字
return view;
}
class ViewHolder{
ImageView categoryImage;
TextView categoryName;
}
}

在Activity包下新建StudyActivity继承自Activity。（在StudyActivity中使用setOnItemClickListener()方法注册了一个监听器，当用户点击了ListView中的任何一个子项就会回调onItemClick()方法，在这个方法中可以通过position参数判断出用户点击的是哪一个子项，然后获取到相应的类别，并通过Toast将类别的名字显现出来。）

<span style="font-size:14px;">package cn.edu.bztc.happyidiom.activity;

import java.util.ArrayList;
import java.util.List;

import com.example.happyidiom.R;

import cn.edu.bztc.happyidiom.activity.adapter.CategoryAdapter;
import cn.edu.bztc.happyidiom.entity.Category;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.content.res.Resources;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class StudyActivity extends Activity {
private List<Category> categoryList;
private String[] category_names;
private int[] category_images;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_study);
initCategories();
CategoryAdapter adapter = new CategoryAdapter(this,
R.layout.category_item, categoryList);
ListView listView = (ListView) findViewById(R.id.lvCategories);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> adapterView, View view,
int position, long id) {
// TODO Auto-generated method stub
Category category = categoryList.get(position);
Toast.makeText(StudyActivity.this, category.getName(),
Toast.LENGTH_LONG).show();
}

});
}

private void initCategories() {
// TODO Auto-generated method stub
categoryList = new ArrayList<Category>();
Resources resources = getResources();
category_names = resources.getStringArray(R.array.category);
category_images = new int[] { R.drawable.category_animal,
R.drawable.category_nature, R.drawable.category_human,
R.drawable.category_season, R.drawable.category_number,
R.drawable.category_fable, R.drawable.category_other };
for (int i = 0; i < category_names.length; i++) {
categoryList
.add(new Category(category_names[i], category_images[i]));
}
}

}</span>

最后修改AndroidManifest.xml文件将StudyActivity变为入口类。

<span style="font-size:14px;"><activity
android:name="com.example.happyidiom.StudyActivity"
android:label="@string/title_activity_study" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity></span>

这样，显示学习列表页面就完成了，运行效果如图：

连接主界面

<strong><span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:toAlpha="1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
</alpha></span></strong>

<strong><span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/anim_listview"
android:animationOrder="random"
android:delay="0.2"
>
</layoutAnimation></span></strong>

<span style="font-size:12px;"><strong><span style="font-size:14px;">package com.example.happyidiom.activity;

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.view.Menu;
import android.view.Window;
import android.widget.TabHost;

public class MainActivity extends TabActivity {
private TabHost tabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
tabHost=getTabHost();
addTab("study", R.string.title_study, R.drawable.study,StudyActivity.class);
addTab("search", R.string.title_search, R.drawable.search, StudyActivity.class);
addTab("game", R.string.title_game, R.drawable.game, StudyActivity.class);
addTab("save", R.string.title_save, R.drawable.save, StudyActivity.class);
addTab("help", R.string.title_help, R.drawable.help, StudyActivity.class);
}
private void addTab(String tag,int title_introduction,int title_icon,Class ActivityClass){
tabHost.addTab(tabHost.newTabSpec(tag)
.setIndicator(getString(title_introduction),
getResources().getDrawable(title_icon))
.setContent(new Intent(this,ActivityClass)));
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}</span></strong></span>