Android之微信朋友圈UI实现--ExpandableListView+GridView

PS：我们都知道微信，更是知道朋友圈，很多人在朋友圈里卖起了化妆品，打入广告等为自己做一下推广，里面会附带一写好看的图片，上面有标题，有描述，整体布局每场的美观，那么这是怎么实现的呢，有些人可能会单个使用ListView，也会使用GridView，那么listview嵌套gridview你使用过吗，现在先看一张图，

这张图是不是很熟悉，没错这个就是朋友圈，里面有一个，里面的布局我都画出来了，我不知道微信具体怎么实现的，但是我们会用安卓原生的方法去实现这样的布局，并有实实在在的数据。

思路：

首页这是一个可以滑动的view，但是分为标题（用户名）和内容，并且内容下面还有图片，图片也是不确定的。这里就用ExpandableListView+GridView,如果有人不了解这个ExpandableListView的话，看完这篇基本用法就会了。

步骤：

  1. 总布局的创建，里面只要一个ExpandableListView控件。
  2. ExpandableListView的item布局创建，本布局用最传统的做法分为Group和Child布局。
    1. Group布局只显示一个用户名
    2. Child布局就要为描述内容和GridView（存放图片）。
  3. ExpandableListView适配器创建。
  4. 数据加载。

查看效果图，这个图在上传的时候压缩了就变的模糊了，请谅解。

1: 总布局的创建，里面只要一个ExpandableListView控件。

这里文件非常简单，只有一个控件，当然ExpandableListView也是有很多属性的。这里都没有写，去掉箭头，在Activity中动态添加。这里布局文件我都省去了根布局LinearLayout。

 <ExpandableListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_elv"/>

2：ExpandableListView的item布局创建，本布局用最传统的做法分为Group和Child布局

2.1：这个就比较多了文件，首先来写一下Group的布局，名字你随便起，我这里叫grouplayout.xml

<ImageView
        android:id="@+id/id_group_img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/id_group_name"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:gravity="center"
        android:textSize="40px"
        android:layout_marginLeft="10dp"
        android:text="name"/>

2.2：其次是Child的布局，名字也是随便起，我这里叫childlayout.xml

<TextView
        android:id="@+id/id_dec"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:gravity="center"
        android:textSize="35px"
        android:layout_marginLeft="10dp"
        android:text="describe"/>
    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:id="@+id/id_gv"></GridView>

2.3：还有一个布局文件，那就是GridView的item布局

<ImageView
        android:id="@+id/id_img"
        android:src="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_height="100dp" />

3：ExpandableListView适配器创建

适配器的创建才是重点，首先我们对ExpandableListView自定义适配器，然后再在里面嵌套一个GridView的自定义适配器，当然你也可以调用系统的，不过个人觉得自定义有更好的灵活性。在这之前呢，我们需要创建几个bean类，group里有img图片和text文字，child有text文字和img图片数组。因为用户可能会多发几张照片，不光是一个。下面有两个class，稍微看一下就Ok了，不用太在意非要一样。

package mus.cn.shopeffect;
/**
 * Created by cMusketeer on 18/5/23.
 *
 * @author 刘志通
 */

public class GroupBean {
    String groupImg,name;

    public String getGroupImg() {
        return groupImg;
    }

