android 在 ListView 的 item 中插入 GridView 仿微信朋友圈图片显示。

时间:2022-03-07 14:49:01

转载请声明出处(http://www.cnblogs.com/linguanh/)

先上张效果图:

android 在 ListView 的 item 中插入 GridView 仿微信朋友圈图片显示。

1,思路简述

这个肯定是要重写 baseAdapter的了,这里我分了两个数据适配器,一个是自定义的 listView的item 风格xml,另一个是该风格xml文件里面的嵌套的GridView数据适配。然后我们需要两个数据辅助类,类似上述,一个是专门来保存在GridView中要显示的每张图片的信息,例如它的url、name、id等等,暂称该辅助类为 UserImgs,大家可以随便增删,另一个是总的专门保存listView中的item的数据,我们称它为UserInfo,这里,说明下,因为每条 item 都有一个自己的GridView,也就是说,UserInfo中必须要有一个UserImgs类实例,用来存储图片信息。然后,就是代码实现了。

使用例子放置最后。

2,辅助类的代码

声明,这两个辅助类,是我根据自己项目所定义的,大家可以据己所需,自行修改,思路掌握了,修改很简单、很快!

第一个,UserImgs

 package cn.share.bananacloud.custom_listview_style;

 /**
* Created by Administrator on 2015/9/6.
*/
public class UserImgs { public int id; //图片的id
public String name; //图片的名称
public String urls; //图片的 url public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrls() {
return urls;
}
public void setUrls(String urls) {
this.urls = urls;
}
}

第二个,UserInfo

 package cn.share.bananacloud.custom_listview_style;

 /**
* Created by LinGuanHong--af913337456 on 2015/9/6.
* qq:913337456
* email:913337456@qq.com
*/
import java.util.ArrayList;
import java.util.List;
public class UserInfo {
private String headUrl; // 头像 url
private String usertext; // 帖子内容
private String username; // 用户名称
private String usertime; // 发帖时间
private String usertalknumber; // 评论数目
private List<UserImgs> ui = new ArrayList<UserImgs>(); // 这个就是我说的,UserImgs 实例
//--------------------------------------- headUrl
public String getHeadUrl() {
return headUrl;
} public void setHeadUrle(String headUrl) {
this.headUrl = headUrl;
}
//--------------------------------------- Name
public String getUserName() {
return username;
} public void setUserName(String username) {
this.username = username;
}
//--------------------------------------- Text
public String getUserText() {
return usertext;
} public void setUserText(String usertext) {
this.usertext = usertext;
}
//---------------------------------------- Time
public String getUserTime() {
return usertime;
} public void setUserTime(String usertime) {
this.usertime = usertime;
}
//---------------------------------------- TalkNumber
public String getUserTalkNumber() {
return usertalknumber;
} public void setUserTalkNumber(String usertalknumber) {
this.usertalknumber = usertalknumber;
}
//---------------------------------------- post pics and mp3 or mp4
public List<UserImgs> getUi() {
return ui;
}
public void setUi(List<UserImgs> ui) {
this.ui = ui;
}
}

3,ListView 的数据适配的重写类

