15 Android布局优化(大结局)
15-1 推荐使用布局
5大布局:(常用布局使用量从低到高:)
Absoulotelayout(绝对布局)——不常用
Tablelayout(表格布局)——使用GridView代替
Framelayout(帧布局)——布局叠加时使用
Linearlayout(线性布局)——线性的、垂直的、水平的
Relativelayout(相对布局)——最灵活的
15-2 布局优化之include
布局原则
1、尽量多使用LinearLayout(线性布局)和RelativeLayout(相对布局),不要使用AbsoluteLayout(绝对布局)
2、在布局层次一样的情况下,建议使用LinearLayout代替RelativeLayout,因为LiearLayout性能要稍微高一点
3、将可复用的组件抽取出来并通过include标签使用
4、使用ViewStub标签来加载一些不常用的布局
5、使用merge标签来减少布局的嵌套层次
<include/>的标签使用
将可复用的组件抽取出来并通过include标签使用
作用:将共用的组件抽取出来单独放到一个xml文件中,然后使用include标签导入共用布局
效果:提高UI的制作和复用性效率,也能保证制作的UI布局更加规整和易维护
layout中的公共试图可以提出来,然后使用include进行加载复用。不用去担心在activity中找不到公共试图的控件,像平常一样,只需要使用findviewbyid()这个方法就能得到。
例如:
common_title.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#000" android:paddingTop="10dp" android:paddingBottom="10dp" > <TextView android:id="@+id/ret" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginLeft="10dp" android:layout_centerVertical="true" android:textColor="#fff" android:textSize="14sp" android:text="返回" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="布局优化" android:textColor="#fff" android:textSize="18sp" /> <TextView android:id="@+id/function" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:text="功能" android:textColor="#fff" android:textSize="14sp" /> </RelativeLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <include layout="@layout/common_title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="正文内容" android:textSize="18dp" /> </LinearLayout>
MainActivity.java
public class MainActivity extends Activity { TextView title_tv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); title_tv=(TextView)findViewById(R.id.title); title_tv.setText("自定义布局"); } }
15-3 布局优化之merge
使用merge合并UI布局
作用:合并UI布局,使用该标签能降低UI布局的嵌套层次
场景(1):布局根节点是FrameLayout且不需要设置background或padding等属性,可以用merge代替
场景(2):某布局作为子布局被其他布局include时,使用merge当做该布局的顶节点,这样在被引入时顶节点会自动被忽略。
比如一个linearLayout布局中包含了一个include引入了其他布局,则可以把linearLayout标签修改为merge,这样引入时会把根节点忽略掉,起到优化的作用
common_progress.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text=" 请稍候" /> </LinearLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <include layout="@layout/common_title" /> <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="正文内容" android:textSize="18dp" /> <include layout="@layout/common_progress" /> </FrameLayout> </LinearLayout>
优化:
common_progress.xml
<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text=" 请稍候" /> </merge>
印证:场景(2):某布局作为子布局被其他布局include时,使用merge当做该布局的顶节点,这样在被引入时顶节点会自动被忽略。
15-4 布局优化之ViewStub
ViewStub惰性加载
作用:和include一样可以用来引入一个外部布局,不同的是,viewStub引入的布局默认不会扩张,既不会占用显示也不会占用位置,从而在解析layout时节省CPU和内存
MainActivity.java
package com.example.andriod2_include; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewStub; import android.widget.Button; public class MainActivity extends Activity { private Button button; private ViewStub stub; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button = (Button) findViewById(R.id.button1); stub = (ViewStub) findViewById(R.id.viewStub); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub stub.inflate(); } }); } }
common_text.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="隐藏内容" /> </LinearLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <include layout="@layout/common_title" /> <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="正文内容" android:textSize="18dp" /> <include layout="@layout/common_progress" /> </FrameLayout> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="显示隐藏文件" /> <ViewStub android:id="@+id/viewStub" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout="@layout/common_text"/> </LinearLayout>
--------------------------------------
Layout总结
1. include用法
<include
android:id="@+id/include1"
layout="@layout/commn_title" />
注意:
(1)android:layout_centerVertical="true"可以调整中间位置
(2)被include进来的布局组件可以通过findViewById()得到并使用
2. merge(见图)
作用:合并UI布局,降低嵌套层次
(1)被include进来的布局文件可以使用merge标签,这样被include进来的布局是叠加的。
<FrameLayout
<include layout="@layout/common_progress" />
这个common_progress就可以使用merge标签
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ProgressBar
<TextView
</merge>
加上merge后这两个组件ProgressBar和TextView会叠加在一起
3. ViewStub惰性加载
作用:和include一样可以用来引入一个外部布局,不同的是,viewStub引入的布局默认不会扩张,既不会占用显示也不会占用位置,从而在解析layout时节省CPU和内存
(1)用法:
<ViewStub
android:layout="@layout/common_text"
//不能使用layout="",否则会 exception:viewstub must have a valid layoutresource
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/viewStub"
(2)可以通过ViewStub类的inflate()方法使其显示出来。