Android 仿钉钉圈子多图展示效果自定义View

最新推荐文章于 2024-05-12 09:36:07 发布
最新推荐文章于 2024-05-12 09:36:07 发布
阅读量821 收藏
点赞数 1
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzw398756924/article/details/105517735
版权

目录

1.需求分析

2.功能实现

2.1 确定ImageView宽高

2.2 确定ImageView摆放位置

2.3 设置间距及圆角

2.4 完整源码

3.功能说明

4.注意事项

5.最后

1.需求分析

首先来看钉钉--发现--圈子，实际多图展示效果

                                                          钉钉--发现--圈子 多图展示效果

 

  • 单图时限定最大高度及最大宽度，按比例缩放宽高，四周有圆角，ImageView的ScaleType为默认值

  • 2-9张图片时，为大小图混合排列，父view四周有圆角，ImageView的ScaleType为centerCrop

 

2.功能实现

实现效果

仿钉钉圈子多图展示效果

 

实现思路

自定义 NineGridView 继承于 CardView ，添加10个ImageView(其中一个为单图专用ImageView)到该View中，接下来

1）确定ImageView宽高

     重写onMeasure方法：获取当前View可用宽高，根据图片数量设置子View大小，根据图片数量及子View大小确定当前View高度，通过setMeasuredDimension存储测量的宽度和测量的高度

2）确定ImageView摆放位置

     重写onLayout方法：根据图片数量设置子view摆放位置

3）设置间距及圆角

 

2.1 确定ImageView宽高

  设当前View可展示宽高： width , height
            图片间间隔： space
 
  由钉钉圈子实际展示效果可知，当图片数量大于1时，小图宽高均为1:1，且小图宽高等于九张图时的宽高
  可得小图边长为
  baseLength = ( width - 2*space ) / 3
 
  下面根据图片数量确定ImageView宽高:
 
  1张图片 （限定最大高度及最大宽度，宽高按比例缩放）
   imageViewWidth = wrap_content
   imageViewHeight = wrap_content
   imageViewMaxWidth = width
   imageViewMaxHeight = 设定值/默认值
 
  2张图片 (横向排列，对分父view宽度)
   imageViewWidth = ( width - space ) / 2
   imageViewHeight = imageViewWidth
 
  3张图片 (大图在左，两张小图在右竖向排列)
   两张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
   大图宽高
   maxImageViewWidth = width - space - baseLength
   maxImageViewHeight = 2*baseLength + space
 
  4张图片 (大图在上，三张小图在下横向排列)
   大图宽高
   maxImageViewWidth = width
   maxImageViewHeight = width - space - baseLength
   三张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
 
  5张图片 (两张大图片在上横向排列，三张小图在下横向排列)
   两张大图宽高
   maxImageViewWidth = ( width - space ) / 2
   maxImageViewHeight = maxImageViewWidth
   三张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
 
  6张图片 (大图在左上角，五张图片围绕大图排列)
   五张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
   大图宽高
   maxImageViewWidth = width - space - baseLength
   maxImageViewHeight = 2*baseLength + space
 
  7张图片 (大图在上，六张小图分两行在下横向排列)
   六张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
   大图宽高
   maxImageViewWidth = width
   maxImageViewHeight = 1.5*baseLength
 
  8张图片 (两张大图片在上横向排列，六张小图分两行在下横向排列)
   六张小图宽高
   imageViewWidth = baseLength
   imageViewHeight = baseLength
   两张大图宽高
   maxImageViewWidth = ( width - space ) / 2
   maxImageViewHeight = maxImageViewWidth
 
  9张图片
   imageViewWidth = baseLength
   imageViewHeight = baseLength

具体代码实现为NineGridView中的measureChildView方法

2.2 确定ImageView摆放位置

/**
     * 子View位置摆放
     */
    private void layoutChildView() {
        //布局时要考虑 padding
        switch (mUrls.size()) {
            default:
            case 0:
            case 1:
                break;
            case 2:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 2) {
                        int width = childView.getMeasuredWidth();
                        childView.layout(mPaddingLeft + (i * (width + mSpace + mOverSpace)),
                                mPaddingTop,
                                mPaddingLeft + (i * (width + mSpace + mOverSpace)) + width,
                                mPaddingTop + width);
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 3:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 3) {
                        int width = childView.getMeasuredWidth();
                        int height = childView.getMeasuredHeight();
                        if (i == 0) {
                            childView.layout(mPaddingLeft, mPaddingTop, width + mPaddingLeft, mPaddingTop + height);
                        } else {
                            int count = i - 1;
                            childView.layout(mPaddingLeft + mMeasuredShowWidth - width,
                                    mPaddingTop + (count * mSpace) + (count * height),
                                    mPaddingLeft + mMeasuredShowWidth,
                                    mPaddingTop + ((count + 1) * height) + (count * mSpace));
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 4:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 4) {
                        int width = childView.getMeasuredWidth();
                        int height = childView.getMeasuredHeight();
                        if (i == 0) {
                            childView.layout(mPaddingLeft, mPaddingTop, width + mPaddingLeft, mPaddingTop + height);
                        } else {
                            int count = i - 1;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mMeasuredShowWidth - mBaseLength + mPaddingTop,
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mMeasuredShowWidth + mPaddingTop);
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 5:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 5) {
                        int width = childView.getMeasuredWidth();
                        if (i < 2) {
                            childView.layout(mPaddingLeft + (i * (width + mSpace + mOverSpace)),
                                    mPaddingTop,
                                    mPaddingLeft + (i * (width + mSpace + mOverSpace)) + width,
                                    mPaddingTop + width);
                        } else {
                            int count = i - 2;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + mSpace,
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + mSpace + width);
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 6:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 6) {
                        int width = childView.getMeasuredWidth();
                        int height = childView.getMeasuredHeight();
                        if (i == 0) {
                            childView.layout(mPaddingLeft, mPaddingTop, mPaddingLeft + width, height + mPaddingTop);
                        } else if (i < 3) {
                            int count = i - 1;
                            childView.layout(mPaddingLeft + mMeasuredShowWidth - width,
                                    mPaddingTop + (count * mSpace) + (count * height),
                                    mPaddingLeft + mMeasuredShowWidth,
                                    mPaddingTop + ((count + 1) * height) + (count * mSpace));
                        } else {
                            int count = i - 3;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + (2 * mSpace) + (2 * mBaseLength),
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + mMeasuredShowWidth);
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 7:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 7) {
                        int width = childView.getMeasuredWidth();
                        int height = childView.getMeasuredHeight();
                        if (i == 0) {
                            childView.layout(mPaddingLeft, mPaddingTop, mPaddingLeft + width, height + mPaddingTop);
                        } else if (i < 4) {
                            int count = i - 1;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + (int) (1.5 * height) + mSpace,
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + (int) (2.5 * height) + mSpace);
                        } else {
                            int count = i - 4;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + (int) (2.5 * height) + (2 * mSpace),
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + (int) (3.5 * height) + (2 * mSpace));
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 8:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    if (i < 8) {
                        int width = childView.getMeasuredWidth();
                        if (i < 2) {
                            childView.layout(mPaddingLeft + (i * (width + mSpace + mOverSpace)),
                                    mPaddingTop,
                                    mPaddingLeft + (i * (width + mSpace + mOverSpace)) + width,
                                    mPaddingTop + width);
                        } else if (i < 5) {
                            int count = i - 2;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + mSpace,
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + mSpace + width);
                        } else {
                            int count = i - 5;
                            childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + width + (2 * mSpace),
                                    mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                    mPaddingTop + ((mMeasuredShowWidth - mSpace) / 2) + (2 * width) + (2 * mSpace));
                        }
                    } else {
                        childView.layout(0, 0, 0, 0);
                    }
                }
                break;
            case 9:
                for (int i = 0; i < getChildCount() - 1; i++) {
                    View childView = getChildAt(i);
                    int width = childView.getMeasuredWidth();
                    int height = childView.getMeasuredHeight();
                    if (i < 3) {
                        childView.layout(mPaddingLeft + (i * mSpace) + (i * width),
                                mPaddingTop,
                                mPaddingLeft + (i * mSpace) + ((i + 1) * width),
                                mPaddingTop + height);
                    } else if (i < 6) {
                        int count = i - 3;
                        childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                mPaddingTop + height + mSpace,
                                mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                mPaddingTop + (2 * height) + mSpace);
                    } else {
                        int count = i - 6;
                        childView.layout(mPaddingLeft + (count * mSpace) + (count * width),
                                mPaddingTop + (2 * height) + (2 * mSpace),
                                mPaddingLeft + (count * mSpace) + ((count + 1) * width),
                                mPaddingTop + (3 * height) + (2 * mSpace));
                    }
                }
                break;
        }
    }

2.3 设置间距及圆角

间距：通过自定义属性 pictureSpace 获取间距值，在onLayout和onMeasure时对子view进行相应调整

圆角：通过继承于 CardView 沿用其设置圆角的功能

2.4 完整源码

 

