安卓九宫格图片显示

最新推荐文章于 2024-03-30 12:45:05 发布
最新推荐文章于 2024-03-30 12:45:05 发布
阅读量2.1k 收藏 1
点赞数 2
分类专栏： 安卓开发 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28508571/article/details/69389144
版权

在开发中需要用到九宫格添加并显示图片，和qq空间发动态时一样。于是写了一个控件。
效果图:
这里写图片描述

实现思路

自定义一个继承LinearLayout的布局，显示方式为水平，然后添加三个显示方式为垂直的布局。根据需要显示图片的数量，控制布局的显示隐藏（比如只有一张图片就把第二行第三行都隐藏）。

核心代码

public class NineImageView extends LinearLayout {
    private Context context;
    private List<String> list;
    private int height;
    private int width;
    private int margin;
    private int imagesize;

    public NineImageView(Context context) {
        super(context);
    }

    RelativeLayout addView;
    LinearLayout.LayoutParams addParams;
    LinearLayout.LayoutParams baseParams;
    LinearLayout base0;
    LinearLayout base1;
    LinearLayout base2;

    public NineImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.list = new ArrayList<>();//存放图片地址的list
        this.margin = ScreenUtils.dip2px(context, 4);//图片显示的边距
        this.height = ScreenUtils.getScreenWidth(context) / 3;//布局的高
        this.width = ScreenUtils.getScreenWidth(context);//布局的宽
        this.imagesize = height - margin * 2;//图片的大小
        setOrientation(VERTICAL);
        createBaseView();
        createAddView();
    }
}

这里我们初始化了各种参数，为保证美观，设置每一张图片都是正方形。
下一步，添加三个垂直分布的布局

private void createBaseView() {
        baseParams = new LayoutParams(width, height);
        base0 = new LinearLayout(context);
        base0.setOrientation(HORIZONTAL);
        base1 = new LinearLayout(context);
        base1.setOrientation(HORIZONTAL);
        base2 = new LinearLayout(context);
        base2.setOrientation(HORIZONTAL);
        addView(base0, baseParams);
        addView(base1, baseParams);
        addView(base2, baseParams);
    }

添加一个加号按钮，如图：
这里写图片描述

private void createAddView() {
        addView = new RelativeLayout(context);
        addView.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.heart_add_bk));
        ImageView imageView = new ImageView(context);
        RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params1.addRule(RelativeLayout.CENTER_IN_PARENT);
        imageView.setImageDrawable(context.getResources().getDrawable(R.drawable.all_add));
        addView.addView(imageView, params1);
        addParams = new LayoutParams(imagesize, imagesize);
        addParams.setMargins(margin, margin, margin, margin);
        addView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null)
                    listener.OnAddClick();
            }
        });
    }

暴露几个函数，这里只给出添加图片的函数

public NineImageView addImage(String path) {
        this.list.add(path);
        initView();
        return this;
    }
public void commit() {
        postInvalidate();
    }

刷新布局

private void initView() {
        //先清空所有的图片
        base0.removeAllViews();
        base1.removeAllViews();
        base2.removeAllViews();
        if (list.size() <= 0) {//如果没有图片需要显示，直接添加按钮
            base0.addView(addView, addParams);
            showBase0();
        } else {
            switch (list.size() / 3) {
                case 0:
                    //3张以内，按钮在第一排
                    for (int i = 0; i < list.size(); i++) {
                        addImage(base0, list.get(i), i);
                    }
                    base0.addView(addView, addParams);
                    showBase0();
                    break;
                case 1:
                    //6张以内，按钮在第二排
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < list.size(); i++) {
                        addImage(base1, list.get(i), i);
                    }
                    base1.addView(addView, addParams);
                    showBase1();
                    break;
                case 2:
                    //9张以内，按钮在第三排
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < 6; i++) {
                        addImage(base1, list.get(i), i);
                    }
                    for (int i = 6; i < list.size(); i++) {
                        addImage(base2, list.get(i), i);
                    }
                    base2.addView(addView, addParams);
                    showBase2();
                    break;
                case 3:
                    //9张，按钮消失
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < 6; i++) {
                        addImage(base1, list.get(i), i);
                    }
                    for (int i = 6; i < 9; i++) {
                        addImage(base2, list.get(i), i);
                    }
                    showBase2();
                    break;
            }
        }
    }

    private void showBase0() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(GONE);
        base2.setVisibility(GONE);
    }

    private void showBase1() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(VISIBLE);
        base2.setVisibility(GONE);
    }

    private void showBase2() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(VISIBLE);
        base2.setVisibility(VISIBLE);
    }

    private void addImage(LinearLayout layout, String s, final int pos) {
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        LinearLayout.LayoutParams params = new LayoutParams(imagesize, imagesize);
        ImageUtils.getInstance(context).loadImage(s, imageView);
        params.setMargins(margin, margin, margin, margin);
        layout.addView(imageView, params);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null)
                    listener.OnImageClick(list.get(pos), pos);
            }
        });
    }

