当前位置: 首页 > 科技观察

Android自适应布局设计技巧

时间:2023-03-17 21:28:02 科技观察

0dp16dpmatch_parentmatch_parent垂直??@drawable/container_background因为我目前在做的一个app需要适配手机和平板,所以我正在研究如何构建一个可以适配所有屏幕尺寸的布局方法。我在web自适应布局方面有很多经验,比如使用gridflow,css3中的mediaqueries属性等,都可以实现web自适应布局,所以想在android上试试.在Android上,根据不同的手机屏幕尺寸或屏幕方向(垂直或水平),通过配置限定符加载不同的资源,我的最终目标是创建一个可以自动缩放的布局,并且不需要加载不同的根据不同的屏幕尺寸布局文件。我没有为每个设备尺寸制作单独的布局文件,而是找到了一种更简单的方法来为不同的屏幕尺寸重载style.xml文件。也许你会认为它与CSS样式非常相似。首先,您可以定义一个基本样式文件,它表示正常的设备尺寸。它的路径位于values/styles.xml中,然后可以在values-sw600dp/styles.xml中定义中等设备尺寸(7寸平板),values-sw600dp-land/styles.xml表示横屏,values-sw720dp/styles.xml表示十寸平板等等。在CSS中的自适应网格系统中,我们可以布局一个宽度为960像素(无边距)的.container类,在手机上,我们也可以布局一个宽度为100%(也无边距)的.container)。我们可以在Android上使用相同的方法。首先,我们需要创建一个基类样式。res/values/styles.xml0dp16dpmatch_parentmatch_parent垂直??@drawable/container_background对于平板(垂直),我们可以添加一些边距,因为屏幕足够大。res/values-sw600dp/styles.xml0dp32dpmatch_parentmatch_parent垂直??@drawable/container_background在平板上竖排和横排最大的区别就是我们会加上边距值,这样内容就不会填满整个屏幕。我们还可以在父视图中添加背景图片来填充空白区域。res/values-sw600dp-land/styles.xml130dp130dp32dpmatch_parentmatch_parent垂直??@drawable/container_background然后我们可以像这样在不同的屏幕上使用样式文件:...按钮,edittexts,textviews等...这是在四寸屏手机上的效果:这是在七寸平板上的效果:这是横屏在七寸平板上的效果:还有一些在CSS中有很方便的属性(比如bootstrap),就是一些辅助类,比如.visible-phone、.hidden-phone、.visible-tablet等,在Android上也可以做到。消失可见消失可见把这些样式放在对应的配置文件夹下,然后需要的时候就可以隐藏和显示对应的控件了。...somecontent......someextracontentsince我们有空间。..对于平板电脑(水平),此样式显示两列,但对于大多数设备而言,第二列不显示。只需几行xml代码,我们就可以创建一个迷你布局框架。我们也可以根据需要扩展这个技术,实现一个通用的样式文件,以后在项目中使用。不幸的是,很难将Android资源打包成jar包(非Gradle),所以很难在Android上构建类似bootstrap的框架(不要被这些项目误导,例如:http://www.androidbootstrap.com/,它们并没有你想象的那么强大),但幸运的是,Android正在向Gradle迁移,这使得制作Android前端布局框架变得更加容易。