三個(gè)標(biāo)簽頁(yè)置于頂端
效果圖:
在文件BoardTabHost.java中定義頁(yè)面切換的效果;切換頁(yè)面時(shí),當(dāng)前頁(yè)面滑出,目標(biāo)頁(yè)面滑入。這是2個(gè)不同的動(dòng)畫(huà)設(shè)定動(dòng)畫(huà)時(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 slowerpublic BoardTabHost(Context context) {super(context);}public BoardTabHost(Context context, AttributeSet attr) {super(context, attr);}@Overridepublic void setCurrentTab(int index) {// we need two animation here: first one is fading animation, 2nd one is coming animation// translateAnimation of fading fragmentif (index > currentTab) {// fly right to left and leave the screenTranslateAnimation 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 rightTranslateAnimation 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 fragmentif (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.BoardTabHostandroid: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content"/><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/fragment_tab1"android:name="com.rust.tabhostdemo.TabFragment1"android:layout_width="match_parent"android:layout_height="match_parent"/><fragmentandroid:id="@+id/fragment_tab2"android:name="com.rust.tabhostdemo.TabFragment2"android:layout_width="match_parent"android:layout_height="match_parent"/><fragmentandroid: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;@Overrideprotected 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ì)大家有所幫助!
新聞熱點(diǎn)
疑難解答
圖片精選