最近项目需要做一个效果,获取到list书之后,展示的时候需要多列显示。一般来说,我们使用listview的时候,都是只有单行单列的效果,那一行多列的效果该怎么实现呢?
参考打造ListView万能Adapter,且支持一行多列的显示方式一文,我们就可以轻松实现这种效果了。
实现思路是,我们先创建一个viewHolder,获取每列item的view。然后在adapter的getView方法里,每一行我们都循环将column数量的数据输入,然后执行covert方法,将数据输入该行。执行完这一行的数据显示之后,我们在继续进入下一行。
举个例子,当getView的position为0的时候,我们执行循环,假设column为3,我们得到size为3的models,还有一个int[column]的positions。
然后我们执行covert方法,分别获取该列里的id为0,1,2的viewHolder布局,然后对viewHolder的具体控件进行操作,例如viewHolder.setText(id,content);
执行完covert方法之后,我们才进入下一行数据显示。即getView的position变为1.
下面为具体实现。
首先创建viewHolder。
DeviceViewHolder.java
public class DeviceViewHolder {
//layout文件中的控件集合 SparseArray用法与HashMap类似,但是性能更优
private SparseArray mViews;
//BaseAdapter中的getView方法中对应的参数
private View mConvertView;
private Context context;
//私有,禁止外部实例化
private DeviceViewHolder(Context context,ViewGroup parent,int layoutId){
this.mViews = new SparseArray();
this.mConvertView = LayoutInflater.from(context).inflate(layoutId,parent,false);
this.mConvertView.setTag(this);
this.context = context;
}
public static DeviceViewHolder get(Context context, View convertView, ViewGroup parent,int layoutId){
if(convertView == null){
return new DeviceViewHolder(context,parent,layoutId);
}
return (DeviceViewHolder)convertView.getTag();
}
//根据ViewId获取控件对象,先从mViews集合中查找,如果存在则直接返回对象;不存在则从布局文件中获取该对象,然后添加到mViews集合中,然后再返回该对象。
public T getView(int viewid){
View view = mViews.get(viewid);
if (view == null){
view = mConvertView.findViewById(viewid);
mViews.put(viewid,view);
}
return (T) view;
}
/**
* 返回BaseAdapter中的getView方法中对应的参数(convertView)
*
* @return
*/
public View getConvertView() {
return mConvertView;
}
/**
* 获取TextView控件
*
* @param viewid
* 控件ID
* @return
*/
public TextView getTextView(int viewid) {
return (TextView) getView(viewid);
}
/**
* 获取ConstraintLayout控件
*
* @param viewid
* 控件ID
* @return
*/
public ConstraintLayout getConstraintLayout(int viewid) {
return (ConstraintLayout) getView(viewid);
}
/**
* 获取Button控件
*
* @param viewid
* 控件ID
* @return
*/
public Button getButton(int viewid) {
return (Button) getView(viewid);
}
/**
* 获取ImageView控件
*
* @param viewid
* 控件ID
* @return
*/
public ImageView getImageView(int viewid) {
return (ImageView) getView(viewid);
}
/**
* 获取ImageButton控件
*
* @param viewid
* 控件ID
* @return
*/
public ImageButton getImageButton(int viewid) {
return (ImageButton) getView(viewid);
}
/**
* 获取LinearLayout控件
*
* @param viewid
* 控件ID
* @return
*/
public LinearLayout getLinearLayout(int viewid) {
return (LinearLayout) getView(viewid);
}
/**
* 设置TextView内容
*
* @param viewid
* TextView控件ID
* @param content
* 要设置的内容
* @return
*/
public DeviceViewHolder setText(int viewid, String content) {
getTextView(viewid).setText(content);
return this;
}
}
从代码中我们可恶意看到,基本都是getView。用于获取具体的view。主要用于复用性。当然如果需要更简单的方式,我只输入id和内容,让viewHolder自动帮我们操作,我们可以像setText方法一样,直接根据id获取指定类型的view,然后将内容输入。
做好viewHolder之后,我们开始制作基础的adapter。为什么是基础的呢?因为这个adapter除了输入每行item包含的多列数据以外,不做具体实现。这样的话,我们就可以根据具体需求,继承基础的adapter进行设置。
DeviceBaseAdapter.java
public abstract class DeviceBaseAdapter extends BaseAdapter {
protected Context mContext;
protected List listDatas = null;
protected int mLayoutId;
protected int column = 1;//默认每行一列
protected int line_int;//计算得到的行数
protected int column_yu;//一行多列,不能整除时,最后一行的列数
//适配器
public DeviceBaseAdapter(Context context,List data,int layoutId,int setcolumn){
this.mContext = context;
this.listDatas = data;
this.mLayoutId = layoutId;
if (setcolumn >= 1){
this.column = setcolumn;
}
}
@Override
public int getCount(){
column_yu = listDatas.size() % column;
if (column_yu>0){
line_int = listDatas.size() / column + 1;
}else {
line_int = listDatas.size() / column;
}
return line_int;
}
@Override
public T getItem(int position) {
return listDatas.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
//添加单条数据项
public void addItem(T item){
this.listDatas.add(item);
}
//设置数据源
public void setListDatas(List data){
this.listDatas = data;
}
//清除数据源
public void clear(){
this.listDatas.clear();
}
//刷新数据源
public void refresh(){
this.notifyDataSetChanged();
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
DeviceViewHolder holder = DeviceViewHolder.get(mContext,convertView,parent,mLayoutId);
List models = new ArrayList();
int[] positions = null;
if (column_yu == 0){
//可以被整除,正常返回每行的数据
positions = new int[column];
for (int i = 0;i < column; i++){
int posi = position * column + i;
T model = listDatas.get(posi);
models.add(model);
positions[i] = posi;
}
}else {
//不能被整除,判断是否在最后一行,如果是,返回剩余的列的数据
if(position == listDatas.size() / column){
positions = new int[column_yu];
for (int i = 0;i models);
}
其中我们可以看到。我们每次geiView的时候,都会执行一次convert,这个convert方法就是具体实现对该行的item塞入多列数据。我们将convert设置为抽象类。在子类中来实现这个方法。同时我们考虑到但我们点击其中某个item的时候,或者要对某个item的列表数据进行单独设置的时候,我们需要获取该item在列表中的具体位置,所以我们设置positions,将item在列表数据中的实际位置放进去。在convert里可以进行使用。(包括点击事件获取数据)
以上就是单行多列的前期工作了。
接下来是实例的应用。首先我们设置一个item.xml,假设设置两行行,item则需要有两个。
同样,具体代码就不贴了。需要注意的是,我们的parent_view_1和parent_view_2是需要设置android:visibility=”invisible”的,因为在我们没有数据的时候,他们需要隐藏起来,同时需要占位置。
然后我们的DeviceListAdapter继承DeviceBaseAdapter,然后实现具体方法。
public class DeviceListAdapter extends DeviceBaseAdapter {
Context context;
public DeviceListAdapter(Context context, List data, int layoutId, int setcolumn) {
super(context, data, layoutId, setcolumn);
this.context = context;
}
@Override
public void convert(DeviceViewHolder holder, final int[] positions, final List models) {
for (int i = 0;i < positions.length;i++){
switch (i){
case 0:
ConstraintLayout layout = holder.getConstraintLayout(R.id.parent_view_1);
layout.setVisibility(View.VISIBLE);
ImageView img_view = holder.getImageView(R.id.item_img_1);
holder.setText(R.id.item_name_1,models.get(i).getDeviceName());
layout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
DeviceItem deviceItem = ((DeviceItem)models.get(0));
Intent intent = new Intent(mContext, RealPlayActivity.class);
intent.putExtra("device_position",positions[0]);
mContext.startActivity(intent);
}
});
break;
case 1:
ConstraintLayout layout2 = holder.getConstraintLayout(R.id.parent_view_1);
layout2.setVisibility(View.VISIBLE);
ImageView img_view2 = holder.getImageView(R.id.item_img_2);
holder.setText(R.id.item_name_2,models.get(i).getDeviceName());
layout2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
DeviceItem deviceItem = ((DeviceItem)models.get(1));
Intent intent = new Intent(mContext, RealPlayActivity.class);
intent.putExtra("device_position",positions[1]);
mContext.startActivity(intent);
}
});
break;
default:
break;
}
}
}
}
设置数据的方法有两种,一种是如原文作者一样,在viewHolder里设置好相关函数,然后在listAdapter里直接调用就好,另一种是我们通过holder根据id获取到具体的view,然后对view进行设置数据。同时点击事件也可以在这里面实现。
不过最好是如原文作者说的一样,在viewHolder里面直接构造好具体的函数。这样的话就可以不考虑view的复用了。
最后,我们为listview设置adapter就可以了。
deviceAdapter = new DeviceListAdapter(getActivity(),device_list,R.layout.device_list_item,2);
listView.setAdapter(deviceAdapter);
deviceAdapter.notifyDataSetChanged();
感谢大神--“帅气的铅笔”的技术分享。