Android入门（38）——第十五章 Android布局优化

1. Android常用布局样式比较：





布局原则：





2. 布局优化之include



案例一：使用include：

第一步：创建include的文件叫common_title.xml的布局文件，默认用的是RelativeLayout。

<?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="#000000"
android:paddingTop="10dp"
android:paddingBottom="10dp" >

<TextView
android:id="@+id/retur"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="返回"
android:textColor="#ffffff"
android:textSize="14sp" />

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="布局优化"
android:textColor="#ffffff"
android:textSize="14sp" />

<TextView
android:id="@+id/fun"
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="#ffffff"
android:textSize="14sp" />

</RelativeLayout>

第二步：去清单文件AndroidManifest中设置隐藏系统标题栏。将application属性下的theme属性改为：

android:theme="@android:style/Theme.Light.NoTitleBar" >

第三步：在布局文件中添加include控件：

<?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" >

<include
layout = "@layout/common_title"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="正文内容"
android:textSize="18sp"
/>

</LinearLayout>

第四步：活动文件MainActivity：什么也没有改。

package com.example.include;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

效果图：



需要提醒的一点是，include进来的东西，也都可以在MainActivity中使用。

3. 布局优化之merge：



第一步：创建include文件叫common_progress：

这个文件中体现了上图的两点：第一用merge包裹，当作该布局的顶节点，也就是最外层的节点，该布局是作为子布局被其他布局include的。

第二用merge可以让内部的控件实现FrameLayout的效果，也就是控件的叠加，效果图中可以看到。

<?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>

第二步：设置布局文件main：

这里面的common_progress本身里面就是一个圈和请稍后的叠加，而这里又用FrameLayout来叠加了一个正文内容，所以效果图就变成下图那样了：

<?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" >

<include
layout = "@layout/common_title"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="正文内容"
android:textSize="18sp" />
<include
layout="@layout/common_progress"
/>
</FrameLayout>

</LinearLayout>

效果图：



4. 布局优化之ViewStub：



没好好搞懂呀！

第一步：创建一个布局文件叫common_text：

<?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:text="隐藏内容"
/>

</LinearLayout>

第二步：在布局文件main中添加Button和ViewStub控件：

<?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" >

<include
layout = "@layout/common_title"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="正文内容"
android:textSize="18sp" />
<include
layout="@layout/common_progress"
/>
</FrameLayout>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="显示隐藏内容"/>

<ViewStub
android:layout="@layout/common_text"
android:id="@+id/stub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

</LinearLayout>

第三步：设置MainActivity文件：

package com.example.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.main);

button = (Button) findViewById(R.id.button);
stub = (ViewStub) findViewById(R.id.stub);
button.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// 点击按钮时，stub加载布局。
stub.inflate();
}
});
}
}

效果图：

点击按钮前：



点击按钮后：