html5屏幕适配精品教程(HTML5+CSS3)android

2022-11-23 0 213



html5屏幕适配精品教程(HTML5+CSS3)android

 

我想你也知道,Android平台上的终端至少有一千种,各个版本的系统都有。确实有很多版本的系统都经过了二次开发;而且分辨率比较分散,不像iPhone那么集中。

因此,想让一款软件适配所有的终端,压力确实比西天取经还大。不过,事在人为,还是有办法尽量适配大多数终端的。 所谓终端的兼容适配就是屏幕适配。屏幕适配往往指的就是屏幕大小和屏幕密度的适配。 终端适配=屏幕适配(屏幕大小和屏幕密度) 因此,要做好一款软件的终端适配优化方案,应该学习如下几个方面: 1、了解基本的屏幕适配知识。 2、Android官方的解决方案。 3、与ScrollView的结合。 4、结合HTML5和CSS3优化界面布局和适配 5、与Weight的结合。 6、9patch工具的使用。 7、题外话。 第1部分: 基本的屏幕适配知识: 1、屏幕大小 在Android系统中,把屏幕大小分为以下4种:small、normal(标准)、large、 extra large(引申为更大的屏幕)。 2、屏幕密度 在Android系统中,屏幕密度指的是在指定的屏幕大小区域内,有多少个像素。基本单位为dpi(点/每英寸)。 基本包括4种密度:low、dedium(中等)、high、extra high(引申为更高的密度)。 常见的屏幕密度如下:QVGA(240×320)、HVGA(320×480)、WVGA800(480×800)   第2部分: Android官方的解决方案: 从Android1.6版系统起,res文件夹下面的drawable文件夹由原来的1个变为了3个。 如下图所示:
html5屏幕适配精品教程(HTML5+CSS3)android 这三个文件夹分别用来存放高密度、中等密度和低密度的图片。 具体的适配方法,用一个案例来说明。 例如: 创建一个工程:test_demo_01 在3个drawable文件夹下面分别放置高密度、中等密度和低密度的图片。 然后在AndroidMainfest.xml中添加如下内容:
html5屏幕适配精品教程(HTML5+CSS3)android 此外需要注意的是: 1、图片布局的基本单位应该是dip。 2、不要使用布局(AbsoluteLayout)。 以下是3种屏幕的自适应结果 如下图所示:
html5屏幕适配精品教程(HTML5+CSS3)android
html5屏幕适配精品教程(HTML5+CSS3)android
html5屏幕适配精品教程(HTML5+CSS3)android 此外,需要说明的是:可以只在文件夹drawable_hdpi下面放置一张高密度的图片。在各种屏幕的大小和密度下,系统会自动进行相应的缩放操作的。放置高密度的图片,因为放置低密度的图片,进行放大操作,图片会显的很模糊。谢谢。 附:源代码如下:
html5屏幕适配精品教程(HTML5+CSS3)android test_demo_01.zip (6.55 MB, 下载次数: 13)   第3部分: 与ScrollView的结合。 亲爱的猪猪,想必你也看到了,在上一个工程的实例中,虽然图片完整的展示出来了,但是却发生了轻微的形状改变。 为了顺利解决这个问题,就需要与ScrollView结合来完整的展示整张图片。 道理不多讲了,直接用一个实例来说明问题。 新建一个工程:test_demo_02。 然后将所需要展示的图片添加到drawable-hdpi 文件夹下面。 接下来开始在layout文件夹中设计布局。 源代码如下: ?
代码片段,双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <?xml version=”1.0″encoding=”utf-8″?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:orientation=”vertical”>   <TextView android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”与ScrollView结合的图片布局”/> <ScrollView android:id=”@+id/myScrollView” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:scrollbars=”vertical” android:layout_weight=”4″ > <ImageView android:id=”@+id/myImageView” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:background=”@drawable/guozi3″ ></ImageView>   </ScrollView> </LinearLayout>

