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

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

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

• 修改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>

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

连接主界面

• 为界面增加淡入淡出的动画效果。
  • 在res目录下新建anim目录，在下面创建anim_listview.xml文件，代码如下：

  • <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>

  • 设置了一个Alpha动画，从无到有的过程。创建anim_layout_listview.xml文件，代码如下：

  • <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>

• 将代码android:layoutAnimation="@anim/anim_layout_listview"添加到Study_Activity.xml文件中。
• 修改MainActicity文件，代码如下：

• <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>

  运行效果如图：
• 
  
• 运行过程中出现错误：
• 在运行过程中学习列表页面与主界面一直不能连接，程序直接运行到学习列表页面。
• 解决方法：打开AndroidManifest.xml文件，删掉StudyActivity的入口类，将MainActivity修改为入口类，保存之后运行成功。