关闭

Android入门(38)——第十五章 Android布局优化

139人阅读 评论(0) 收藏 举报
分类:

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();
			}
		});
    }
}
效果图:

点击按钮前:


点击按钮后:













0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:89530次
    • 积分:1869
    • 等级:
    • 排名:千里之外
    • 原创:104篇
    • 转载:15篇
    • 译文:4篇
    • 评论:20条
    最新评论