3.功能说明

  • 该View继承于CardView以达到实现圆角的目的(也就是通过cardCornerRadius属性设置圆角值)

  • 圆角及实现效果因为不依赖于图片加载框架实现，所以可自行选用替换图片加载框架

  • 图片数量为一张时，按比例缩放图片，圆角不会随着图片宽高不同而变形

  • 提供自定义属性pictureMaxHeight：图片数量只有一张时该图最大显示高度

  • 提供自定义属性pictureSpace：图片之间的间隔距离

  • 填充网络图片：setUrls(List urls)

  • 监听图片点击事件：setCallback(NineGridView.Callback callback)

 

4.注意事项

  • 需在NineGridView中的TODO标注里自行替换当前项目所使用的图片加载框架

  • 该View中的ImageView，除了图片数量为1时，采用的是按比例自适应宽高(有最大高度及宽度限制)，其余情况下ImageView的宽高都是固定值。具体值由NineGridView能展示的最大宽度决定

  • 该View用于RecyclerView时，为了解决单图item被回收后，重新出现在屏幕时由于高度变化造成item跳动的问题，需要牺牲部分recyclerView的复用特性。具体表现为重写适配器getItemViewType方法，判断图片数量是否为1，是则将position返回作为itemViewType（写法参考）(实则最优解应该是为单图情况专门写一个itemLayout并赋予指定itemViewType)

 

5.最后

子文L
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Android图片和视频简单选择器
wen_zheng的博客
08-09 4086
一、点击title时切换图片和视频 1、修改AndroidManifest.xml文件，使用自定义主题 <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" an
Android仿微信微博多图展示效果
01-20
【Android仿微信微博多图展示效果】是一种在Android开发中实现类似微信朋友圈和微博的九宫格图片展示的自定义控件。这个控件通过自定义ViewGroup来达到灵活适应不同屏幕尺寸的效果，并且在单张图片展示时，开发者...
android多张图片展示
11-23
类似微信发朋友圈时的添加图片，，可以多选，方式包括从相册选择多张图片，拍照；添加后可删除
推荐开源项目：NineGridView - 优雅的九宫格图片展示控件
最新发布
gitblog_00089的博客
05-12 306
推荐开源项目：NineGridView - 优雅的九宫格图片展示控件 项目地址:https://gitcode.com/jeasonlzy/NineGridView 1、项目介绍 NineGridView 是一个专为 Android 设计的九宫格图片展示控件，灵感来源于QQ空间、微信朋友圈和微博主页等社交应用的图片展示方式。它能够自动适应图片数量，动态调整图片尺寸与控件大小，同时支持使用多种图片加...
android 拍照显示多张图片（网格布局）
chenhuzhu8238的博客
03-01 1307
效果图 Activity的代码，里面包含拍照，以及拍照返回的处理（目标版本是7.0的拍照代码不适用） package com.hjqjl.mulitimageselect; import android.content.Intent; import android.net.Uri; imp...
Android 多图上传后将图片进行九宫格展示
王鑫林的博客
11-18 670
不多说上代码 public abstract class NineGridAdapter { protected Context context; protected List list; public NineGridAdapter(Context context, List list) { this.context = context; this.list = list; } public abstract int getCou
android 提示内容,android多图显示，多出图片以文字提示
weixin_39743824的博客
06-04 315
可以控制最多显示多少个，多余最大数量则在最后一行以文字提示，通过控制maxSize大小来控制最多显示图片数量。效果如下图所示app:maxSize="2"image.pngapp:maxSize="5"image.pngapp:maxSize="9"image.png只有一行显示图片，多出来的图在最后一张图上显示图片总数量。1 需要用到的知识MeasureSpec.getSize(widthMea...
Android仿钉钉
11-27
在Android开发领域，"Android仿钉钉"是一个常见的项目实践，旨在模仿国内知名的企业通讯应用——钉钉的主要功能和界面设计。这个项目可以帮助开发者提升在Android平台上构建复杂应用的能力，尤其是涉及用户界面（UI...
自定义View系列：仿微信QQ等图片选择展示控件
01-03
本篇主要讲解如何实现一个简易的选择上传图片时的展示控件，该自定义控件继承自ViewGroup，支持网格排列，以及横向排列。最终效果如下图： 网格布局 水平布局 自定义View 上图中每个ImageView的右上角都有一个删除...
Android 自定义View实现芝麻分曲线图效果
09-01
本篇文章将探讨如何在Android中实现自定义View来展示类似芝麻分的曲线图效果。这种效果可以帮助用户直观地了解他们的信用评分变化，例如支付宝中的芝麻信用分。 1. **初始化View的属性** 在自定义View时，通常需要...
android列表多图单图视频展示
lihe641260的博客
09-07 715
无图不博客，上效果图： 该图片视频展示是基于RecyclerView实现，因项目需求变化频繁，所以自定义PowerfulRecyclerView实现展示功能，使用很简单 //图片类型 powerfulRecyclerView.setRecyclViewWidth(recycleViewWidth).bindData(da); 或 //视频类型 holder.powerfulRecyclerView.setRecyclViewWidth(recycleViewWidth).bindData(re
nine_grid_view:Flutter NineGridView和DragSortView。类似于微博微信的九个网格视图控件来显示图片。 Flutter仿微信微博九宫格，拖曳排序，微信类别，钉钉类别，QQ讨论组头像
03-21
语言：英语| NineGridView 类似于微博动力学，微信好友圈，九个网格视图控件来显示图片。支持单张大图预览。它还支持微信群组，DingTalk群组，QQ群组头像效果。 DragSortView 类似于微博/微信发布的动态图片选择九格视图。支持按放大效果，拖放排序，拖放到指定位置删除。 酒馆 dependencies : nine_grid_view : ^2.0.0 例子 import 'package:nine_grid_view/nine_grid_view.dart'; // bigImage param, It is recommended to use a medium-quality picture, because the original picture is too large and takes time to load. NineGridView(
android多张图片展示效果
04-02
Android 选择多张图片展示效果Demo代码。。。。。。。
Android 百度地图定位实现仿钉钉签到打卡功能的完整代码
01-03
导语 本章根据百度地图API，实现仿钉钉打卡功能。用到了基础地图、覆盖物、定位图层、陀螺仪方法、悬浮信息弹框。 百度地图API地址  ：Android 地图SDK 请先注册注册百度账号和获取密钥，并实现地图显示出来。（注意：密钥、权限要设置） 另外，我得说明本章所下载官方Demo 和 导入的jar包和so文件。自定义下载即可，如下图： 接下来，一起看实现效果。 源码Git地址：BaiduMapApp 效果图             实现代码·三步骤 第一步：基础地图和方向传感器 类先实现方向传感器 implements SensorEventListener @Override pub
Android自定义View分享——仿微信朋友圈图片合并效果
Kingfar Ou
10-18 4211
仿微信朋友圈图片合并效果。
Android-笔记 自定义ViewGroup仿微信朋友圈多图展示
丁青的Android学习笔记
07-21 392
多图展示自定义ViewGroup 天天都刷朋友圈，正好最近不那么忙，就当巩固一下知识了。先看效果图，如下图： 还有单图和四图的样式，图片点击事件和更多的点击事件都暴露出来了，回调里自个处理一下，挺简单的。 我就说一下思路和要注意的点吧，主要是动态添加imageview到ViewGroup里。我们都知道view的绘制流程有三要素，measure、layout、draw，一般我们需要继承一个view或者viewgroup，然后重写这三个方法。这个没什么好说的，都是根据自己的需求来的 。但是得提一下Measur
仿微信朋友圈【九宫格的实现】
热门推荐
风一样的男人
04-18 1万+
最近有个想法，想用环信的sdk去做个社交类的小demo玩。在此之前，先来模仿下微信的朋友圈九宫格效果。同时也兼容了QQ的做法，如果数据集大于九张时，就在最后一张图片上显示一层遮罩效果，并显示剩余图片的数量。之后的计划是仿微信的朋友圈评论、回复这方面的效果，在实际开发中还是比较实用的。老规矩，先来张效果图（录制的图片太大满足不了神经的CSDN上传要求，压缩又不清晰，所以还是放几张静态图吧） 需求分析
Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能
彬sir哥的博客
02-23 1401
一、测试 实现: 二、添加依赖包： implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.recyclerview:recyclerview:1.1.0' implementation 'com.github.iielse:ImageWatcher:1.1.5' implementation 'com.github.bumptech.glide:glide:4.10.0'
安卓开发高仿ＱＱ空间
Andream的博客
10-19 2585
最近天天满课没有时间写，一次可以的时间我发现了一个很好的第三方库ninegridview，官网地址：https://github.com/jeasonlzy/NineGridView　是一个很好的九宫格显示库，类似QQ空间，微信朋友圈，微博主页等，展示图片的九宫格控件，自动根据图片的数量确定图片大小和控件大小，使用Adapter模式设置图片，对外提供接口回调，使用接口加载图片,支持任意的图片加载框架
android仿钉钉时间选择年月日 时分
09-10
要实现Android仿钉钉时间选择年月日时分的功能，可以使用DatePicker和TimePicker组合的方式来实现。 首先，创建一个包含DatePicker和TimePicker的对话框，在布局文件中分别添加DatePicker和TimePicker组件，并设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值