Android GridView仿微信朋友圈顯示圖片
最近項目要求上傳多圖并且多圖顯示,而且要規(guī)則的顯示,就像微信朋友圈的圖片顯示一樣。
利用GridView再適合不過了,GridView可以動態(tài)加載圖片的數量,而且還比較規(guī)律,下面說一下自己的思路:
- 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,根據圖片的數量動態(tài)設置列數。
最后貼上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微信開發(fā)教程匯總》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助。
相關文章
完美解決客戶端webview持有的頁面緩存,不會立即釋放的問題
下面小編就為大家?guī)硪黄昝澜鉀Q客戶端webview持有的頁面緩存,不會立即釋放的問題。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12Android ScrollView實現橫向和豎向拖動回彈效果
這篇文章主要為大家詳細介紹了Android ScrollView實現橫向和豎向拖動回彈效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09webview添加參數與修改請求頭的user-agent實例
這篇文章主要介紹了webview添加參數與修改請求頭的user-agent實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03詳解Android Scroller與computeScroll的調用機制關系
這篇文章主要介紹了詳解Android Scroller與computeScroll的調用機制關系的相關資料,需要的朋友可以參考下2016-01-01