Android編程UI設(shè)計(jì)之GridView和ImageView的用法
本文實(shí)例講述了Android編程UI設(shè)計(jì)之GridView和ImageView的用法。分享給大家供大家參考,具體如下:
GridView: A view that shows items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view. 簡(jiǎn)單說(shuō),GridView就是我們資源管理器平常見(jiàn)到的一個(gè)個(gè)文件的icon顯示方式。
上面提及到了,GridView的Item是來(lái)自ListAdapter的,所以一般在Activity的onCreate使用GridView的代碼:
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.grid_2); GridView g = (GridView) findViewById(R.id.myGrid); g.setAdapter(new ImageAdapter(this)); }
而ImageAdapter一般是extends BaseAdapter。BaseAdapter是implements ListAdapter SpinnerAdapter,但很多時(shí)候自定義的Adapter都是override ListAdapter的父類(lèi)Adapter接口里面的方法:
int getCount() 獲取當(dāng)前Adapter的Items數(shù)目
Object getItem(int position) 獲取相應(yīng)position的Item
long getItemId(int position) 獲取相應(yīng)position的Item在List中的row id
View getView(int position, View convertView, ViewGroup parent) 獲取在指定position所要顯示的data的View
這些方法函數(shù)和swing的差不多,都是基于MVC。大概原理過(guò)程是這樣的:程序需要顯示GridView,那么要把data一個(gè)一個(gè)地顯示出來(lái)是通過(guò)一個(gè)for循環(huán),首先call Adapter.getCount()得到有多少個(gè)data,然后position++地getItem,getView得到要顯示的view,這樣子逐一地顯示出來(lái)!
下面是官方sample里面的Photo Grid的例子,本人省略了某些代碼:
public class ImageAdapter extends BaseAdapter { public ImageAdapter(Context c) { mContext = c; } public int getCount() { return mThumbIds.length; } public Object getItem(int position) { return position; } public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; if (convertView == null) { imageView = new ImageView(mContext); imageView.setLayoutParams(new GridView.LayoutParams(45, 45));//設(shè)置ImageView寬高 imageView.setAdjustViewBounds(false); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; } imageView.setImageResource(mThumbIds[position]); return imageView; } private Context mContext; private Integer[] mThumbIds = { R.drawable.sample_thumb_0, R.drawable.sample_thumb_1, R.drawable.sample_thumb_2, R.drawable.sample_thumb_3, R.drawable.sample_thumb_4, R.drawable.sample_thumb_5, R.drawable.sample_thumb_6, R.drawable.sample_thumb_7 }; }
留意getView里面的代碼,要判斷convertView是否為null,以便重用,減少對(duì)象的創(chuàng)建,減少內(nèi)存占用。
XML布局文件內(nèi)容,原來(lái)就只是指明GridView:
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/myGrid" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:numColumns="auto_fit" android:columnWidth="60dp" android:stretchMode="columnWidth" android:gravity="center" />
可以看到getView,和ImageView是重點(diǎn),影響圖片的顯示效果。而且發(fā)現(xiàn)列數(shù)是不確定的,取決于每個(gè)ImageView的寬度和屏幕的寬度。接下來(lái)看看ImageView。
ImageView:Displays an arbitrary image, such as an icon. The ImageView class can load images from various sources (such as resources or content providers), takes care of computing its measurement from the image so that it can be used in any layout manager, and provides various display options such as scaling and tinting。 ImageView就是用來(lái)顯示Image,icon的。
這里我們重點(diǎn)理解ImageView的屬性android:scaleType,即ImageView.setScaleType(ImageView.ScaleType)。android:scaleType是控制圖片如何resized/moved來(lái)匹對(duì)ImageView的size。ImageView.ScaleType / android:scaleType值的意義區(qū)別:
CENTER /center 按圖片的原來(lái)size居中顯示,當(dāng)圖片長(zhǎng)/寬超過(guò)View的長(zhǎng)/寬,則截取圖片的居中部分顯示
CENTER_CROP / centerCrop 按比例擴(kuò)大圖片的size居中顯示,使得圖片長(zhǎng)(寬)等于或大于View的長(zhǎng)(寬)
CENTER_INSIDE / centerInside 將圖片的內(nèi)容完整居中顯示,通過(guò)按比例縮小或原來(lái)的size使得圖片長(zhǎng)/寬等于或小于View的長(zhǎng)/寬
FIT_CENTER / fitCenter 把圖片按比例擴(kuò)大/縮小到View的寬度,居中顯示
FIT_END / fitEnd 把圖片按比例擴(kuò)大/縮小到View的寬度,顯示在View的下部分位置
FIT_START / fitStart 把圖片按比例擴(kuò)大/縮小到View的寬度,顯示在View的上部分位置
FIT_XY / fitXY 把圖片不按比例擴(kuò)大/縮小到View的大小顯示
MATRIX / matrix 用矩陣來(lái)繪制
一開(kāi)始我不明白MATRIX矩陣,網(wǎng)上搜索后發(fā)現(xiàn)原來(lái)MATRIX矩陣可以動(dòng)態(tài)縮小放大圖片來(lái)顯示,這里不展開(kāi)深入的了解,只是貼出相關(guān)語(yǔ)句,縮小圖片:
//獲得Bitmap的高和寬 int bmpWidth=bmp.getWidth(); int bmpHeight=bmp.getHeight(); //設(shè)置縮小比例 double scale=0.8; //計(jì)算出這次要縮小的比例 scaleWidth=(float)(scaleWidth*scale); scaleHeight=(float)(scaleHeight*scale); //產(chǎn)生resize后的Bitmap對(duì)象 Matrix matrix=new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Bitmap resizeBmp=Bitmap.createBitmap(bmp, 0, 0, bmpWidth, bmpHeight, matrix, true);
應(yīng)用ImageView的例子很多,看看上次FrameLayout里面的:
<ImageView android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="center" android:src="@drawable/candle" />
這里注意一點(diǎn),我發(fā)現(xiàn)Drawable文件夾里面的圖片命名是不能大寫(xiě)的。
希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。
- 提升Android應(yīng)用視覺(jué)吸引效果的10個(gè)UI設(shè)計(jì)技巧
- 淺談AnDroidDraw+DroidDraw實(shí)現(xiàn)Android程序UI設(shè)計(jì)的分析說(shuō)明
- Android UI設(shè)計(jì)系列之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果(1)
- Android UI設(shè)計(jì)系列之自定義TextView屬性實(shí)現(xiàn)帶下劃線的文本框(4)
- Android UI設(shè)計(jì)系列之自定義DrawView組件實(shí)現(xiàn)數(shù)字簽名效果(5)
- Android UI設(shè)計(jì)系列之HTML標(biāo)簽實(shí)現(xiàn)TextView設(shè)置中文字體加粗效果(6)
- Android UI設(shè)計(jì)系列之自定義Dialog實(shí)現(xiàn)各種風(fēng)格的對(duì)話框效果(7)
- Android UI設(shè)計(jì)系列之自定義ListView仿QQ空間阻尼下拉刷新和漸變菜單欄效果(8)
- Android項(xiàng)目開(kāi)發(fā)之UI設(shè)計(jì)器
- Android UI設(shè)計(jì)系列之自定義ViewGroup打造通用的關(guān)閉鍵盤(pán)小控件ImeObserverLayout(9)
相關(guān)文章
Android自定義控件之組合控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Android自定義控件之組合控件學(xué)習(xí)筆記,具有一定的實(shí)用性和參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05Flutter實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的方法示例
這篇文章主要介紹了Flutter實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03詳解Android中點(diǎn)擊事件的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了Android中點(diǎn)擊事件的實(shí)現(xiàn)方式,點(diǎn)擊事件的實(shí)現(xiàn)分為3中,詳細(xì)的介紹了三種的用法,有興趣的可以了解一下。2016-12-12Ubuntu 14.04下創(chuàng)建Genymotion安卓虛擬機(jī)的步驟詳解
Android 模擬器一直以速度奇慢無(wú)比著稱,基本慢到不可用。本文介紹我一直在用的 Genymotion,速度不亞于真機(jī)。而且功能齊全,使用簡(jiǎn)單。下面這篇文章主要介紹了Ubuntu 14.04下創(chuàng)建Genymotion虛擬機(jī)的步驟,需要的朋友可以參考下。2017-03-03Android中g(shù)ravity與layout_gravity的使用區(qū)別分析
本篇文章介紹了,在Android中g(shù)ravity與layout_gravity的使用區(qū)別分析。需要的朋友參考下2013-04-04android幾種不同對(duì)話框的實(shí)現(xiàn)方式
這篇文章介紹了android幾種不同對(duì)話框的實(shí)現(xiàn),主要包括:1、顯示提示消息的對(duì)話框.2、簡(jiǎn)單列表項(xiàng)對(duì)話框。3、單選列表項(xiàng)對(duì)話框。4、多選列表對(duì)話框。5、自定義列表項(xiàng)對(duì)話框。6、自定義View的對(duì)話框,需要的朋友可以參考下2015-08-08Android使用Dialog風(fēng)格彈出框的Activity
這篇文章主要為大家詳細(xì)介紹了Android使用Dialog風(fēng)格彈出框的Activity,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09