Android中使用TabHost 与 Fragment 制作页面切换效果_Android

三个标签页置于顶端

效果图：

在文件boardtabhost.java中定义页面切换的效果；切换页面时，当前页面滑出，目标页面滑入。这是2个不同的动画设定动画时要区分对待

				?

									import android.content.context;

									import android.util.attributeset;

									import android.view.animation.animation;

									import android.view.animation.translateanimation;

									import android.widget.tabhost;

									public class boardtabhost extends tabhost {

									private int currenttab = 0;

									int duration = 1000;// ms; the bigger the slower

									public boardtabhost(context context) {

									super(context);

									}

									public boardtabhost(context context, attributeset attr) {

									super(context, attr);

									}

									@override

									public void setcurrenttab(int index) {

									// we need two animation here: first one is fading animation, 2nd one is coming animation

									// translateanimation of fading fragment

									if (index > currenttab) {// fly right to left and leave the screen

									translateanimation translateanimation = new translateanimation(

									animation.relative_to_self/* fromxtype */, 0f/* fromxvalue */,

									animation.relative_to_self/* toxtype */, -1.0f/* toxvalue */,

									animation.relative_to_self, 0f,

									animation.relative_to_self, 0f

									);

									translateanimation.setduration(duration);

									getcurrentview().startanimation(translateanimation);

									} else if (index < currenttab) {// fly left to right

									translateanimation translateanimation = new translateanimation(

									animation.relative_to_self, 0f,

									animation.relative_to_self, 1.0f,

									animation.relative_to_self, 0f,

									animation.relative_to_self, 0f

									);

									translateanimation.setduration(duration);

									getcurrentview().startanimation(translateanimation);

									}

									super.setcurrenttab(index);// the current tab is index now

									// translateanimation of adding fragment

									if (index > currenttab) {

									translateanimation translateanimation = new translateanimation(

									animation.relative_to_parent, 1.0f,/* fly into screen */

									animation.relative_to_parent, 0f, /* screen location */

									animation.relative_to_parent, 0f,

									animation.relative_to_parent, 0f

									);

									translateanimation.setduration(duration);

									getcurrentview().startanimation(translateanimation);

									} else if (index < currenttab) {

									translateanimation translateanimation = new translateanimation(

									animation.relative_to_parent, -1.0f,

									animation.relative_to_parent, 0f,

									animation.relative_to_parent, 0f,

									animation.relative_to_parent, 0f

									);

									translateanimation.setduration(duration);

									getcurrentview().startanimation(translateanimation);

									}

									currenttab = index;

									}

									}

对应的布局文件activity_board.xml

使用boardtabhost，装载一个竖直的linearlayout；上面是tabwidget，装载标签；后面是fragment的framelayout
可以看到这里有3个fragment，待会在activity中也设置3个标签

				?

									<?xml version="1.0" encoding="utf-8"?>

									<com.rust.tabhostdemo.boardtabhost

									android:id="@android:id/tabhost"

									xmlns:android="http://schemas.android.com/apk/res/android"

									xmlns:tools="http://schemas.android.com/tools"

									android:layout_width="match_parent"

									android:layout_height="match_parent"

									tools:context="com.rust.tabhostdemo.boardactivity">

									<linearlayout

									android:layout_width="match_parent"

									android:layout_height="match_parent"

									android:orientation="vertical">

									<tabwidget

									android:id="@android:id/tabs"

									android:layout_width="match_parent"

									android:layout_height="wrap_content"/>

									<framelayout

									android:id="@android:id/tabcontent"

									android:layout_width="match_parent"

									android:layout_height="match_parent">

									<fragment

									android:id="@+id/fragment_tab1"

									android:name="com.rust.tabhostdemo.tabfragment1"

									android:layout_width="match_parent"

									android:layout_height="match_parent"/>

									<fragment

									android:id="@+id/fragment_tab2"

									android:name="com.rust.tabhostdemo.tabfragment2"

									android:layout_width="match_parent"

									android:layout_height="match_parent"/>

									<fragment

									android:id="@+id/fragment_tab3"

									android:name="com.rust.tabhostdemo.tabfragment3"

									android:layout_width="match_parent"

									android:layout_height="match_parent"/>

									</framelayout>

									</linearlayout>

									</com.rust.tabhostdemo.boardtabhost>

值得一提的是，这里的id要用android指定的id；
比如@android:id/tabhost，@android:id/tabcontent，@android:id/tabs；否则系统找不到对应控件而报错

boardactivity.java中设置了3个标签页，并指定了标签对应的fragment

				?

									import android.support.v4.app.fragmentactivity;

									import android.os.bundle;

									public class boardactivity extends fragmentactivity {

									public static final string tab1 = "tab1";

									public static final string tab2 = "tab2";

									public static final string tab3 = "tab3";

									public static boardtabhost boardtabhost;

									@override

									protected void oncreate(bundle savedinstancestate) {

									super.oncreate(savedinstancestate);

									setcontentview(r.layout.activity_board);

									boardtabhost = (boardtabhost) findviewbyid(android.r.id.tabhost);

									boardtabhost.setup();

									boardtabhost.addtab(boardtabhost.newtabspec(tab1).setindicator(getstring(r.string.tab1_name))

									.setcontent(r.id.fragment_tab1));

									boardtabhost.addtab(boardtabhost.newtabspec(tab2).setindicator(getstring(r.string.tab2_name))

									.setcontent(r.id.fragment_tab2));

									boardtabhost.addtab(boardtabhost.newtabspec(tab3).setindicator(getstring(r.string.tab3_name))

									.setcontent(r.id.fragment_tab3));

									boardtabhost.setcurrenttab(0);

									}

									}