Android ListView实现QQ空间界面（说说内包含图片、视频、点赞、评论、转发功能），结尾附源码

前段时间刚好需要做一个类似于QQ空间的社区分享功能，说说内容包含文字（话题、内容）、视频、图片，还需包含点赞，评论，位置信息等功能。 就采用LIstview做了一个，先来看下效果,GIF太大，CSDN传不了，请移步Gitee连接：GIF效果

1. 先来分析一下ListView中每一个条目包含的控件，请看下图

序号1：头像，ImageView，自定义为圆形即可；
序号2：用户名，TextView;
序号3：发布时间，TextView;
序号4：说说文字部分，TextView;
序号5：说说中视频或图片部分，Videoview;
序号6：点赞信息，TextView，动态添加；
序号7：位置信息，TextView；
序号8/9/10：点赞、评论、转发，均为ImageView；
序号11：评论区，TextView，动态添加；
序号12：评论框，EditText，其右侧图片是通过drawableRight设置的，事件监听会在后面详细说；
上面图中漏了一个，在视频正中央还需要有一个播放按钮，为ImageView，通过切换ImageView中图片实现播放与暂停切换。

2. 确定好有哪些控件后，我们用xml实现布局，文件命名为`video_brower_item.xml`，代码如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"><LinearLayoutandroid:id="@+id/mContainer"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingLeft="10dp"android:paddingRight="10dp"android:paddingTop="10dp"android:background="@android:color/white"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><com.xiaok.winterolympic.custom.CircleImageViewandroid:id="@+id/video_avatar"android:layout_width="45dp"android:layout_height="45dp"android:src="@drawable/head_picture" /><TextViewandroid:id="@+id/video_username"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="xiaok"android:textColor="#000000"android:layout_marginStart="15dp"android:textSize="24sp"android:textStyle="bold" /><TextViewandroid:id="@+id/video_date"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="20dp"android:textSize="14sp"android:text="刚刚"/></LinearLayout><TextViewandroid:id="@+id/video_descripation"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:textSize="16sp"android:textColor="#000000"android:text="#共迎冬奥# 冬奥"/><VideoViewandroid:id="@+id/video_view"android:layout_width="match_parent"android:layout_height="230dp"android:layout_marginTop="15dp"/><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:id="@+id/video_position"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="北京市朝阳区"android:layout_marginTop="12dp"android:layout_alignParentStart="true"android:layout_marginBottom="10dp"/><ImageViewandroid:id="@+id/video_iv_good"style="@style/VideoShareImageView"android:src="@mipmap/video_share_good"android:layout_toStartOf="@+id/video_iv_comment"android:layout_marginEnd="20dp"/><ImageViewandroid:id="@+id/video_iv_comment"style="@style/VideoShareImageView"android:src="@mipmap/video_share_comment"android:layout_toStartOf="@+id/video_iv_share"android:layout_marginEnd="20dp"/><ImageViewandroid:id="@+id/video_iv_share"style="@style/VideoShareImageView"android:src="@mipmap/video_share_share"android:layout_alignParentEnd="true"android:layout_marginEnd="10dp"/></RelativeLayout><EditTextandroid:id="@+id/video_et_comment"android:layout_width="match_parent"android:layout_height="40dp"android:hint="评论"android:textSize="14sp"android:layout_marginBottom="20dp"android:drawableRight="@drawable/video_send_picture"/></LinearLayout><ImageViewandroid:id="@+id/video_play"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_record_play"android:layout_gravity="center_horizontal"android:layout_marginTop="192dp"/></FrameLayout>

效果如图：

3. 定义一个类，这里命名为`VideoBrower`，用于封装`ListView`中每个条目所用到的数据：

package com.xiaok.winterolympic.model;import java.io.Serializable;public class VideoBrower implements Serializable {private static final long serialVersionUID = 1L;private int avatarId;private String username;private String date;private String videoDescripation;private String videoPath;private String position;public VideoBrower(int avatarId, String username, String date, String videoDescripation, String videoPath, String position) {this.avatarId = avatarId;this.username = username;this.date = date;this.videoDescripation = videoDescripation;this.videoPath = videoPath;this.position = position;}public int getAvatarId() {return avatarId;}public String getUsername() {return username;}public String getDate() {return date;}public String getVideoDescripation() {return videoDescripation;}public String getVideoPath() {return videoPath;}public String getPosition() {return position;}public void setAvatarId(int avatarId) {this.avatarId = avatarId;}public void setDate(String date) {this.date = date;}public void setUsername(String username) {this.username = username;}public void setVideoDescripation(String videoDescripation) {this.videoDescripation = videoDescripation;}public void setVideoPath(String videoPath) {this.videoPath = videoPath;}public void setPosition(String position) {this.position = position;}}

这里解释下，头像我是通过封装R文件中对应的资源ID实现的，所以格式为int。

4. 定义这个`ListView`的`Adapter`，命名为`VideoBrowerAdapter`

这里有几个点需要单独说明，

