Android中使用TabHost 與 Fragment 制作頁(yè)面切換效果

更新時(shí)間：2016年03月08日 09:29:13 作者：RustFisher

這篇文章主要介紹了Android中使用TabHost 與 Fragment 制作頁(yè)面切換效果的相關(guān)資料,需要的朋友可以參考下

三個(gè)標(biāo)簽頁(yè)置于頂端

效果圖：

在文件BoardTabHost.java中定義頁(yè)面切換的效果；切換頁(yè)面時(shí)，當(dāng)前頁(yè)面滑出，目標(biāo)頁(yè)面滑入。這是2個(gè)不同的動(dòng)畫設(shè)定動(dòng)畫時(shí)要區(qū)分對(duì)待

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;
}
}

對(duì)應(yīng)的布局文件activity_board.xml

使用BoardTabHost，裝載一個(gè)豎直的LinearLayout；上面是TabWidget，裝載標(biāo)簽；后面是fragment的FrameLayout
可以看到這里有3個(gè)fragment，待會(huì)在activity中也設(shè)置3個(gè)標(biāo)簽

<?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；否則系統(tǒng)找不到對(duì)應(yīng)控件而報(bào)錯(cuò)

BoardActivity.java中設(shè)置了3個(gè)標(biāo)簽頁(yè)，并指定了標(biāo)簽對(duì)應(yīng)的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);
}
}

主要文件目錄：

── layout

├── activity_board.xml
├── fragment_tab1.xml
├── fragment_tab2.xml
└── fragment_tab3.xml

── tabhostdemo

├── BoardActivity.java
├── BoardTabHost.java
├── TabFragment1.java
├── TabFragment2.java
└── TabFragment3.java

以上所述是小編給大家介紹的Android中使用TabHost 與 Fragment 制作頁(yè)面切換效果的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！

您可能感興趣的文章: