乐学成语——显示学习列表

     1.使类别名称的旁边都有一个图样，修改values中的strings.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">HappyIdiom</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="animal">动物</string>
    <string name="title_activity_main">MainActivity</string>
    <string name="title_study">学习</string>
    <string name="title_search">搜搜</string>
    <string name="title_game">游戏</string>
    <string name="title_save">收藏</string>
    <string name="title_help">帮助</string>

    <string-array name="category">
        <item>动物类</item>
        <item>自然类</item>
        <item>人物类</item>
        <item>季节类</item>
        <item>数字类</item>
        <item>寓言类</item>
        <item>其他类</item>
    </string-array>

</resources>

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

package cn.edu.bztc.happyidiom.entity;

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

  name代表种类的名字。imageId表示类别对应图片的资源id。

     3.在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:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"> 
    </ListView>
</RelativeLayout>

     4.为ListView的子项指定一个我们自定义的布局，在layout目录下新建category_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:padding="10dp"
    android:orientation="horizontal" >
    <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="wrap_content"
        android:text="@string/animal"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>

  在这个布局中，我们定义了一个ImageView用于显示类别的图片，又定义了一个TextView用于显示类别的名称。

     4.在包adapter下新建一个自定义适配器CategoryAdapter，继承自ArryAdapter，并将泛型指定为Category类。代码如下：

public class CategoryAdapter extends ArrayAdapter<Category> {
	private int resourceld;
	public CategoryAdapter(Context context,int resource,List<Category> objects){
		super(context,resource,objects);
		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.getImageld());
		viewHolder.categoryName.setText(category.getName());		
		return view;
	}
	class ViewHolder{
		ImageView categoryImage;
		TextView categoryName;
		
	}

}

     5.在activity包下新建StudyAcitvity类，继承自Activity，代码如下：

public class StudyActivity extends Activity {
	private List<Category>categoryList;
	private String[] category_names;
	private int[] category_image;
	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(){
				
				public void onItemClick(AdapterView<?> adapterView,View view,int position,long id) {
						
					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_image=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_image[i]));
		}		
	}
	public boolean onCreateOptionsMenu(Menu menu){	 
		getMenuInflater().inflate(R.menu.study,menu); 		
		return true;
	}
}

     6.修改AndroidManifest.xml文件，把StudyActivity变成入口类。运行程序并点击动物类，如图：

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

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000" 
    android:fromAlpha="0.0"
    android:toAlpha="1.0">   
</alpha>

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

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

    9. 修改activity_study.xml布局文件，代码如下：

<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:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"> 
    </ListView>
</RelativeLayout>

     8.将之前建立的主界面连起来。修改MainActivity，代码如下：

public class MainActivity extends TabActivity {
	private TabHost tabHost;
	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)));	
	}
	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;
	}
}

     10.通过Intent，将选项卡和对应的StudyActivity关联起来了。运行结果如图：