VideoView中视频加载完还未播放之前，其背景一般需要显示视频的预览，通常取视频的第一帧图片作为视频预览显示在VideoView中，获取视频第一帧通常通过MediaMetadataRetriever,代码如下：

     MediaMetadataRetriever media = new MediaMetadataRetriever();Uri videoUri = Uri.parse(aData.get(position).getVideoPath()); //getVideoPath()获取的是视频的存储路径media.setDataSource(mContext,videoUri);Bitmap bitmap = media.getFrameAtTime();

在设计评论框时，我使用的是EditText加上其内置的drawableRight属性，但EditText原生并不提供关于drawable属性的监听，所以这里我通过回调onTouch，监测用户触摸的位置，进而实现drawable的交互，代码如下：

     //评论框右边发表图标holder.video_et_comment.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {// et.getCompoundDrawables()得到一个长度为4的数组，分别表示左右上下四张图片Drawable drawable = holder.video_et_comment.getCompoundDrawables()[2];//如果右边没有图片，不再处理if (drawable == null)return false;//如果不是按下事件，不再处理if (event.getAction() != MotionEvent.ACTION_UP)return false;if (event.getX() > holder.video_et_comment.getWidth()- holder.video_et_comment.getPaddingRight()- drawable.getIntrinsicWidth()){//发表String commentStr = holder.video_et_comment.getText().toString().trim();if (TextUtils.isEmpty(commentStr)){ToastUtils.showSingleToast("评论内容不能为空");}else {addView(holder, commentStr);holder.video_et_comment.setText(""); //发表完评论后编辑框清空ToastUtils.showSingleToast("发表成功!");}}return false;}});

完整代码如下：

