【Android 控件使用及源码解析】 GridView规则显示图片仿微信朋友圈发图片

简介: 版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47304471 今天闲下来想用心写一点东西,发现没什么可写的,就写一下最近项目上用到的一些东西吧。
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47304471
今天闲下来想用心写一点东西,发现没什么可写的,就写一下最近项目上用到的一些东西吧。最近项目要求上传多图并且多图显示,而且要规则的显示,就像微信朋友圈的图片显示一样。
想了一下用GridView再适合不过了,GridView可以动态加载图片的数量,而且还比较规律。下面说一下自己的思路:
1.获取网络图片
2.初始化gridview,自定义适配器
3.根据图片数量设置gridview的列数
4.更新适配器

下面贴上部分源码并给大家解析一下
一、首先是GridView的item:
<com.view.SquareLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/item_grida_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:layout_margin="@dimen/tinyest_space">
    </ImageView>
</com.view.SquareLayout>
这里的SquareLayout布局是自定义的下面会给大家详细讲解。
子项中是一个正方形布局里面嵌套着图片

二、接下来自定义适配器
因为项目需求不同,自己定义的适配器和平时用的不太一样,这里就不贴源码了。大体上也是将图片下载到本地,用Imageloader加载,不过我这里有上传失败的和新建的,所以不太一样。

三、最后在用到的Activity中设置
noScrollgridview = (GridView) findViewById(R.id.noScrollgridview);
        noScrollgridview.setNumColumns(3);  //默认设置在3列图片
        //上传成功传值给adapter
        picAdapter = new PictureAdapter(this, 1, appItem_file);
        noScrollgridview.setAdapter(picAdapter);

//根据图片数量设置图片的列
        int size = appItemFile.getFiles().split(",").length;
        if (size==1){
            noScrollgridview.setNumColumns(1);
        }
        else if (size==2){
            noScrollgridview.setNumColumns(2);
        }
        else if (size>2){
            noScrollgridview.setNumColumns(3);
        }
        picAdapter.notifyDataSetChanged();
默认设置GridView的列数为3,根据图片的数量动态设置列数。

最后贴上SquareLayout的源码解析一下
/**
 * 方形布局
 */
public class SquareLayout extends RelativeLayout {
	public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public SquareLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

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

	@SuppressWarnings("unused")
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// For simple implementation, or internal size is always 0.
		// We depend on the container to specify the layout size of
		// our view. We can't really know what it is since we will be
		// adding and removing different arbitrary views and do not
		// want the layout to change as this happens.
		setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
				getDefaultSize(0, heightMeasureSpec));

		// Children are just made to fill our space.
		int childWidthSize = getMeasuredWidth();
		int childHeightSize = getMeasuredHeight();
		// 高度和宽度一样
		heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(
				childWidthSize, MeasureSpec.EXACTLY);
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}
}
这里主要重写了onMeasure()方法,设置了高宽,需要注意的是在用SquareLayout的时候要设置它的高宽都是match_parent。这样就可以填满GridView的每一项了。
接下来贴图给大家看:

很整齐有没有
ImgeView的scaleType的属性如果设置FitXY就会充满方形布局,如果center就会居中显示
详细说一下吧:
1)center:保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理。
2)centerCrop:以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理。
3)centerInside:以原图完全显示为目的,将图片的内容完整居中显示,通过按比例缩小原图的size宽(高)等于或小于ImageView的宽(高)。如果原图的size本身就小于ImageView的size,则原图的size不作任何处理,居中显示在ImageView。
4)matrix:不改变原图的大小,从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理
5)fitCenter:把原图按比例扩大或缩小到ImageView的ImageView的高度,居中显示
6)fitEnd:把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的下部分位置
7)fitStart:把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的上部分位置
8)fitXY:把原图按照指定的大小在View中显示,拉伸显示图片,不保持原比例,填满ImageView.

ok就先这样了,以后我会经常更新博客和大家分享的

相关文章
|
23天前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
37 0
|
1月前
|
Python
区域代理分红商城系统开发源码片段示例规则解析
level = Column(Integer, default=1) # 代理等级,例如:1代表普通用户,2代表初级代理,3代表高级代理等 parent_id = Column(Integer, ForeignKey('user.id')) # 上级代理ID 【更全面的开发源码搭建可V or TG我昵称】 parent = relationship("User", remote_side=[id]) # 上级代理对象
|
1月前
|
Python
潮玩元宇宙游戏开发基础示例规则解析
# 潮玩角色类 class ToyCharacter: def __init__(self, x, y): self.x = x self.y = y self.image = pygame.Surface([50, 50]) self.image.fill(RED) self.rect = self.image.get_rect() self.rect.x = x self.rect.y = y self.change
|
1月前
|
XML 存储 JavaScript
Fiori Elements 框架里 Smart Table 控件工作原理的深入解析
Fiori Elements 框架里 Smart Table 控件工作原理的深入解析
16 0
|
28天前
|
测试技术 编译器 vr&ar
CMake深度解析:掌握add_custom_command,精通Makefile生成规则(一)
CMake深度解析:掌握add_custom_command,精通Makefile生成规则
64 1
|
28天前
|
存储 Linux C++
CMake深度解析:掌握add_custom_command,精通Makefile生成规则(二)
CMake深度解析:掌握add_custom_command,精通Makefile生成规则
30 0
|
30天前
|
资源调度 算法 Linux
Linux进程/线程的调度机制介绍:详细解析Linux系统中进程/线程的调度优先级规则
Linux进程/线程的调度机制介绍:详细解析Linux系统中进程/线程的调度优先级规则
49 0
|
1月前
|
小程序 JavaScript 前端开发
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
|
6天前
|
小程序 前端开发 API
深入解析微信小程序全栈开发流程
【4月更文挑战第12天】本文详述了微信小程序全栈开发流程,从需求分析到发布运营。首先,需进行需求分析与规划,明确目标用户和功能。接着,前端开发使用WXML和WXSS构建页面,JavaScript处理逻辑,结合微信API实现交互。后端开发涉及数据库设计、业务逻辑处理、API接口开发及服务器运维。完成后的调试与测试确保质量,最后发布并持续优化。全栈开发涉及多种技能,理解整个流程对创建优质小程序至关重要。
|
11天前
|
人工智能 小程序 Java
Java智慧校园系统源码 微信小程序+电子班牌
通过设备管理对百纳智慧校园的智慧班牌以及百纳智慧屏(校牌)进行统一集中式管理,支持浏览所有设备的基本信息以及在离线状态,支持添加设备、设备一键开关机、一键重启、设置节假日开关机时间、设置日常开关机时间、远程班牌截屏、远程班牌升级等操作。

推荐镜像

更多