声明,这个例子和下面的例子的图片显示都采用了开源框架---imageLoder。这个数据适配器是 GridView的数据适配入口,GridView的数据适配在它里面调用配置,必要的代码注释我已给出,其他的都很容易理解。

 package cn.share.bananacloud.custom_listview_style;

 /**
* Created by Administrator on 2015/9/6.
*/ import android.content.Context;
import android.graphics.Bitmap;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView; import com.lgh.addItemListview.mymodule.app2.SharePreferenceHelper;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener; import java.util.List; import cn.share.bananacloud.InternetHelper;
import cn.share.bananacloud.R;
import cn.share.bananacloud.commonDataHelper;
import cn.share.bananacloud.imageLoderHelper; public class WeChatAdapter extends BaseAdapter { protected ImageLoader imageLoader = ImageLoader.getInstance();
private List<UserInfo> mList;
private Context mContext;
SharePreferenceHelper sp;
public WeChatAdapter(Context _context) {
this.mContext = _context;
sp = new SharePreferenceHelper(mContext,"loginrecord",null);
} public void setData(List<UserInfo> _list) { //这个函数是数据主入口
this.mList = _list;
} @Override
public int getCount() {
return mList.size();
} @Override
public UserInfo getItem(int position) {
return mList.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
convertView = LayoutInflater.from(mContext).inflate(R.layout.bbs_main_item, parent, false);
holder.gridView = (NoScrollGridView) convertView.findViewById(R.id.gridView);
holder.userHead = (ImageView) convertView.findViewById(R.id.bbs_main_lv_userhead);
holder.username = (TextView) convertView.findViewById(R.id.bbs_main_lv_username);
holder.usertext = (TextView) convertView.findViewById(R.id.bbs_main_lv_item_text);
holder.usertime = (TextView) convertView.findViewById(R.id.bbs_main_lv_usertime);
holder.usertalknumber = (TextView) convertView.findViewById(R.id.bbs_main_lv_item_talknumber);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
UserInfo mUserInfo = getItem(position);
if (mList != null && mList.size() > 0) { // 判断是否有数据
showHeadImage(holder.userHead,mList.get(position).getHeadUrl());
holder.username.setText(mList.get(position).getUserName());
holder.usertext.setText(mList.get(position).getUserText());
holder.usertime.setText(mList.get(position).getUserTime());
holder.usertalknumber.setText(mList.get(position).getUserTalkNumber()); if(mUserInfo.getUi().size()>0) { //这里判断该组数据是否有 gridView 的图片url数据,有才进入 gridView的配置
holder.gridView.setVisibility(View.VISIBLE);
holder.gridView.setAdapter(new MyGridAdapter(mUserInfo.getUi(), mContext));
// 这里我把 GridView的 item 点击监听给去掉了,防止冲突,而且我项目不需要。
/*holder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Log.d("zzzzz","--onItem--"+position);
// imageBrower(position,bean.urls);
}
});*/
}else{ // 一定要加 else 防止GridView 的数据重复显示,在不同的 item 上面
holder.gridView.setVisibility(View.GONE);
holder.gridView.setAdapter(null);
}
}
//去掉 gridView 的 item 点击
holder.gridView.setClickable(false);
holder.gridView.setPressed(false);
holder.gridView.setEnabled(false);
return convertView;
} public class ViewHolder {
NoScrollGridView gridView;
TextView username,usertext,usertime,usertalknumber;
ImageView userHead;
} public void showHeadImage(ImageView view,String url){
//Log.d("zzzzz",""+useraccount.get((int)data));
if (url!=null) {
if (InternetHelper.checkConnection(mContext)) {
try {
imageLoader.displayImage(
url,
view,
imageLoderHelper.getLoderOption(145, R.drawable.user_default_head, 80),
new ImageLoadingListener() {
@Override
public void onLoadingStarted(String s, View view) { } @Override
public void onLoadingFailed(String s, View view, FailReason failReason) { } @Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {
if(s.contains(InternetHelper.exchangeUserAccount(sp.getOneInfo("useraccount", "-1")))) {
imageLoader.getDiskCache().remove(s);//clear old cache
}
} @Override
public void onLoadingCancelled(String s, View view) { }
}
);
} catch (Exception ignored){}
} else {
// load but doesn't remove local cache
imageLoader.displayImage
(
commonDataHelper.rootUrl+"uploadpic/" + InternetHelper.exchangeUserAccount(url).trim() + "/head.jpg",
view,
imageLoderHelper.getLoderOption(145, R.drawable.user_default_head, 80)
);
}
} else {
Log.d("zzzzz", "useraccount.size() is 0");
}
}
}

4,GridView 数据适配器的重写类

GridView 数据适配类的作用主要是把图片都显示到 GridView上面,再返回此 View,然后显示到 ListView 的 item 上面。

 package cn.share.bananacloud.custom_listview_style;

 /**
* Created by Administrator on 2015/9/6.
*/ import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView; import com.nostra13.universalimageloader.core.ImageLoader; import java.util.List; import cn.share.bananacloud.R;
import cn.share.bananacloud.imageLoderHelper; public class MyGridAdapter extends BaseAdapter { private List<UserImgs> mUI;
protected ImageLoader imageLoader = ImageLoader.getInstance();
private LayoutInflater mLayoutInflater; public MyGridAdapter(List<UserImgs> ui, Context context) {
mLayoutInflater = LayoutInflater.from(context);
this.mUI = ui;
} @Override
public int getCount() {
return mUI == null ? 0 : mUI.size();
} @Override
public String getItem(int position) {
return mUI.get(position).urls;
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
MyGridViewHolder viewHolder;
if (convertView == null) {
viewHolder = new MyGridViewHolder();
convertView = mLayoutInflater.inflate(R.layout.user_img_item,parent, false);
viewHolder.imageView = (ImageView) convertView.findViewById(R.id.iv_user_img);
convertView.setTag(viewHolder);
} else {
viewHolder = (MyGridViewHolder) convertView.getTag();
}
String url = getItem(position);
imageLoader.displayImage(url, viewHolder.imageView, imageLoderHelper.getLoderOption(180, 0, 0));
return convertView;
}
private static class MyGridViewHolder {
ImageView imageView;
}
}

代码使用例子

ListView mListview  = new ListView();

WeChatAdapter mWeChat = new WeChatAdapter (context);

List<UserInfo> mUserInfo = new ArrayList<>();

mUserInfo .add(你配置好的UserInfo);

mWeChat .setData(mUserInfo);

mListview .setAdapter(mWeChat );

打完收工。