乐学成语实现之三：显示学习列表(注意ListView的细节优化）

最新推荐文章于 2021-05-27 01:44:51 发布

在装睡的醒醒君

最新推荐文章于 2021-05-27 01:44:51 发布

阅读量845

点赞数

分类专栏： Android基础

本文链接：https://blog.csdn.net/lsy2996238882/article/details/51582129

版权

Android基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在第三阶段中，我们就要以列表的形式显示出成语分类列表了。现在就来对ListView的界面进行定制，让它可以显示更加丰富的内容。

首先需要准备好一组图片，分别对应每一种类别，我们要让这些类别名称的旁边都有一个图样。准备好文字资源，修改values中的strings.xml文件如下：

<pre name="code" class="html"><pre name="code" class="html" style="font-size:24px;"><span style="font-size:32px;font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-size:24px;font-family: Arial, Helvetica, sans-serif;">       </span><pre name="code" class="html"><string-array name="category">
	    <item>动物类</item>
	    <item>自然类</item>
	    <item>人物类</item>
	    <item>季节类</item>
	    <item>数字类</item>
	    <item>寓言类</item>
	    <item>其他类</item>
	</string-array>

接着定义一个实体类，作为ListView适配器的适配类型，在entity包下新建类Category,代码如下所示：

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;
	}
}

Category类中只有两个字段，name代表种类的名字，imageId代表类别对应图片的资源id。

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

<?xml version="1.0" encoding="utf-8"?>
<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>

然后需要为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="match_parent"
	    android:layout_height="wrap_content"
	    android:text="@array/category"
	    android:gravity="center"
	    android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>

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

接下来需要在应用的包下创建adapter包，在该包下创建一个自定义的适配器，这个适配器继承自ArrayAdapter,并将泛型指定为Category类。新建类CategoryAdapter,代码如下所示：

public class CategoryAdapter extends ArrayAdapter<Category>{

	private int resourceId;
	public CategoryAdapter(Context context, int resource, List<Category> objects) {
		super(context, resource, objects);
		resourceId = resource;
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Category category = getItem(position);//获取当前项的Category实例
		View view = LayoutInflater.from(getContext()).inflate(resourceId, null);
		ImageView categoryImage = (ImageView) view.findViewById(R.id.category_image);
		TextView categoryName = (TextView) view.findViewById(R.id.category_name);
		categoryImage.setImageResource(category.getImageId());
		categoryName.setText(category.getName());
		return view;
	}

}

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

下面在activity包下新建StudyActivity继承自Activity,代码如下所示：

public class StudyActivity extends Activity {

	private List<Category> categoryList;
	private String[] category_names;
	private int[] category_images;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		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);
	}

	private void initCategories() {
		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]));
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.study, menu);
		return true;
	}
}

可以看到，这里添加了一个initCategories()方法，用于初始化所有的类别数据。在Fruit类的构造函数中将类别的名字和对应的图片id传入，然后把创建好的对象添加到类别列表中。接着我们在onCreate()方法中创建了CategoryAdapter对象，并将CategoryAdapter作为适配器传递给了ListView。这样定制ListView界面的任务就完成了。

在运行程序之前，首先修改AndroidManifest.xml文件将StudyActivity变成入口类，现在重新运行程序，效果如图所示：

虽然目前我们定制的界面还是很简单，但是相信聪明的你已经领悟到了诀窍，只要修改category_item.xml中的内容，就可以定制出各种复杂的界面了。

之所以说ListView 这个控件很难用，就是因为它有很多的细节可以优化，其中运行效率就是很重要的一点。目前我们ListView的运行效率是很低的，因为在CategoryAdapter的getView()方法中每次都将布局重新加载了一遍，当ListView快速滚动的时候这就会成为性能的瓶颈。

仔细观察，getView()方法中还有一个convertView参数，这个参数用于将之前加载好的布局进行缓存，以便之后可以进行重用，修改CategoryAdapter中的代码，如下所示：

public class CategoryAdapter extends ArrayAdapter<Category>{