最终的效果如下: 附源代码:
html5屏幕适配精品教程(HTML5+CSS3)android test_demo_02.zip (1.71 MB, 下载次数: 17) test_demo_02。     第4部分: 结合HTML5和CSS3优化界面布局和适配 采用HTML5和CSS3制作界面,然后在WebView视图上进行显示,然后通过JavaScript进行事件的交互是一种很不错的开发技巧。 下面举一个例子说明问题。 例如:制作一个“花卉采购计划”的表单,然后在WebView上予以显示。 未采用HTML5的form1.html生成的界面如下(详细源代码见附件):
html5屏幕适配精品教程(HTML5+CSS3)android 第3张截图也对标题做了HTML5和CSS3的处理。是不是看上去更美观了呢? 有以下几项内容需要予以说明: 1、电脑的桌面浏览器不同于移动手机浏览器,因此需要在HTML的文件的head元素中设置viewport meta标签。 <meta name=”viewport” content=”width=device; user-scalable=0;” 2、可以设置不同的CSS级联样式表,来适应不同宽度的屏幕。 比如:宽度为320px,可以这样写: <link media=”only screen and (max-device-width:320px)”/> 再比如:最小宽度为480px,可以这么写: <link media=”only screen and (min-device-width:481px)”/> 所有源代码如下:
html5屏幕适配精品教程(HTML5+CSS3)android HTML_UI.zip (144.25 KB, 下载次数: 48)

本帖最后由 huaxiannv 于 2012-6-28 11:50 编辑 5、与layout_weight的结合。 在进行视图布局时,与layout_weight的属性值进行有效的结合,可以达到通用的布局效果。 layout_weight其实就是用来控制比例的,在实践操作中,有同学说是正比例控制,也有同学说是反比例控制。其实正比例和反比例的情况都是存在的,就看如何与layout_width和layout_height的属性值进行适当的结合啦! 俗 话说:没有规矩,不成方圆。个人认为,反比例的控制效果,是无节制,无规范结合layout_width和layout_height的产物,极其不提 倡,只会把人带入思维的死循环。就像某位所说,这样做,只会将简单问题复杂化,复杂问题深入化,深入问题模糊化,模糊问题抽象化,从而显示学者的高明,实 则愚蠢,只是制造垃圾而已。其实,简单的,往往就是的。 下面,通过制定规范,分别讲解宽度的正比例布局和高度的正比例布局。 1、宽度正比例布局。 在正式开始布局前,制定如下规范。欲对哪方面设置正比例布局,就将哪个属性设置为:0dip。 比如:欲对宽度正比例布局,就将宽度设置为0dip。如:android:layout_width=”0dip”,这样可以避免系统进行相应的测量,从而由android:layout_weight的属性来控制布局。 比如:设置宽度为:1:3。具体代码可以这样写。

html5屏幕适配精品教程(HTML5+CSS3)android 2012-6-28 11:46 上传 下载附件 (27.18 KB)
html5屏幕适配精品教程(HTML5+CSS3)android 2、高度正比例布局。 进行高度的正比例布局,就要将android:layout_height的属性值先设置为0dip,然后让android:layout_weight的属性来控制正常的正比例关系。 比如:设置高度的正比例关系为:1:3。 代码如下:
html5屏幕适配精品教程(HTML5+CSS3)android 2012-6-28 11
html5屏幕适配精品教程(HTML5+CSS3)android

本帖最后由 huaxiannv 于 2012-6-28 11:52 编辑 第6部分: 9patch工具的使用。 为什么要使用9patch工具? 答:使用9patch工具,可以制作*.9.png格式的图片,该格式的图片可以解决图片的拉伸失真、拉伸不正常的问题。 如何打开9patch工具? 答:在C:\android-sdk-windows\tools路径下就可以看到文件draw9patch.bat,双击就可以打开。 如何制作*.9.png格式的图片? 答:打开9patch工具,点击左上角的file菜单,然后点击open9-patch选项即可选择相应的图片导入。 如图:

html5屏幕适配精品教程(HTML5+CSS3)android   然后进行可拉伸区域的选择,即bad patch的确定,然后保存,即可得到*.9.png格式的图片。 最后就可以在源代码中进行相应的操作了。

本帖最后由 huaxiannv 于 2012-6-28 11:54 编辑 7、题外话。 为了适配更多的机型,并且防止用户因为应用占用内存太多,不得不卸载的问题,就要让应用支持安装的SDCard中。具体代码如下: 为manifest元素增加属性: android:installLocation=”preferExternal” 切记: 应用的开发要基于android2.2及以上进行开发才支持安装到SDCard。

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论