Android GridView仿微信朋友圈显示图片
最近项目要求上传多图并且多图显示,而且要规则的显示,就像微信朋友圈的图片显示一样。
利用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.
本文已被整理到了《android微信开发教程汇总》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助。
上一篇: 网页中关闭IE的图像工具栏和XP主题