乐学成语——第三部分



1.（1）第三部分，以列表的形式显示出成语分类列表。对ListView的界面进行定制，让它可以显示更加丰富的内容。首先需要准备好一组图片，分别对应每一种类别，我们要让这些类别名称的旁边都有一个图样。修改values中的strings.xml文件。

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

  （2）接着定义一个实体类，作为ListView适配器的适配类型。在entity包下新建Category。Category类中只有两个字段，name表示种类的名字，imageId表示类别对应图片的资源id。

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

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><span style="font-family:KaiTi_GB2312;font-size:18px;"><ListView 
        android:id="@+id/lvCategories"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"      
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"> 
</ListView></span></strong></span>

   (4)然后需要为ListView的子项指定一个我们自定义的布局，在layout目录下新建category_item.xml。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><span style="font-family:KaiTi_GB2312;font-size:18px;"><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"/></span></strong></span><span style="font-family:KaiTi_GB2312;">
<span style="font-size:18px;"><strong></strong></span></span>

   在这个布局中，我们定义了一个ImageView用于显示类别的图片，又定义了一个TextView用于显示类别的名称。
  （5）创建adapter包，在该包下创建一个自定义的适配器，这个适配器继承自ArrayAdapter,并将泛型指定为Category类，新建类CategoryAdapter。CategoryAdapter重写了父类的一组构造函数，用于将上下文，ListView子项布局的id和数据都传递进来。另外又重写了getView()方法，这个方法在每个子项被滚动到屏幕内的时候会被调用。在getView方法中，首先通过getItem()方法得到当前项的Category实例，然后使用LayoutInflater来为这个子项加载我们传入的布局，接着调用View的findViewById()方法分别获取到ImageView和TextView的实例，并分别调用它们的setImageResource()和setText()方法来设置显示的图片和文字，最后将布局返回。

  （6）在activity包下新建StudyActivity继承自Activity。添加了一个initCategory()方法，用于初始化所有的类别数据。在Fruit类的构造函数中将类别的名字和对应的图片id传入，然后把创建好的对象添加到类别列表中，在onCreate()方法中创建了CategoryAdapter对象，并将CategoryAdapter作为适配器传递给了ListView。修改AndroidMainfest.xml文件将StudyActivity变为入口类。重新运行程序若出现这个界面则成功。只要修改category_item.xml中的内容，就可以修改定制各种复杂的界面了。

  2.（1）修改CategoryAdapter,插入即可。对getView()方法中进行判断，如果convertView为空，则使用LayoutInflater去加载布局，如果不空则直接对convertview进行重用。这样就大大提高了ListView的运行效率，在快速滚动的时候也可以表现出更好的性能。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>Category category=getItem(position);//获取当前项的Category实例
		View view;
		ViewHolder viewHolder;
		if(convertView==null){
			view=LayoutInflater.from(getContext()).inflate(resourceld, null);<pre class="html" name="code">}else {
			view=convertView;}</strong></span>

  （2）借助一个ViewHolder对这部分性能进行优化，修改CategoryAdapter中的代码。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>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
		}
</strong></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>                viewHolder.categoryImage.setImageResource(category.getImageld());
		viewHolder.categoryName.setText(category.getName());		
		return view;
	}
	class ViewHolder{
		ImageView categoryImage;
		TextView categoryName;
		
	}</strong></span>

   这样优化之后，ListView的运行效率就已经不错了。

  （3）如果ListView中的子项不能点击的话，这个控件就没有什么实际用途了。只需修改StudyActivity中的代码。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>             listView.setAdapter(adapter);
		listView.setOnItemClickListener(new OnItemClickListener(){
				
				public void onItemClick(AdapterView<?> adapterView,View view,int position,long id) {</strong></span><pre class="html" name="code"><span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>                               Category category=categoryList.get(position);			
			            Toast.makeText(StudyActivity.this, category.getName(),Toast.LENGTH_LONG).show();
				}
		});</strong></span>

   可以看出，我们使用了setOnItemClickListener()方法来为ListView注册了一个监听器，当用户点击了ListView中的任何一个子项时就会回调onItemClick()方法，在这个方法中可以通过position参数判断出用户点击的是哪一个子项，然后获取相应的类别，并通过Toast将类别的名字显示出来。显示以下页面即可。

  （4）接下来我们做怎么为界面增加淡入淡出的动画效果。在res目录下新建anim目录，在下面创建anim_listview.xml文件。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000" 
    android:fromAlpha="0.0"
    android:toAlpha="1.0">   
</alpha></strong></span>

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

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_listview"
    android:animationOrder="random"
    android:delay="0.2">
</layoutAnimation></strong></span>

上述代码主要是设置了布局动画，引用了之前的Alpha动画，设置每一项出现的时间间隔和出现的顺序。最后修改activity_study.xml布局文件。插入即可

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>        android:layout_height="wrap_content"      
        android:layoutAnimation="@anim/anim_layout_listview"</strong></span>

 （5）通过intent，将选项卡和对应的StudyActivity关联起来。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>             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);	
	}
	@SuppressWarnings("rawtypes")
	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)));	
	}</strong></span>