然后再根据自己需要，写一些其他的函数，比如remove函数之类的，再暴露出图片点击接口，按钮点击接口，就可以了。由于不是太复杂的需要，所以并没有多扩展什么功能，感兴趣的朋友可以自行扩展。
源代码：

/**
 * Created by simple on 2017/4/5.
 */

public class NineImageView extends LinearLayout {
    private Context context;
    private List<String> list;
    private int height;
    private int width;
    private int margin;
    private int imagesize;

    public NineImageView(Context context) {
        super(context);
    }

    RelativeLayout addView;
    LinearLayout.LayoutParams addParams;
    LinearLayout.LayoutParams baseParams;
    LinearLayout base0;
    LinearLayout base1;
    LinearLayout base2;

    public NineImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.list = new ArrayList<>();//存放图片地址的list
        this.margin = ScreenUtils.dip2px(context, 4);//图片显示的边距
        this.height = ScreenUtils.getScreenWidth(context) / 3;//布局的高
        this.width = ScreenUtils.getScreenWidth(context);//布局的宽
        this.imagesize = height - margin * 2;//图片的大小
        setOrientation(VERTICAL);
        createBaseView();
        createAddView();
    }

    private void createBaseView() {
        baseParams = new LayoutParams(width, height);
        base0 = new LinearLayout(context);
        base0.setOrientation(HORIZONTAL);
        base1 = new LinearLayout(context);
        base1.setOrientation(HORIZONTAL);
        base2 = new LinearLayout(context);
        base2.setOrientation(HORIZONTAL);
        addView(base0, baseParams);
        addView(base1, baseParams);
        addView(base2, baseParams);
    }

    private void createAddView() {
        addView = new RelativeLayout(context);
        addView.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.heart_add_bk));
        ImageView imageView = new ImageView(context);
        RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params1.addRule(RelativeLayout.CENTER_IN_PARENT);
        imageView.setImageDrawable(context.getResources().getDrawable(R.drawable.all_add));
        addView.addView(imageView, params1);
        addParams = new LayoutParams(imagesize, imagesize);
        addParams.setMargins(margin, margin, margin, margin);
        addView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null)
                    listener.OnAddClick();
            }
        });
    }

    private void initView() {
        //先清空所有的图片
        base0.removeAllViews();
        base1.removeAllViews();
        base2.removeAllViews();
        if (list.size() <= 0) {//如果没有图片需要显示，直接添加按钮
            base0.addView(addView, addParams);
            showBase0();
        } else {
            switch (list.size() / 3) {
                case 0:
                    //3张以内，按钮在第一排
                    for (int i = 0; i < list.size(); i++) {
                        addImage(base0, list.get(i), i);
                    }
                    base0.addView(addView, addParams);
                    showBase0();
                    break;
                case 1:
                    //6张以内，按钮在第二排
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < list.size(); i++) {
                        addImage(base1, list.get(i), i);
                    }
                    base1.addView(addView, addParams);
                    showBase1();
                    break;
                case 2:
                    //9张以内，按钮在第三排
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < 6; i++) {
                        addImage(base1, list.get(i), i);
                    }
                    for (int i = 6; i < list.size(); i++) {
                        addImage(base2, list.get(i), i);
                    }
                    base2.addView(addView, addParams);
                    showBase2();
                    break;
                case 3:
                    //9张，按钮消失
                    for (int i = 0; i < 3; i++) {
                        addImage(base0, list.get(i), i);
                    }
                    for (int i = 3; i < 6; i++) {
                        addImage(base1, list.get(i), i);
                    }
                    for (int i = 6; i < 9; i++) {
                        addImage(base2, list.get(i), i);
                    }
                    showBase2();
                    break;
            }
        }
    }

    private void showBase0() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(GONE);
        base2.setVisibility(GONE);
    }

    private void showBase1() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(VISIBLE);
        base2.setVisibility(GONE);
    }

    private void showBase2() {
        base0.setVisibility(VISIBLE);
        base1.setVisibility(VISIBLE);
        base2.setVisibility(VISIBLE);
    }

    private void addImage(LinearLayout layout, String s, final int pos) {
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        LinearLayout.LayoutParams params = new LayoutParams(imagesize, imagesize);
        ImageUtils.getInstance(context).loadImage(s, imageView);
        params.setMargins(margin, margin, margin, margin);
        layout.addView(imageView, params);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null)
                    listener.OnImageClick(list.get(pos), pos);
            }
        });
    }

    public NineImageView addImage(String path) {
        this.list.add(path);
        initView();
        return this;
    }

    public NineImageView addImage(List<PhotoInfo> list) {
        for (PhotoInfo info : list)
            this.list.add(info.getPhotoPath());
        initView();
        return this;
    }

    public NineImageView setImage(List<PhotoInfo> list) {
        this.list = new ArrayList<>();
        for (PhotoInfo info : list)
            this.list.add(info.getPhotoPath());
        initView();
        return this;
    }

    public ArrayList<String> getImageList() {
        return (ArrayList<String>) this.list;
    }

    public NineImageView remove(int position) {
        this.list.remove(position);
        initView();
        return this;
    }

    public void commit() {
        postInvalidate();
    }

    public NineImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    OnClickListener listener;

    public interface OnClickListener {
        void OnAddClick();

        void OnImageClick(String uri, int position);
    }

    public void setOnClickListener(OnClickListener listener) {
        this.listener = listener;
    }
}
Simple_android
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现九宫格图片控件
小口口的博客
08-24 1174
完全动态适配手机屏幕宽度；单张图片时可以自定义图片大小；可自定义多张图片之间的间距；可自定义最大限制长度；多张图片时根据间距自动计算图片的大小；可实现图片的点击功能；可实现图片的长按功能；大于9张图片时+n布局自动展示；+n布局可以在代码中自动修改样式；支持Glide等多种图片加载框架。
Android 仿朋友圈之九宫格多图显示(二)
shenggaofei的博客
11-03 6457
一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件效果： 一.介绍： 1、当只有1张图时，可以自己定制图片宽高，也可以使用默认九宫格的宽高； 2、当只有4张图时，以2*2的方式显示； 3、除以上两种情况下，都是按照3列方式显示，但这时有一些细节： a、如果只有9张图，当然是以3*3的方式显示； b、如果超过9张图，可...
Android宫格动态列数,android 朋友圈9宫格实现
weixin_33231055的博客
05-26 229
icon9宫格效果.png项目优化2019-10-101、有人提出经常new ImageView耗内存， 我现在直接new 9个ImageView，可重复使用这几个ImageView2、修复图片数量为4/7个的时候，高度没计算正确问题使用方式holder.pengYouQuanFlagLayout.setImgList(findBean);android:id="@+id/find_fragmen...
Android显示九宫图（自定义圆角，仿微信九宫格图）
weixin_44357587的博客
05-13 2001
详细解析Android显示九宫图（自定义圆角，仿微信九宫格图） 这是一个自定义九宫格图片框架，里面有设置圆角大小，还有当图片一张的时候控件自定义的大小，图片的间隔，四张图片的时候图片自定义为两行两列等等功能，为了更好解决九宫图问题所定义的一个框架，话不多说，上图上代码： 第一步：自定义控件–NineGridLayout // 九宫格显示的layout // 根据图片数量来调整显示 public class NineGridLayout extends ViewGroup { /**
Android 中关于九宫格图片的那些事
活在当下！输出快乐！
07-19 1397
文章目录背景拉伸对比定义与原理制作点九图片图片加工说明 背景 最近看了会书，然后有个知识点还是比较重要的。也对同学们的开发是有帮助的，这里简单的记录下。 拉伸对比 普通图片和九宫格图片拉伸效果对比如下图示： 从上面对比图中可看出，当普通图片拉伸后，背景图会变得模糊（左右两边的边缘线既变宽又变模糊了）；但是用的九宫格图片拉伸后却不会。 定义与原理 为了解决图片过度拉伸后显示模糊的问题，Android 专门设计了点九图片。 点九图片的扩展名是 png，文件名后常带有 “.9” 字样。因为把一张图片划分成了
自定义九宫格图片布局
02-19
本教程将详细讲解如何通过自定义ViewGroup来实现一个功能丰富的九宫格图片布局，支持图片的编辑、删除和添加。 首先，我们需要创建一个新的Java类，继承自`ViewGroup`。这个类将作为九宫格的基础容器，我们称之为`...
轻松实现安卓(Android)九宫格解锁
09-01
在Android开发中，自定义九宫格解锁是一种常见的功能，它可以用于提高应用程序的安全性并提供个性化的用户体验。本文将详细讲解如何实现一个简单的九宫格解锁界面。 首先，我们需要了解九宫格的基本结构。九宫格由9...
Android-Android图片选择预览九宫格图片控件拖拽排序九宫格图片控件
08-13
本文将详细讲解如何实现一个Android图片选择、预览功能，并且介绍如何设计一个支持拖拽排序的九宫格图片控件。 首先，让我们关注“Android图片选择”这一知识点。在Android中，我们可以利用系统的`Intent`来调用...
Android 九宫格的实现方法
09-05
以上就是实现一个基本的Android九宫格布局的方法。当然，实际开发中可能还需要处理点击事件、加载网络图片等复杂情况，但这个基础示例提供了一个良好的起点。通过自定义适配器和单元格视图，可以实现更多功能和个性...
Android编程简单实现九宫格示例
08-30
Android编程简单实现九宫格示例主要是指通过Android编程来实现九宫格布局的示例，通过 GridView 和 RelativeLayout 等控件来实现九宫格的布局和显示。 知识点一：GridView 控件的使用 在Android中，GridView 控件...
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
09-08
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
android九宫格布局简单demo
03-02
利用SimpleAdapter实现的GridView（九宫格）布局
android 图片选择（九宫格，图片选择，图片预览选择）
03-05
希望csdn能吧这个设置成0积分，安卓选择图片，图片预览。就是仿照微信查看选择图片使用的。喜欢的小伙伴拿去
Android 图片合成与图片切割-生成九宫格图
风吹草低见牛羊
02-26 491
1.列表图片放置在根目录下的Pictures里面。
Android---仿QQ空间动态九宫格图片预览(一)
最新发布
2401_84009626的博客
03-30 1074
这是一个图片查看库，实现图片浏览功能，支持pinch（捏合）手势或者点击放大缩小。支持在ViewPager中翻页浏览图片。PhotoView 是一款扩展自Android ImageView ，支持通过单点/多点触摸来进行图片缩放的智能控件。功能实用和强大。
Android 九宫格图片展示的实现
zeqiao的博客
11-22 9007
public class ImageAdapter extends RecyclerView.Adapter&amp;lt;ImageAdapter.MyViewHolder&amp;gt; { private List&amp;lt;String&amp;gt; mData; private final int mCountLimit = 9; private OnItemClickListener...
Android 控件使用教程（三）—— NineGridImageView 九宫格展示图片
热门推荐
负雪明烛
03-08 1万+
引子上文降到RecyclerView的使用，确实非常方便易用，而且样式多样，很灵活。但在图像展示时，经常有朋友圈和微博等9张图以内的图片展示需求，这时候，不是一个可以无限下滑的RecyclerVew能解决的图片显示问题。那就需要一个类似于GridView的，九张图显示控件。并且，这个控件应该能针对不同个数的图片都有很好的显示效果，使图片尽可能大的展示在特定空间区域之内，很荣幸能遇到这样的一个开源控件
android 最新 九宫格,Android开发中怎么显示一个九宫格图片
weixin_36164462的博客
05-26 613
Android开发中怎么显示一个九宫格图片发布时间：2020-11-21 15:09:33来源：亿速云阅读：86作者：Leah本篇文章给大家分享的是有关Android开发中怎么显示一个九宫格图片，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。具体方法如下：public abstract class NineGridAdapter {pr...
Android 九宫格显示多图或 item
未来很长，但我会努力的走下去。
09-22 3591
Android 九宫格显示多图或 item
android studio将图片按九宫格排列
06-06
您可以使用GridLayout布局来实现将图片按九宫格排列。GridLayout提供了一个网格布局，可以将组件按照行和列分布在一个网格中。下面是一个简单的示例： 1. 在您的布局文件中添加GridLayout： ``` android:id="@+...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值