0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置:主页 > 技术支持 > HTML5/CSS3 > html5高价值的android屏幕适配精华教程(HTML5+CSS3)

html5高价值的android屏幕适配精华教程(HTML5+CSS3)

时间:2021-10-23来源:风信官网 点击: 312次
猪猪,想必你也知道,Android平台的终端至少有千种之多,各个版本的系统都有,再加上2次开发改造的系统,版本确实不少;而且分辨率也相当分散,并不像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(240x320)、HVGA(320x480)、WVGA800(480x800)
 
第2部分:
Android官方的解决方案:
从Android1.6版系统起,res文件夹下面的drawable文件夹由原来的1个变为了3个。
如下图所示: 捕获1.PNG
这三个文件夹分别用来存放高密度、中等密度和低密度的图片。
具体的适配方法,用一个案例来说明。
例如:
创建一个工程:test_demo_01
在3个drawable文件夹下面分别放置高密度、中等密度和低密度的图片。
然后在AndroidMainfest.xml中添加如下内容:
捕获2.PNG
此外需要注意的是:
1、图片布局的基本单位应该是dip。
2、不要使用绝对布局(AbsoluteLayout)。
以下是3种屏幕的自适应结果
如下图所示: xinbuhuo1.PNGxinguozi2.PNG xinguozi3.png
此外,需要说明的是:可以只在文件夹drawable_hdpi下面放置一张高密度的图片。在各种屏幕的大小和密度下,系统会自动进行相应的缩放操作的。最好放置高密度的图片,因为放置低密度的图片,进行放大操作,图片会显的很模糊。谢谢。 附:源代码如下: 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>
最终的效果如下:
附源代码: test_demo_02.zip (1.71 MB, 下载次数: 17)
test_demo_02。
 
 
第4部分:
结合HTML5和CSS3优化界面布局和适配
采用HTML5和CSS3制作界面,然后在WebView视图上进行显示,然后通过JavaScript进行事件的交互是一种很不错的开发技巧。
下面举一个例子说明问题。
例如:制作一个“花卉采购计划”的表单,然后在WebView上予以显示。
未采用HTML5的form1.html生成的界面如下(详细源代码见附件):
jietu03.PNG
第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)"/>
所有源代码如下: 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。具体代码可以这样写。
捕获3.PNG
2012-6-28 11:46 上传
下载附件 (27.18 KB)
 
width.PNG
2、高度正比例布局。
进行高度的正比例布局,就要将android:layout_height的属性值先设置为0dip,然后让android:layout_weight的属性来控制正常的正比例关系。
比如:设置高度的正比例关系为:1:3。
代码如下:
捕获4.PNG
2012-6-28 11
height.PNG
本帖最后由 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选项即可选择相应的图片导入。
如图:
捕获5.PNG
 
然后进行可拉伸区域的选择,即bad patch的确定,然后保存,即可得到*.9.png格式的图片。
最后就可以在源代码中进行相应的操作了。
 
本帖最后由 huaxiannv 于 2012-6-28 11:54 编辑
7、题外话。
为了适配更多的机型,并且防止用户因为应用占用内存太多,不得不卸载的问题,就要让应用支持安装的SDCard中。具体代码如下:
为manifest元素增加属性:
android:installLocation="preferExternal"
切记:
应用的开发要基于android2.2及以上进行开发才支持安装到SDCard。
栏目列表
推荐内容
热点内容
展开