Android 自定义ListView实现QQ空间界面(说说内包含图片、视频、点赞、评论、转发功能)
程序员文章站
2022-03-14 10:50:23
前端时间刚好需要做一个类似于qq空间的社区分享功能,说说内容包含文字(话题、内容)、视频、图片,还需包含点赞,评论,位置信息等功能。 就采用listview做了一个,先来看下效果,gi...
前端时间刚好需要做一个类似于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"> <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空间界面,希望对大家有所帮助