Android UI设计 选项卡实现界面切换

使用选项卡实现界面切换

一、

      FrameLayout是五大布局中最简单的一个布局，在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。

1、MainActivity.java

package com.example.ui1;

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {
	private TabHost tabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		tabHost = getTabHost();
		AddTabPage1();
		AddTabPage2();
		AddTabPage3();

	}

	private void AddTabPage1() {
		// TODO Auto-generated method stub
		Intent intent1 = new Intent();
		intent1.setClass(this, Act1.class);
		TabSpec tabSpec = tabHost.newTabSpec("act1");
		tabSpec.setIndicator("", getResources().getDrawable(R.drawable.to));
		tabSpec.setContent(intent1);
		tabHost.addTab(tabSpec);

	}

	private void AddTabPage2() {
		// TODO Auto-generated method stub
		Intent intent2 = new Intent();
		intent2.setClass(this, Act2.class);
		TabSpec tabSpec = tabHost.newTabSpec("act2");
		tabSpec.setIndicator("", getResources().getDrawable(R.drawable.tt));
		tabSpec.setContent(intent2);
		tabHost.addTab(tabSpec);

	}

	private void AddTabPage3() {
		// TODO Auto-generated method stub
		Intent intent3 = new Intent();
		intent3.setClass(this, Act3.class);
		TabSpec tabSpec = tabHost.newTabSpec("act3");
		tabSpec.setIndicator("", getResources().getDrawable(R.drawable.t3));
		tabSpec.setContent(intent3);
		tabHost.addTab(tabSpec);

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

2、Act.java

package com.example.ui1;

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

public class Act1 extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_act1);

	}

}

3、Act2.java

package com.example.ui1;

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

public class Act2 extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_act2);

	}

}

4、Act3.java

package com.example.ui1;

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

public class Act3 extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_act3);

	}

}

二、

1、activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="1dip"
            android:paddingRight="1dip"
            android:paddingTop="4dip" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:layout_weight="1" />
    </LinearLayout>

</TabHost>

2、layout_act1.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:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/a"
        android:text="第一个窗体" />

</LinearLayout>

3、layout_act2.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:id="@+id/textView2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/b"
        android:text="第二个窗体" />

</LinearLayout>

4、layout_act3.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:id="@+id/textView3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/c"
        android:text="第三个窗体" />
    

</LinearLayout>

三、效果图