美文网首页Android干货自定义viewAndroid知识
NineImageForCircleFriends朋友圈九宫格

NineImageForCircleFriends朋友圈九宫格

作者: 菜鸟_一枚 | 来源:发表于2017-03-29 17:46 被阅读214次

需求

  • 当只有一张的时候,显示一张图片(宽度是整个手机宽度(去掉左右margin和padding值))
  • 当有两张和四张图片的时候,图片的宽度是整个宽度的1/2,当然要剔除margin和padding值
  • 当图片是3,5,6,7,8,9张的时候,显示的是类似于微信九宫格的图片

主要的测量方法

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = 0;
        int totalWidth = width - getPaddingLeft() - getPaddingRight();
        if (mImageInfo != null && mImageInfo.size() > 0) {
            if (mImageInfo.size() == 1) {
                gridWidth = singleImageSize > totalWidth ? totalWidth : singleImageSize;
                gridHeight = (int) (gridWidth / singleImageRatio);
                //矫正图片显示区域大小,不允许超过最大显示范围
                if (gridHeight > singleImageSize) {
                    float ratio = singleImageSize * 1.0f / gridHeight;
                    gridWidth = (int) (gridWidth * ratio);
                    gridHeight = singleImageSize;
                }
            } else if (mImageInfo.size() == 2 || mImageInfo.size() == 4) {

                //如果当为2张或者4张图片的时候   就按照总宽度的  1/2
                gridWidth = gridHeight = (totalWidth - gridSpacing * (columnCount - 1)) / columnCount;
                //这里无论是几张图片,宽高都按总宽度的 1/3
//                gridWidth = gridHeight = (totalWidth - gridSpacing ) / 2;
            } else {
                gridWidth = gridHeight = (totalWidth - gridSpacing * 2) / 3;
            }
            width = gridWidth * columnCount + gridSpacing * (columnCount - 1) + getPaddingLeft() + getPaddingRight();
            height = gridHeight * rowCount + gridSpacing * (rowCount - 1) + getPaddingTop() + getPaddingBottom();

        }
        setMeasuredDimension(width, height);
    }

效果图

项目地址

https://github.com/wuyinlei/NineImageForCircleFriends

参考

https://github.com/jeasonlzy/NineGridView

相关文章

  • NineImageForCircleFriends朋友圈九宫格

    需求 当只有一张的时候,显示一张图片(宽度是整个手机宽度(去掉左右margin和padding值)) 当有两张和四...

  • Python 带你一键生成朋友圈超火的九宫格短视频

    1. 场景 如果你经常刷抖音和微信朋友圈,一定发现了最近九宫格短视频很火! ​从朋友圈九宫格图片,到九宫格视频,相...

  • 九宫格

    转发了一组刘导的朋友圈九宫格照片,唯美且真实,有我的朋友圈好友继续转发,没有玩好的复制九宫格,照片顿然失色,突然...

  • 【Excel篇】制作“朋友圈”九宫格图片(照片)

    前面,分享过【PPT篇】制作九宫格图片(照片)。下面带来利用Excel制作“朋友圈”九宫格图片(照片)实操技巧! ...

  • 如果制作朋友圈首页九宫格视频?

    首先在朋友圈发布九张黑色图片形成九宫格样式并截图。 然后用剪映制作九宫格里的内容素材。 ...

  • 2018,最温暖的九个瞬间

    现在的我们,但凡发个朋友圈,九宫格是少不了的。而当我参与“互加”,每次鱼塘打卡,九宫格也是避免不了的。看似简...

  • 有啥可拍的

    刚刷朋友圈看到闺蜜晒了九宫格,都是她老板的写真,背景是江南水乡。 这是哪里,感觉有点像“乌镇”,我在她九宫格下面留...

  • 手机摄影入门学习笔记(五)

    第5课:社交:你真的会发朋友圈吗? 朋友圈,不单能展示我们的生活,也能体现我们摄影和审美水平。 玩转九宫格 朋友圈...

  • PS教程!你不得不知的常用技巧(10)

    10.九宫格图片效果(切片) 我们经常看到朋友圈或者微博都有这种九宫格样式的图片,比如表情包什么的。很有意思。由九...

  • 河南路往事

    河南路往事 文|筠心 前些天,浏览微信朋友圈,琦琦阿姨发九宫格,...

网友评论

    本文标题:NineImageForCircleFriends朋友圈九宫格

    本文链接:https://www.haomeiwen.com/subject/cclyottx.html