    public void setGroupImg(String groupImg) {
        this.groupImg = groupImg;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
import java.util.List;

/**
 * Created by cMusketeer on 18/5/23.
 *
 * @author 刘志通
 */

public class ChildBean {
    public String childDesc;
    public List<String> childImg;

    public String getChildDesc() {
        return childDesc;
    }

    public void setChildDesc(String childDesc) {
        this.childDesc = childDesc;
    }

    public List<String> getChildImg() {
        return childImg;
    }

    public void setChildImg(List<String> childImg) {
        this.childImg = childImg;
    }
}

创建Adapter，首先我们要继承adapter，这里和以前的就不一样了，我们要继承BaseExpandableListAdapter，当你继承后，系统就会让你重写里面的方法，方法有很多，不用全部，有如下几个就行了（有的小伙伴系统提示的全部继承，还缺一个）。

3.1：方法作用详情（没有先后顺序，古无序号）

首先定义变量（这里listChild为什么list里泛型还是list，我在Activity中解释）

　　public Context context;
    public List<GroupBean> listGroup;
    public List<List<ChildBean>> listChild;

组Group（父）的长度

 @Override
    public int getGroupCount() {
        return listGroup.size();
    }

某个组中child（子）的长度

 @Override
    public int getChildrenCount(int groupPosition) {
        return listChild.get(groupPosition).size();
    }

拿到父的项

 @Override
    public Object getGroup(int groupPosition) {
        return listGroup.get(groupPosition);
    }

拿到组（父）中子的项

 @Override
    public Object getChild(int groupPosition, int childPosition) {
        return listChild.get(groupPosition).get(childPosition);
    }

拿到父、子id

@Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

组和子元素是否持有稳定的ID。

@Override
    public boolean hasStableIds() {
        return false;
    }

返回值：如果当前适配器不包含任何数据则返回True。经常用来决定一个空视图是否应该被显示。

@Override
    public boolean isEmpty() {
        return false;
    }
子项是否可以选中
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

3.2：补充：这里还有一些方法，你如果是没有用的话，就不用写。

public abstract void onGroupCollapsed (int groupPosition)
当组收缩状态的时候此方法被调用。
参数： groupPosition 收缩状态的组索引
public abstract void onGroupExpanded(int groupPosition)
当组展开状态的时候此方法被调用。

3.3：下面才是重点，分别是getGroupView和getChildView用来显示视图。具体看注释。

图片加载库Glide依赖：compile ‘com.github.bumptech.glide:glide:3.7.0‘
@Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        ViewHoldeGroup viewHoldeGroup;
        if (convertView == null) {//没有视图时创建
            convertView = LayoutInflater.from(context).inflate(R.layout.grouplayout, null);//添加布局文件
            viewHoldeGroup = new ViewHoldeGroup();//创建holder对象
            viewHoldeGroup.imageView = (ImageView) convertView.findViewById(R.id.id_group_img);//拿到控件
            viewHoldeGroup.textView = (TextView) convertView.findViewById(R.id.id_group_name);
            convertView.setTag(viewHoldeGroup);
        } else {
            viewHoldeGroup = (ViewHoldeGroup) convertView.getTag();
        }//这里我用的Glide框架，用来加载网络图片的。
        Glide.with(context).load(listGroup.get(groupPosition).getGroupImg()).asBitmap().into(viewHoldeGroup.imageView);
        viewHoldeGroup.textView.setText(listGroup.get(groupPosition).getName());
        return convertView;
    }

    class ViewHoldeGroup {
        ImageView imageView;
        TextView textView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ViewHoldeChild viewHoldeChild;
        GVAdapter gvAdapter;
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.childlayout, null);
            viewHoldeChild = new ViewHoldeChild();
            viewHoldeChild.gridView = (GridView) convertView.findViewById(R.id.id_gv);
            viewHoldeChild.textView = (TextView) convertView.findViewById(R.id.id_dec);
            convertView.setTag(viewHoldeChild);
        } else {
            viewHoldeChild = (ViewHoldeChild) convertView.getTag();
        }
        viewHoldeChild.textView.setText(listChild.get(groupPosition).get(childPosition).getChildDesc());
        gvAdapter = new GVAdapter(context, listChild.get(groupPosition).get(childPosition).getChildImg());//适配器
        viewHoldeChild.gridView.setAdapter(gvAdapter);
        return convertView;
    }

    class ViewHoldeChild {
        TextView textView;
        GridView gridView;
    }

到这里呢我们可以看到Gridview的适配器，写在了ExpandableListView适配器的里面，数据还是一样的传递。GridView的适配器我就不写了，太简单，写上代码量就大了。

4：数据加载

4.1：Activity中最后一步，下面有解释。

 //添加组数据
        List<GroupBean> listGroup = new ArrayList<>();
        GroupBean groupBean;
        for (int i = 0; i < 10; i++) {
            groupBean = new GroupBean();
            groupBean.setGroupImg("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1116338067,147640299&fm=27&gp=0.jpg");
            groupBean.setName("测试");
            listGroup.add(groupBean);
        }
        //添加组中子的数据，这里我解释一下list嵌套list，比如说一共是10个组，每个组里有一个子项目，每个子项目中又有2个图片
        List<List<ChildBean>> listChild = new ArrayList<>();
        List<ChildBean> list;//子的数据
        List<String> liImg;//子中图片的数据
        ChildBean childBean;
        for (int i = 0; i < 10; i++) {
            list = new ArrayList<>();
            for (int j = 0; j < 1; j++) {
                childBean = new ChildBean();
                liImg = new ArrayList<>();
                for (int k = 0; k < 2; k++) {//图片加载
                    liImg.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527344951394&di=6dc7f379165a02c45e8df43106dbb153&imgtype=0&src=http%3A%2F%2Fimg.sc115.com%2Fuploads%2Fsc%2Fjpgs%2F1407%2Fapic4833_sc115.com.jpg");
                }
                childBean.setChildImg(liImg);
                childBean.setChildDesc("我是一个描述，我在图片的上面");
                list.add(childBean);//添加到子中
            }
            listChild.add(list);
        }

        ExpandableAdapter expandableAdapter = new ExpandableAdapter(this, listGroup, listChild);
        lv.setAdapter(expandableAdapter);
        //默认展开
        if (expandableAdapter != null) {
            for (int i = 0; i < listGroup.size(); i++) {
                lv.expandGroup(i);
            }
        }
        //去除箭头
        lv.setGroupIndicator(null);

