单独将<merge />标签做个介绍,是因为它在优化UI结构时起到很重要的作用。目的是通过删减多余或者额外的层级,从而优化整个Android Layout的结构。
将通过一个例子来了解这个标签实际所产生的作用,这样可以更直观的了解<merge/>的用法。
建立一个简单的Layout,其中包含两个Views元素:ImageView和TextView默认状态下我们将这两个元素放在FrameLayout中。其效果是在主视图中全屏显示一张图片,之后将标题显示在图片上,并位于视图的下方。以下是xml代码:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</FrameLayout>
应用上边的Layout运行的视图为:
启动 tools>hierarchyviewer.bat工具查看当前UI结构视图:
我们可以很明显的看到由红色线框所包含的结构出现了两个framelayout节点,很明显这两个完全意义相同的节点造成了资源浪费(这里可以提醒大家在开发工程中可以习惯性的通过hierarchyViewer查看当前UI资源的分配情况),那么如何才能解决这种问题呢(就当前例子是如何去掉多余的frameLayout节点)?这时候就要用到<merge />标签来处理类似的问题了。我们将上边xml代码中的framLayout替换成merge:
<!-- Easy AdSenser V2.37 --><!-- Post[count: 2] -->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</merge>
运行程序后在Emulator中显示的效果是一样的,可是通过hierarchyviewer查看的UI结构是有变化的,当初多余的FrameLayout节点被合并在一起了,或者可以理解为将merge标签中的子集直接加到Activity的FrameLayout跟节点下(这里需要提醒大家注意:所有的Activity视图的根节点都是frameLayout)。如果你所创建的Layout并不是用framLayout作为根节点(而是应用LinerLayout等定义root标签),就不能应用上边的例子通过merge来优化UI结构。
除了上边的例子外,meger还有另外一个用法
当应用Include或者ViewStub标签从外部导入xml结构时,可以将被导入的xml用merge作为根节点表示,这样当被嵌入父级结构中后可以很好的将它所包含的子集融合到父级结构中,而不会出现冗余的节点。
另外有两点需要特别注意:
- <merge />只可以作为xml layout的根节点。
- 当需要扩充的xml layout本身是由merge作为根节点的话,需要将被导入的xml layout置于 viewGroup中,同时需要设置attachToRoot为True。(更多说明请参见inflate()文档)
查看原文(Via Proxy)
分享到:
相关推荐
Android UI 优化.ppt
资源名称:精彩绝伦的Android UI设计:响应式用户界面与设计模式资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
Android UI优化之merge标签的使用,主要介绍merge方法使用的注意事项及方法实现。
西 安 邮 电 大 学 (计算机学院) 课内实验报告 实验名称: 界面设计:基本组件 专 业: 网络工程 班 级: 姓 名: 学 号: 指导教师: 日 期: 2017年4月20日... 编写布局代码,如下 <LinearLayout xmlns:android = ...
编写布局代码,如下 <LinearLayout xmlns:android = android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical"> <!-- 主布局中添加文本框和输入框 --> ...
android ui设计 android源码 android开源项目 android项目代码 androidui设计,UI小练习
Android开发是为Google的Android操作系统创建应用程序的过程。Android是目前全球智能手机和平板电脑市场上最流行的操作系统之一。以下是一些Android开发的核心概念以及我的一些心得体会: ### Android开发的核心...
本文带您全面了解Android开发规范,其中包括Android编码规范,Android性能优化和Android UI优化,读完绝对不会后悔的好文章。 一、Android编码规范 1.java代码中不出现中文,最多注释中可以出现中文 2.局部变量...
android ui设计:响应式用户界面与设计模式
谷歌官方发布视频
《Android UI设计》面向创建移动应用的产品经理、设计师和开发者,系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的...
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 (您将需要Expo App) 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native> = 0.60.0 请使用react-native-ui-...
在我们的电子商务应用程序UI上有两个页面,一个是产品页面,一个页面是水平类别列表,然后是我们产品列表。 然后在详细信息页面上,通过立即购买按钮显示产品的价格和简短描述。 我们的电子商务应用程序最好的部分是...
Android UI开发专题 Android UI开发专题(一) 之界面设计 近期很多网友对Android用户界面的设计表示很感兴趣,对于Android UI开发自绘控件和游戏制作而言掌握好绘图基础是必不可少的。本次专题分10节来讲述,有关...
115转存助手ui优化版3.4.1
Android UI 界面设计 移动APP
<com.triman.android.ui.MyRadioButton android:id="@+id/rb_sys_set" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:...
是一个工具包用来帮助设计和开发 Android 用户界面,包含三个单独的工具:Android Asset Studio用户界面原型模具,Android 设计预览,时常需要重复确认程序版面设计状况的 Android App 开发者,应该会爱上这个轻量级...
自学Android之UI组件:(二)Fragment的进阶使用
自学Android之UI组件:(三)Fragment的使用进阶