欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android 自定义ListView实现QQ空间界面(说说内包含图片、视频、点赞、评论、转发功能)

程序员文章站 2022-03-14 10:50:23
前端时间刚好需要做一个类似于qq空间的社区分享功能,说说内容包含文字(话题、内容)、视频、图片,还需包含点赞,评论,位置信息等功能。 就采用listview做了一个,先来看下效果,gi...

前端时间刚好需要做一个类似于qq空间的社区分享功能,说说内容包含文字(话题、内容)、视频、图片,还需包含点赞,评论,位置信息等功能。 就采用listview做了一个,先来看下效果,gif太大,csdn传不了,请移步gitee连接:gif效果

Android 自定义ListView实现QQ空间界面(说说内包含图片、视频、点赞、评论、转发功能)

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

Android 自定义ListView实现QQ空间界面(说说内包含图片、视频、点赞、评论、转发功能)

序号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">
 <linearlayout
  android: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">
  <linearlayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
   <com.xiaok.winterolympic.custom.circleimageview
    android:id="@+id/video_avatar"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:src="@drawable/head_picture" />
   <textview
    android: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" />
   <textview
    android:id="@+id/video_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginstart="20dp"
    android:textsize="14sp"
    android:text="刚刚"/>
  </linearlayout>
  <textview
   android: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="#共迎冬奥# 冬奥"/>
  <videoview
   android:id="@+id/video_view"
   android:layout_width="match_parent"
   android:layout_height="230dp"
   android:layout_margintop="15dp"/>
  <relativelayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
   <textview
    android: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"/>
   <imageview
    android: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"/>
   <imageview
    android: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"/>
   <imageview
    android:id="@+id/video_iv_share"
    style="@style/videoshareimageview"
    android:src="@mipmap/video_share_share"
    android:layout_alignparentend="true"
    android:layout_marginend="10dp"/>
  </relativelayout>
  <edittext
   android: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>
 <imageview
  android: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,其他应该不用解释。

总结

以上所述是小编给大家介绍的android 自定义listview实现qq空间界面,希望对大家有所帮助