[置顶] ListView 优化篇：从 BaseAdapter 到 BaseViewHolder
Goole 推荐 Android 程序员使用的 ConvertView + ViewHolder 的模式已经被众人所熟知，现已成为最基础的设计方式，能提升至少 70% 的性能。可以说，写 ListView 不用 ViewHolder 都不能算是合格的 Android 程序员。
但是，本文并不打算介绍传统的 ConvertView + ViewHolder 的模式，也不打算直接贴代码敷衍了事，而是站在代码优化的角度，从最基本的 BaseAdapter，教你如何一步步搭建一个通用的万能适配器，最终将引出 Android 中非常重要的”面向 Holder 的编程思想”。
本文全部示例代码，请移步 github
传统模式的缺点
尽管，传统的 ConvertView + ViewHolder 模式能提高性能，但是存在以下缺点：
高耦合
传统的模式将 ViewHolder 直接作为内部类写在 Activity 里，而每一个 Adapter 必须配备一个 ViewHolder，这种方式是难以维护、管理和扩展的。
高冗余
getView 方法，基本是做重复的操作，无非这么几步
- 判断是否 convertView 为 null
- 创建 holder 对象
- findViewBtId 和 setTag getTag
- 最后返回复用后的 view
阅读性差
传统的模式将控件的 findViewById、赋值操作等业务逻辑，写在一个 getView 方法内，一旦布局中的控件数量一多，getView 方法就变得臃肿无比，就像一个大胖子。例如曾经开发的一个电商项目的购物车逻辑代码量 2000 行左右，其中 getView 方法占了近 1200 行。
传统的代码如下
public class SecondActivity extends Activity{
private ListView mList;
private List<AppInfo> mDatas;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
// 初始化
init();
}
/* 初始化 ListView */
private void init() {
mList = (ListView) findViewById(R.id.list);
mDatas = new ArrayList<AppInfo>();
mList.setAdapter(new MyAdapter());
}
private class MyAdapter extends BaseAdapter{
@Override
public int getCount() {
return mDatas == null ? 0 : mDatas.size();
}
@Override
public Object getItem(int position) {
return mDatas.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null){
convertView = View.inflate(SecondActivity.this, R.layout.item_appinfo, null);
holder = new ViewHolder();
holder.item_icon = (ImageView) findViewById(R.id.item_icon);
holder.item_content = (TextView) findViewById(R.id.item_content);
holder.item_title = (TextView) findViewById(R.id.item_title);
holder.item_rating = (RatingBar) findViewById(R.id.item_rating);
holder.item_size = (TextView) findViewById(R.id.item_size);
holder.item_bottom = (TextView) findViewById(R.id.item_bottom);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
AppInfo info = mDatas.get(position);
holder.item_icon.setImageResource(R.drawable.ic_action_search);
holder.item_content.setText(info.getDes());
holder.item_title.setText(info.getName());
holder.item_rating.setProgress((int)info.getStars());
holder.item_size.setText( Formatter.formatFileSize(SecondActivity.this, info.getSize()) );
holder.item_bottom.setText(info.getDes());
return convertView;
}
}
private class ViewHolder {
ImageView item_icon;
TextView item_content;
TextView item_title;
RatingBar item_rating;
TextView item_size;
TextView item_bottom;
}
}
看了上边一坨代码，是否感觉非常臃肿。好吧，下面我们开始优化之旅
开始优化
模块化 View 的创建
第一步，就是把 View 创建相关的 inflate 、 findViewById，移到 ViewHolder 的构造方法，代码就变成了这样。
getView() 方法：
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null){
holder = new ViewHolder();
} else {
holder = (ViewHolder) convertView.getTag();
}
AppInfo info = mDatas.get(position);
holder.item_icon.setImageResource(R.drawable.ic_action_search);
holder.item_content.setText(info.getDes());
holder.item_title.setText(info.getName());
holder.item_rating.setProgress((int)info.getStars());
holder.item_size.setText( Formatter.formatFileSize(SecondActivity.this, info.getSize()) );
holder.item_bottom.setText(info.getDes());
return convertView;
}ViewHolder：
private class ViewHolder {
private View contentView;
ImageView item_icon;
TextView item_content;
TextView item_title;
RatingBar item_rating;
TextView item_size;
TextView item_bottom;
public ViewHolder(){
// 初始化布局
contentView = View.inflate(SecondActivity.this, R.layout.item_appinfo, null);
// 初始化控件
item_icon = (ImageView) contentView。findViewById(R.id.item_icon) ;
item_content = (TextView) contentView。findViewById(R.id.item_content) ;
item_title = (TextView) contentView。findViewById(R.id.item_title) ;
item_rating = (RatingBar) contentView。findViewById(R.id.item_rating) ;
item_size = (TextView) findViewById(R.id.item_size) ;
item_bottom = (TextView) contentView。findViewById(R.id.item_bottom) ;
// 寄存 ViewHolder 到布局中
contentView.setTag(this);
}
}模块化实体的设置
这一步，主要是：
将控件的赋值放到 ViewHolder 内单独的 setData 方法中，别忘了在 getView 方法调用 setData
为 ViewHolder 创建 getContentView，对外提供根布局
getView 方法返回的是 holder 中保存的布局
getView()：
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
} else {
holder = (ViewHolder) convertView.getTag();
}
AppInfo info = mDatas.get(position);
holder.setData(info);
// 返回 ViewHolder 保存的布局
return holder.getContentView();
}ViewHolder：
private class ViewHolder {
private View contentView;
ImageView item_icon;
TextView item_content;
TextView item_title;
RatingBar item_rating;
TextView item_size;
TextView item_bottom;
public ViewHolder() {
contentView = initView();
contentView.setTag(this);
}
/** 初始化布局 */
public View initView() {
View view = View.inflate(SecondActivity.this,R.layout.item_appinfo, null);
item_icon = (ImageView) contentView.findViewById(R.id.item_icon);
item_content = (TextView) contentView.findViewById(R.id.item_content);
item_title = (TextView) contentView.findViewById(R.id.item_title);
item_rating = (RatingBar) contentView.findViewById(R.id.item_rating);
item_size = (TextView) contentView.findViewById(R.id.item_size);
item_bottom = (TextView) contentView.findViewById(R.id.item_bottom);
return view;
}
public void setData(AppInfo data){
item_icon.setImageResource(R.drawable.ic_action_search);
item_content.setText(data.getDes());
item_title.setText(data.getName());
item_rating.setProgress((int) data.getStars());
item_size.setText(Formatter.formatFileSize(SecondActivity.this, data.getSize()));
item_bottom.setText(data.getDes());
}
public View getContentView() {
return contentView;
}
}抽取 ViewHolder 共性
现在，我们有了 ViewHolder，并且 ViewHolder 的构造方法、initView 还有 setData 方法是固定的。那么就可以将这些共性抽取到 BaseViewHolder
BaseViewHolder 类的主要作用是：
- 用泛型，抽象具体的实体类
- 供 initView、setData 给子类实现
BaseViewHolder：
public abstract class BaseViewHolder<T>{
private View contentView;
public BaseViewHolder(){
contentView = initView();
contentView.setTag(this);
}
public abstract View initView();
public abstract void setData(T data);
public View getContentView() {
return contentView;
}
}ViewHolder：
private class ViewHolder extends BaseViewHolder<AppInfo>{
ImageView item_icon;
TextView item_content;
TextView item_title;
RatingBar item_rating;
TextView item_size;
TextView item_bottom;
/** 初始化布局 */
@Override
public View initView() {
View view = View.inflate(SecondActivity.this,
R.layout.item_appinfo, null);
item_icon = (ImageView) contentView.findViewById(R.id.item_icon);
item_content = (TextView) contentView.findViewById(R.id.item_content);
item_title = (TextView) contentView.findViewById(R.id.item_title);
item_rating = (RatingBar) contentView.findViewById(R.id.item_rating);
item_size = (TextView) contentView.findViewById(R.id.item_size);
item_bottom = (TextView) contentView.findViewById(R.id.item_bottom);
return view;
}
@Override
public void setData(AppInfo data) {
item_icon.setImageResource(R.drawable.ic_action_search);
item_content.setText(data.getDes());
item_title.setText(data.getName());
item_rating.setProgress((int) data.getStars());
item_size.setText(Formatter.formatFileSize(SecondActivity.this,data.getSize()));
item_bottom.setText(data.getDes());
}
}优化 findViewById
对于不同的业务逻辑，不同的布局控件，都要创建对应 View 对象，十分麻烦。所以，我们采用的 Android SDK 提供的 SparseArray，优化赋值操作。
这一步：
1. 定义了 SparseArray 对象，存储 View 对象
2. 创建 setImage、setText，以便为控件赋值
BaseViewHolder：
abstract class BaseViewHolder<T>{
private View contentView;
private SparseArray<View> mViews;
public BaseViewHolder(){
contentView = initView();
contentView.setTag(this);
mViews = new SparseArray<View>();
}
public abstract View initView();
public abstract void setData(T data);
public View getContentView() {
return contentView;
}
/** 设置文本 */
public void setText(int resId, String content){
TextView textView = (TextView) mViews.get(resId);
if (textView == null){
textView = (TextView) contentView.findViewById(resId);
mViews.put(resId, textView);
}
textView.setText(content);
}
/** 设置图片 */
public void setImage(int id, int resId){
ImageView imageView = (ImageView) mViews.get(id);
if (imageView == null){
imageView = (ImageView) contentView.findViewById(id);
mViews.put(id, imageView);
}
imageView.setImageResource(resId);
}
/** 获取 view 对象 */
public View getView(int resId){
View view = mViews.get(resId);
if (view == null){
view = contentView.findViewById(resId);
mViews.put(resId, view);
}
return view;
}
}ViewHolder：
private class ViewHolder extends BaseViewHolder<AppInfo>{
/** 初始化布局 */
@Override
public View initView() {
View view = View.inflate(SecondActivity.this,R.layout.item_appinfo, null);
return view;
}
@Override
public void setData(AppInfo data) {
setImage(R.id.item_icon,R.drawable.ic_action_search);
setText(R.id.item_title, data.getName());
setText(R.id.item_size,Formatter.formatFileSize(SecondActivity.this,data.getSize()));
setText(R.id.item_bottom, data.getDes());
}
}抽取适配器共性到 DefaultAdapter
经过上面几步的操作，我们的小框架基本成型。我们发现 MyAdapter 的 getItem、getItemId、getCount、getView 几个方法具有共性，这一步，主要为这些方法抽取父类。
需要注意：
1. DefaultAdapter 应当添加泛型 T，以代表各种实体类
2. 数据集合通过构造方法传给 DefaultAdapter
3. getView 中的 holder 交给父类 BaseViewHolder 接收（多态）
DefaultAdapter：
private class DefaultAdapter<T> extends BaseAdapter{
private List<T> mDatas;
public DefaultAdapter(List<T> mDatas) {
this.mDatas = mDatas;
}
@Override
public int getCount() {
return mDatas == null ? 0 : mDatas.size();
}
@Override
public Object getItem(int position) {
return mDatas.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
BaseViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
} else {
holder = (ViewHolder) convertView.getTag();
}
T info = mDatas.get(position);
holder.setData(info);
return holder.getContentView();
}
}MyAdapter：
private class MyAdapter extends DefaultAdapter<AppInfo> {
public MyAdapter(List<AppInfo> mDatas) {
super(mDatas);
}
}暴露特性，封装完成
经过 抽取适配器共性到 DefaultAdapter ，其实这个框架基本已经完成了。但还是每次要创建 子类 ViewHolder 去实现 initView 创建各自的布局。能不能更优？答案是能。
这一步，主要做了：
1. 将布局的资源 id 通过 DefaultAdapter 的构造方法传入，并传递给 BaseViewHolder
DefaultAdapter：
abstract class DefaultAdapter<T> extends BaseAdapter{
private List<T> mDatas;
private int mLayoutId;
public DefaultAdapter(List<T> mDatas, int layoutId) {
this.mDatas = mDatas;
this.mLayoutId = layoutId;
}
// getItem、getItemId、getCount略
@Override
public View getView(int position, View convertView, ViewGroup parent) {
BaseViewHolder holder = null;
if (convertView == null) {
holder = new BaseViewHolder<T>(mLayoutId) {
@Override
public void setData(T data) {
setHolder(this, data);
}
};
} else {
holder = (BaseViewHolder) convertView.getTag();
}
T info = mDatas.get(position);
holder.setData(info);
return holder.getContentView();
}
protected abstract void setHolder(BaseViewHolder holder, T data);
}最终效果
终于到了成果展示的时候，看到这下面的代码，你会发现，我们的辛苦是值的。
private void init() {
mList = (ListView) findViewById(R.id.list);
mDataSet = new ArrayList<AppInfo>();
mList.setAdapter(new MyAdapter(mDataSet, R.layout.item_appinfo));
}
private class MyAdapter extends DefaultAdapter<AppInfo> {
public MyAdapter(List<AppInfo> mDatas, int layoutId) {
super(mDatas, layoutId);
}
@Override
protected void setHolder(BaseViewHolder holder, AppInfo data) {
holder.setImage(R.id.item_icon, R.drawable.ic_action_search);
holder.setText(R.id.item_title, data.getName());
holder.setText(R.id.item_size,Formatter.formatFileSize(SecondActivity.this,data.getSize()));
holder.setText(R.id.item_bottom, data.getDes());
}
}代码瞬间从上百行，减少到十几行，而且 DefaultAdapter 和 BaseViewHolder 可以直接拷到项目中使用。
缺点
尽管这个框架功能强大，能大大减少代码量，但就像毕向东所说，凡事都有两面性，代码量是少了，扩展性也差了。遇到特别复杂的需求，这两个类就显得力不从心。以后，我会抽时间再写篇文章，讲述怎么修改这个适配器框架以适应不同需求，力求在”方便”和”灵活”之间找到一个平衡点，将代码优化到极致！
下一篇：ListView 优化篇：从 BaseViewHolder 到面向 Holder 的思想
附录
示例代码：https://github.com/heshiweij/BaseViewHolder