	private int resourceId;
	public CategoryAdapter(Context context, int resource, List<Category> objects) {
		super(context, resource, objects);
		resourceId = resource;
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Category category = getItem(position);//获取当前项的Category实例
		View view;
		if(convertView == null){
			view = LayoutInflater.from(getContext()).inflate(resourceId, null);
		}else{
			view = convertView;
		}
		ImageView categoryImage = (ImageView) view.findViewById(R.id.category_image);
		TextView categoryName = (TextView) view.findViewById(R.id.category_name);
		categoryImage.setImageResource(category.getImageId());
		categoryName.setText(category.getName());
		return view;
	}

}

可以看到，现在我们在getView()方法中进行判断，如果convertView为空，则使用LayoutInflater去加载布局，如果不为空则直接对convertView进行重用。这样就大大提高了ListView的运行效率，在快速滚动的时候也可以表现出更好的性能。

不过，目前我们的这份代码还是可以继续优化的，虽然现在已经不会再重复去加载布局，但是每次在geiView()方法中还是会调用View的findViewById()方法来获取一次控件的实例。我们可以借助一个ViewHolder来对这部分性能进行优化，修改CategoryAdapter中的代码，如下所示：

public class CategoryAdapter extends ArrayAdapter<Category> {

	private int resourceId;

	public CategoryAdapter(Context context, int resource, List<Category> objects) {
		super(context, resource, objects);
		resourceId = resource;
	}

	@Override
	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(resourceId, 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;

	}
}

我们新增了一个内部类ViewHolder，用于对控件的实例进行缓存。当convertView为空的时候，创建一个ViewHolder对象，并对控件的实例都存放在ViewHolder里，然后调用View的setTag()方法，把ViewHolder对象存储在View中。当convertView不为空的时候则调用View的getTag()方法，把ViewHolder重新取出。这样所有的控件的实例都缓存在了ViewHolder里，就没有必要每次都通过findViewById()方法来获取控件实例了。

通过这两步的优化之后，我们ListView的运行效率就已经非常不错了。

话说回来，ListView的滚动毕竟只是满足了我们视觉上的效果，可是如果ListView中的子项不能点击的话，这个控件就没有什么实际的用途了。修改StudyActivity中的代码，如下所示

public class StudyActivity extends Activity {

	private List<Category> categoryList;
	private String[] category_names;
	private int[] category_images;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		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.setAdapter(adapter);
		listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			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();

			}
		});
	}

......}

可以看到，我们使用了setOnItemClickListener()方法来为ListView注册了一个监听器，当用户点击ListView中的任何一个子项时就会回调onItemClick()方法，在这个方法中可以通过position参数判断出用户点击的是哪一个子项，然后获取到相应的类别，并通过Toast将类别的名字显示出来。重新运行程序，并点击一下动物类，效果如图所示：

不过如果点击每一项时，选中的项会出现橙黄色的背景色，如何去掉很简单。修改activity_study.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:listSelector="#00000000"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">
        
    </ListView>

</RelativeLayout>

界面载入的过程有些生硬，下面我们为界面增加淡入淡出的动画效果。

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

上述代码主要是设置了布局动画，引用了之前的Alpha动画，设置每一项出现的时间间隔和出现的顺序。

最后修改study_activity.xml布局文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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>

现在学习界面还是独立的，我们要将其与之前建立的主界面连接起来。

修改MainActivity,代码如下：

public class MainActivity extends TabActivity {

	private TabHost tabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		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) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

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

在装睡的醒醒君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
乐学成语实现之三：显示学习列表(注意ListView的细节优化）

在第三阶段中，我们就要以列表的形式显示出成语分类列表了。现在就来对ListView的界面进行定制，让它可以显示更加丰富的内容。首先需要准备好一组图片，分别对应每一种类别，我们要让这些类别名称的旁边都有一个图样。准备好文字资源，修改values中的strings.xml文件如下：动物类自然类人物类季节类数字类
复制链接

扫一扫