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() {@Overridepublic void onClick(View v) {// 点击按钮时，stub加载布局。stub.inflate();}});    }}

效果图：

点击按钮前：

点击按钮后：