GridView如何适配不同屏幕

GridView和ListView一样,都是项目中常用的控件之一,那么本篇文章要讲的是GridView如何适应不同大小的屏幕,首先,我们来看一张效果图,如下:

每行为四个item,上下左右间距大概2dp,而且会根据不同的屏幕大小,每个item中的图片随之缩放或放大以适应屏幕(始终保持正方形的样子),我们大多数在使用GridView的时候可能会把columnWidth设置了一个定值如70dp,然后numColumns为自动适配,这样虽然也可以,但是很影响用户体验,那么像上图这样的效果,应该怎么实现呢?

已经不屑于看这篇文章的大牛们请绕道啦,那么还不会实现这种效果的童鞋们此刻有什么思路呢?如何才能保证每行四个item,且自动适应屏幕大小?我们一步一步来分析:首先保证每行四个item不是很简单的事情嘛,把numColumns="4"不就可以了?然后呢,如何确定每个item的宽高呢?其实同样很简单,要想根据屏幕大小来决定item的宽高,不就得先知道屏幕的宽度吗?

WindowManager windowManager = getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        wh=display.getWidth();

得到的wh即为屏幕的宽度,不过要注意,这个得出的是像素px,然后再利用一个简单的数学计算算出每个item在屏幕中应占的宽度——已知每行四个item,每行的宽度是wh,每个item间相互距离是2,求每个item的宽度?

解:每个item的宽度=(wh-(5*2))/4;

即:行宽-各间距后再除以每行item的个数不就得出每个item应占的宽度了吗,然后高度和宽度相等即可。

但还有一个问题是,我们在xml中定义时,一般都用的dp而非px,这如何解决?那么我们把dp转换为px不就成了吗?

public static int Dp2Px(Context context, float dp) {
			    final float scale = context.getResources().getDisplayMetrics().density;
			    return (int) (dp * scale + 0.5f);
			}

此方法即dp转px,先看下xml中的GridView:

        <GridView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fadingEdge="none"
            android:gravity="center_horizontal"
            android:horizontalSpacing="2dp"
            android:listSelector="@null"
            android:numColumns="4"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:verticalSpacing="2dp" >
        </GridView>

numColumns="4",verticalSpacing和horizontalSpacing都为2dp,那么我们在计算item的宽高时就要这样算:(wh -(5 * Dp2Px(context, 2)))/4;将2dp转为像素值即可,而GridView与屏幕两边的距离我们可以设置marginLeft="2dp",marginRight="2dp"即可。

然后我们在adapter中的getView方法中动态设置每个item的宽高(注意:item的布局文件不要设置固定宽高,全部fill_parent即可):

 AbsListView.LayoutParams param = new AbsListView.LayoutParams(宽度,高度);
		 convertView.setLayoutParams(param);

最后再return convertView即可。

时间: 2024-10-11 01:13:10

GridView如何适配不同屏幕的相关文章

XSuperMES移动端运用FragmentActivity适配大屏幕(一)

XSuperMES移动端运用FragmentActivity适配大屏幕 XSuperMES移动端运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套app,然后拷贝一份,修改布局以适应什么超级大屏的.难道无法做到一个app可以同时适应手机和平板吗?答案是,当然有,那就是Fragment.Fragment出现的初衷就是为了解决这样的问题. 你可以把Fragment当成Activity一个界面的一部分,甚至Activity的界面由完全不

CSS3自适配手机屏幕[转]

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-sc

Web App适配不同屏幕的几点建议

安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视区(viewport)所谓的视区指的是Web页面绘制的矩形区域.viewport有很多属性是我们可以设置的,比如视区的大小和初始比例.其中最重要的一个是要指定视区的宽度,它是网页展示的水平像素点的总数量(即CSS像素点的数量).2.屏幕密度WebView以及Android上的多数浏览器会把网页的CS

Android界面设计适配不同屏幕的尺寸和密度解读

Android是运行在各种提供不同的屏幕尺寸和密度的设备.Android系统提供跨设备的统一开发环境和处理大部分的工作,以调整每个应用程序的用户界面,以在其上显示的画面. 同时,该系统提供了API,允许您控制您的应用程序的UI特定的屏幕尺寸和密度,以优化你的用户界面设计,不同的屏幕配置.作为设计师也要最大程度地为所有设备的体现良好的用户体验或是方便使用阅读,而不是简单地拉伸以适应屏幕上的设备. 25学堂跟大家分享这篇Android界面设计适配不同屏幕的尺寸和密度的问题.有几个知识点需要解读下.

纯代码适配iphone屏幕尺寸

纯代码适配iphone6,6+ : http://my.oschian.net/u/615517/blog/377953. 都推荐使用AutoLayout.SizeClass来适配不同屏幕尺寸的iphone和ipad,可是我实在没看懂这两个东西,求简单易懂的教程.

适配多屏幕的最佳实践

对于Android应用开发来讲,比较头疼的,也是比较重要的一个工作就是要尽可能多的支持市场上的Android设备,由于Android的开放性,各种奇奇怪怪的设备都有,符合标准的,不符合标准的,行货,水货,山寨货鱼龙混杂,防不胜防.为了让我们的应用能够得到尽可能多的用户,我们就必须能让应用以超强的适应性,以能在混乱的手机里生存.而适配设备,GUI屏幕的适配又是重中之中,如果用户都无法正确的看到你的UI页面,那还用个毛线啊! 之前曾经写过一篇文章,介绍了一下子如何使用dimen资源来适配多屏幕,随着

网页适配之强制网页适配手机屏幕

切图微适配(weishipei.qietu.com) 讯:如何强制pc网站在手机屏幕下适配呢,切图微适配团队教你一个简单有效的解决方案,通过增加meta标签来实现: 第一个meta标签表示: 强制让文档与设备的宽度保持1:1: 文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值): user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小. 当然加了这个之后,还需要通过css代码来细微的调整才能达到网页在移动设备下适配并

iOS如何适配与屏幕大小相同的图片

随着ios设备的增多,不同尺寸的屏幕给开发者适配打来困扰,特别是一个全屏的图片,如何适配不同的机型呢,这里介绍一个方法,供大家参考: nsdictionary *LaunchImages = @{@"480":@"launchImage-700",@"568":@"launchImage-710",@"667":@"launchImage-720",@"736":@&

CSS3自适配手机屏幕

@media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./images/heart2.png); background-size: 100% 100%; float: left; margin-top: 5%; margin-left: 5%; font-size: 10px; } } @media only screen and (min-width:350