public class VideoBrowerAdapter extends BaseAdapter {private LinkedList<VideoBrower> aData;private Context mContext;private boolean isGood = false;private boolean isVideoPlaying = false;private int commentIndex = 4;private TextView thumpUpView;public VideoBrowerAdapter(LinkedList<VideoBrower> aData, Context mContext){this.aData = aData;this.mContext = mContext;}@Overridepublic int getCount(){return aData.size();}@Overridepublic  Object getItem(int position){return null;}@Overridepublic long getItemId(int position){return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent){ViewHolder holder;if (convertView==null){convertView = LayoutInflater.from(mContext).inflate(R.layout.video_brower_item,parent,false);holder = new ViewHolder();holder.videoAvatar = convertView.findViewById(R.id.video_avatar);holder.username = convertView.findViewById(R.id.video_username);holder.videoDate = convertView.findViewById(R.id.video_date);holder.videoDescripation = convertView.findViewById(R.id.video_descripation);holder.video_view = convertView.findViewById(R.id.video_view);holder.videoPosition = convertView.findViewById(R.id.video_position);holder.videoPlay = convertView.findViewById(R.id.video_play);holder.video_iv_good = convertView.findViewById(R.id.video_iv_good);holder.video_iv_comment = convertView.findViewById(R.id.video_iv_comment);holder.video_iv_share = convertView.findViewById(R.id.video_iv_share);holder.video_et_comment = convertView.findViewById(R.id.video_et_comment);holder.mContainer = convertView.findViewById(R.id.mContainer); //拿到布局，用于动态添加ViewconvertView.setTag(holder);}else {holder = (ViewHolder)convertView.getTag();}MediaMetadataRetriever media = new MediaMetadataRetriever();Uri videoUri = Uri.parse(aData.get(position).getVideoPath());media.setDataSource(mContext,videoUri);Bitmap bitmap = media.getFrameAtTime();holder.videoAvatar.setImageResource(aData.get(position).getAvatarId());holder.username.setText(aData.get(position).getUsername());holder.videoDate.setText(aData.get(position).getDate());holder.videoDescripation.setText(aData.get(position).getVideoDescripation());holder.video_view.setBackground(new BitmapDrawable(bitmap));holder.video_view.setVideoURI(videoUri);holder.videoPosition.setText(aData.get(position).getPosition());/**响应事件*///播放视频按钮holder.videoPlay.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (holder.video_view != null){if (!isVideoPlaying){holder.videoPlay.setImageResource(R.mipmap.ic_record_stop);holder.video_view.start();holder.video_view.setBackground(null);holder.video_view.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {@Overridepublic void onCompletion(MediaPlayer mp) {holder.videoPlay.setImageResource(R.mipmap.ic_record_play);}});}else {holder.video_view.stopPlayback();holder.videoPlay.setImageResource(R.mipmap.ic_record_play);}}}});//点赞holder.video_iv_good.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (!isGood){holder.video_iv_good.setImageResource(R.mipmap.video_share_good_blue);addThumpUpView(holder);Toast.makeText(mContext, "点赞成功！", Toast.LENGTH_SHORT).show();isGood = true;}else {holder.video_iv_good.setImageResource(R.mipmap.video_share_good);removeThumpUpView(holder);isGood = false;}}});//评论图片按钮holder.video_iv_comment.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//焦点移动到评论区holder.video_et_comment.requestFocus();}});//评论框右边发表图标holder.video_et_comment.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {// et.getCompoundDrawables()得到一个长度为4的数组，分别表示左右上下四张图片Drawable drawable = holder.video_et_comment.getCompoundDrawables()[2];//如果右边没有图片，不再处理if (drawable == null)return false;//如果不是按下事件，不再处理if (event.getAction() != MotionEvent.ACTION_UP)return false;if (event.getX() > holder.video_et_comment.getWidth()- holder.video_et_comment.getPaddingRight()- drawable.getIntrinsicWidth()){//发表String commentStr = holder.video_et_comment.getText().toString().trim();if (TextUtils.isEmpty(commentStr)){ToastUtils.showSingleToast("评论内容不能为空");}else {addView(holder, commentStr);holder.video_et_comment.setText(""); //发表完评论后编辑框清空ToastUtils.showSingleToast("发表成功!");}}return false;}});//分享holder.video_iv_share.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//分享说说，具体功能就不写了}});return convertView;}static class ViewHolder{CircleImageView videoAvatar;TextView username;TextView videoDate;TextView videoDescripation;VideoView video_view;TextView videoPosition;ImageView videoPlay;ImageView video_iv_good;ImageView video_iv_comment;ImageView video_iv_share;EditText video_et_comment;LinearLayout mContainer;}/*** 添加评论* @param:holder:ListView容器，用于* @param:commentStr:评论内容*/private void addView(ViewHolder holder, String commentStr){TextView view = new TextView(mContext);LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 60);lp.setMargins(0,15,0,15);view.setTextSize(14);view.setTextColor(mContext.getColor(R.color.record_comment_text));view.setText("xiaok:"+commentStr);int index = holder.mContainer.getChildCount();holder.mContainer.addView(view,index-1,lp);}private void addThumpUpView(ViewHolder holder){thumpUpView = new TextView(mContext);LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 60);lp.setMargins(0,15,0,15);thumpUpView.setTextSize(14);thumpUpView.setTextColor(mContext.getColor(R.color.record_comment_text));thumpUpView.setText("xiaok 觉得很赞");holder.mContainer.addView(thumpUpView,3,lp);}private void removeThumpUpView(ViewHolder holder){holder.mContainer.removeViewAt(3);}
}

5. 创建`Activity`对应的布局文件，命名为`activity_video_brower.xml`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".view.video.VideoBrowerActivity"><ListViewandroid:id="@+id/video_listview"android:layout_width="match_parent"android:layout_height="wrap_content"></ListView></LinearLayout>

6. 创建`Activity`文件

public class VideoBrowerActivity extends AppCompatActivity {private List<VideoBrower> aDate;private int[]videoAvatars;private String[]usernames;private String[]videoDates;private String[]videoDescripation;private String[]videoPaths;private String[]videoPosition;private String videoDescripation_01;private ListView lv_video;private ImageButton ib_back;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_video_brower);setCustomActionBar();  //加载自定义ActionBarlv_video = findViewById(R.id.video_listview);videoDescripation_01 = getIntent().getStringExtra("videoDescripation");videoAvatars = new int[]{R.drawable.head_picture,R.mipmap.video_avatar_02,R.mipmap.video_avatar_03,R.mipmap.video_avatar_04};usernames = new String[]{"xiaok","小张","王小明","李晓华"};videoDates = new String[]{"刚刚","09月17日10:12","08月22日18:15","08月22日17:42"};videoDescripation = new String[]{videoDescripation_01,"#雪容融和冰墩墩# 冬奥会和冬残奥会吉祥物来袭！","#北京冬奥# 北京赢了！2022冬奥，不见不散！！！","#冬奥来了# 冬奥宣传视频，浓浓的中国风，超赞！"};videoPaths = new String[]{FileUtils.VIDEO_01,FileUtils.VIDEO_02,FileUtils.VIDEO_03,FileUtils.VIDEO_04};videoPosition = new String[]{"北京市朝阳区","郑州市中原区","郑州市中原区","郑州市中原区"};aDate = new LinkedList<>();for (int i=0;i<videoAvatars.length;i++){aDate.add(new VideoBrower(videoAvatars[i],usernames[i],videoDates[i],videoDescripation[i],videoPaths[i],videoPosition[i]));}lv_video.setAdapter(new VideoBrowerAdapter((LinkedList<VideoBrower>)aDate,VideoBrowerActivity.this));lv_video.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {}});//左上角返回ib_back.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {startActivity(new Intent(VideoBrowerActivity.this,MainPageActivity.class));}});}private void setCustomActionBar() {ActionBar.LayoutParams lp =new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);View mActionBarView = LayoutInflater.from(this).inflate(R.layout.record_share_actionbar, null);ib_back = mActionBarView.findViewById(R.id.record_ib_back);ActionBar actionBar = getSupportActionBar();actionBar.setCustomView(mActionBarView, lp);actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);actionBar.setDisplayShowCustomEnabled(true);actionBar.setDisplayHomeAsUpEnabled(false);actionBar.setHomeButtonEnabled(false);actionBar.setDisplayShowTitleEnabled(false);}

项目源码地址：地址

欢迎大佬们给star!