Android编程UI设计之GridView和ImageView的用法

本文实例讲述了Android编程UI设计之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. 简单说,GridView就是我们资源管理器平常见到的一个个文件的icon显示方式。

上面提及到了,GridView的Item是来自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,但很多时候自定义的Adapter都是override ListAdapter的父类Adapter接口里面的方法:

int     getCount()               获取当前Adapter的Items数目
Object getItem(int position)     获取相应position的Item
long     getItemId(int position)  获取相应position的Item在List中的row id
View    getView(int position, View convertView, ViewGroup parent) 获取在指定position所要显示的data的View

这些方法函数和swing的差不多,都是基于MVC。大概原理过程是这样的:程序需要显示GridView,那么要把data一个一个地显示出来是通过一个for循环,首先call Adapter.getCount()得到有多少个data,然后position++地getItem,getView得到要显示的view,这样子逐一地显示出来!

下面是官方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));//设置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,以便重用,减少对象的创建,减少内存占用。

XML布局文件内容,原来就只是指明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是重点,影响图片的显示效果。而且发现列数是不确定的,取决于每个ImageView的宽度和屏幕的宽度。接下来看看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就是用来显示Image,icon的。

这里我们重点理解ImageView的属性android:scaleType,即ImageView.setScaleType(ImageView.ScaleType)。android:scaleType是控制图片如何resized/moved来匹对ImageView的size。ImageView.ScaleType / android:scaleType值的意义区别:

CENTER /center  按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示
CENTER_CROP / centerCrop  按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)
CENTER_INSIDE / centerInside  将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
FIT_CENTER / fitCenter  把图片按比例扩大/缩小到View的宽度,居中显示
FIT_END / fitEnd   把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置
FIT_START / fitStart  把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置
FIT_XY / fitXY  把图片不按比例扩大/缩小到View的大小显示
MATRIX / matrix 用矩阵来绘制

一开始我不明白MATRIX矩阵,网上搜索后发现原来MATRIX矩阵可以动态缩小放大图片来显示,这里不展开深入的了解,只是贴出相关语句,缩小图片:

//获得Bitmap的高和宽 int bmpWidth=bmp.getWidth(); int bmpHeight=bmp.getHeight(); //设置缩小比例 double scale=0.8; //计算出这次要缩小的比例 scaleWidth=(float)(scaleWidth*scale); scaleHeight=(float)(scaleHeight*scale); //产生resize后的Bitmap对象 Matrix matrix=new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Bitmap resizeBmp=Bitmap.createBitmap(bmp, 0, 0, bmpWidth, bmpHeight, matrix, true);

应用ImageView的例子很多,看看上次FrameLayout里面的:

<ImageView android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="center" android:src="@drawable/candle" />

这里注意一点,我发现Drawable文件夹里面的图片命名是不能大写的。

希望本文所述对大家Android程序设计有所帮助。

时间: 2024-09-21 11:28:16

Android编程UI设计之GridView和ImageView的用法的相关文章

Android手机UI设计分辨率基础知识

1.术语和概念 Android手机ui设计分辨率基础知识 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 Aspect Ratio(宽高比率) 指的是实际的物理尺寸宽高比率,分为long和nolong Milestone是16:9,属于long Resolution(分辨率) 和电脑的分辨率概念一样,指手机屏幕纵.横方向像素个数 Milestone是854*480 DPI(dot

界面-android 页面UI设计,页面美化

问题描述 android 页面UI设计,页面美化 我做的是一个品牌列表,现在和电话本一样,没有灵感不知道从哪里美化,功能不是太多 ,所以加功能应该是不会了,(本来我是想加个扫一扫和侧滑栏的),求设计大神帮我设计一下开发界面美化"> 解决方案 建议你去看下google新的设计规范http://www.uisdc.com/comprehensive-material-design-note 解决方案二: 字体大小,颜色,要区分主次,适当加一些icon 解决方案三: 不好意思,赚取积分... 解

Android应用UI设计流程

Android应用UI设计流程 设计原理 1.在移动设计中,使用环境是最关键的因素.原型设计方法必须考虑尺寸因素 2.用户测试必须涵盖运动.声音和多点触控等方面: 进行移动设计和测试时,请将你知道的有关与计算机交互的一切都抛到 脑后.与计算机交互时,用户只使用鼠标和键盘,这种大一统模式并不 适用于移动设备.移动时代的一个重要特征是充分利用人体的自然运动: 刮划表示深入挖掘:摇动表示拒绝:将手机放到耳边表示要说话.从语 音识别数字助理到计步器(它利用GPS传感器根据身体摇摆情况判断日 常身体活动的

浅谈AnDroidDraw+DroidDraw实现Android程序UI设计的分析说明_Android

AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序,它允许你从 DroidDraw 应用 程序下载你的 GUIs, 也允许你在一个 Android 设备上预览你的 GUIs1.先下载安装DroidDraw,我使用的版本是droiddraw-r1b222.下载AnDroidDraw.apk,并在模拟器上进行安装,安装步骤如下: 1)使用cmd进入命令行窗口,进入你安装的android-sdk下的platform-tools目录,如图: 2)使用: adb ins

Android的UI设计与后台线程交互

本文将讨论Android应用程序的线程模型以及如何使用线程来处理耗时较长的操作,而不是在主线程中执行,保证用户界面(UI)的流畅运行.本文还将阐述一些用户界面(UI)中与线程交互的API.UI用户界面线程 当应用程序启动时,系统会为应用程序创建一个主线程(main)或者叫UI线程,它负责分发事件到不同的组件,包括绘画事件.完成你的应用程序与Android UI组件交互.例如,当您触摸屏幕上的一个按钮时,UI线程会把触摸事件分发到组件上,更改状态并加入事件队列,UI线程会分发请求和通知到各个组件,

浅谈AnDroidDraw+DroidDraw实现Android程序UI设计的分析说明

AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序,它允许你从 DroidDraw 应用 程 序下载你的 GUIs, 也允许你在一个 Android 设备上预览你的 GUIs 1.先下载安装DroidDraw,我使用的版本是droiddraw-r1b22 2.下载AnDroidDraw.apk,并在模拟器上进行安装,安装步骤如下: 1)使用cmd进入命令行窗口,进入你安装的android-sdk下的platform-tools目录,如图: 2)使用: adb

Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)_Android

好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下:         通过观察QQ空间的运行效果,发现

Android UI设计系列之自定义DrawView组件实现数字签名效果(5)_Android

最近项目中有个新的需求,用户在完交易需要进行输入支付密码付款的时候,要让用户签下自己的签名,提起到数字签名这个东西,感觉有点高大上,后来想想数字签名的原理也不是太复杂,主要实现原理就是利用了View的绘图原理,把用户在屏幕上的手指移动轨迹显示在屏幕上,接着把在屏幕上显示的轨迹View转换成一张图片,最后把图片保存到本地或者上传到服务器... 还是老规矩,首先看一下工程目录吧: public class DrawView extends View { /** * 签名画笔 */ private P

Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)_Android

本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能.分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果.效果图如下: 1.GridView 首先,自定义一个GridImageAdapter图片适配器