List<List<ChildBean>>解释，红色的是组，里面的是子，每个组里不一定有几个子（这里画了两个）。

完

原文地址：https://www.cnblogs.com/cmusketeer/p/9079941.html

时间： 2024-11-12 16:49:57

Android之微信朋友圈UI实现--ExpandableListView+GridView的相关文章

Android 仿微信朋友圈发动态功能（相册图片多选）

代码分享 代码名称: 仿微信朋友圈发动态功能(相册图片多选) 代码描述: 仿微信朋友圈发动态功能(相册图片多选) 代码托管地址: http://www.apkbus.com/android-152760-1-1.html 代码作者: 楼主 代码效果图: 本帖最后由 ^.^ 于 2014-7-8 16:23 编辑 <ignore_js_op> <ignore_js_op> <ignore_js_op> DEMO一共13个类 大约2000行代码,童鞋们耐心点看基本思路是:1

试用友盟SDK实现Android分享微信朋友圈

社会化分享是眼下必学且火热的功能.之前有写第三方登录,那仅仅是社会化分享的一部分.今天来玩玩分享微信朋友圈. 为了方便操作,还是依照步骤写. 一,注冊 注冊应用已经在这里具体说明过了,这里就不多提了. 二,在微信开放平台中授权开发人员身份,以及注冊应用 链接:https://open.weixin.qq.com/ 进入管理中心 提交个人(公司)资料注冊开发人员信息(须要审核等待).通过后再创建移动应用(确保Package和Appname的一致性)之后拿到应用的AppId和Appsecret 三,

android 滚动栏下拉反弹的效果（相似微信朋友圈）

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源代码下载:点击 1.效果图 这部手机显示的分辨率有限,非常老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; im

Android实现分享内容到微信朋友圈

原文地址:http://yanwushu.sinaapp.com/android_wechat_share/ 由于需求,要实现在应用中实现分享文字+图片到微信朋友圈.在网上找了一些资料,总结如下: 思路 1.使用android的intent实现应用程序之间的通信,将信息通过intent传递给微信(文章后面资源链接中有案例).这种方式的局限性在于 a.只能发送图片,而不是(文字或者图片+文字). b.设备必须安装微信才能实现分享. 2.使用微信的官方sdk包,实现发送文字+图片发送到朋友圈.这种方

android 滚动条下拉反弹的效果（类似微信朋友圈）

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动条实现的.下拉,当松开时候,反弹至原来的位置.下拉时候能看到背景图片.那么这里简单介绍一下这种效果的实现. 本文源码下载:点击 1.效果图 这部手机显示的分辨率有限,很老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; imp

Android：NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只有1张图时,可以自己定制图片宽高,也可以使用默认九宫格的宽高: 2.当只有4张图时,以2*2的方式显示: 3.除以上两种情况下,都是按照3列方式显示,但这时有一些细节: a.如果只有9张图,当然是以3*3的方式显示: b.如果超过9张图,可以设置是否全部显示. 如果设置不完全显示,则按照3*3的方式

微信朋友圈如何同时分享(图片+文字) Android版

以下是:微信朋友圈SDK 分享图片的代码,但只能分享图片,不能分享文字,如何才能图片和文字同时分享?求各位大神指教! public class MainActivity extends Activity {     private static final int THUMB_SIZE = 150;     private static final String SDCARD_ROOT = Environment.getExternalStorageDirectory().getAbsolute

Android 修改源码自定义SwipeRefreshLayout样式——高仿微信朋友圈下拉刷新

修改源码自定义SwipeRefreshLayout样式——高仿微信朋友圈下拉刷新 原文地址:https://www.cnblogs.com/zhujiabin/p/8194996.html

andriod 实现新浪、QQ空间、微信朋友圈、微信好友分享功能

前言:自己在学习的过程中的一些操作过程,对分享的一些理解.下面就讲解一下: 下载地址:http://download.csdn.net/detail/u014608640/7490357 首先,我们需要去ShareSdk官方网站http://sharesdk.cn/ 去下载ShareSDK ,然后我们会有4个文件: 根据我自己在学习的过程中只用到了第一个文件夹的 libs目录的2个项目,这2个是必须要的,是ShareSdk提供的,然后需要将这2个放入到自己做的项目当中去,在Res目录下有一个 S