Android中使用TabHost 与 Fragment 制作页面切换效果
三个标签页置于顶端
效果图：
在文件BoardTabHost.java中定义页面切换的效果；切换页面时，当前页面滑出，目标页面滑入。这是2个不同的动画设定动画时要区分对待
importandroid.content.Context;
importandroid.util.AttributeSet;
importandroid.view.animation.Animation;
importandroid.view.animation.TranslateAnimation;
importandroid.widget.TabHost;
publicclassBoardTabHostextendsTabHost{
privateintcurrentTab=0;
intduration=1000;//ms;thebiggertheslower
publicBoardTabHost(Contextcontext){
super(context);
}
publicBoardTabHost(Contextcontext,AttributeSetattr){
super(context,attr);
}
@Override
publicvoidsetCurrentTab(intindex){
//weneedtwoanimationhere:firstoneisfadinganimation,2ndoneiscominganimation
//translateAnimationoffadingfragment
if(index>currentTab){//flyrighttoleftandleavethescreen
TranslateAnimationtranslateAnimation=newTranslateAnimation(
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);
}elseif(index<currentTab){//flylefttoright
TranslateAnimationtranslateAnimation=newTranslateAnimation(
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);//thecurrenttabisindexnow
//translateAnimationofaddingfragment
if(index>currentTab){
TranslateAnimationtranslateAnimation=newTranslateAnimation(
Animation.RELATIVE_TO_PARENT,1.0f,/*flyintoscreen*/
Animation.RELATIVE_TO_PARENT,0f,/*screenlocation*/
Animation.RELATIVE_TO_PARENT,0f,
Animation.RELATIVE_TO_PARENT,0f
);
translateAnimation.setDuration(duration);
getCurrentView().startAnimation(translateAnimation);
}elseif(index<currentTab){
TranslateAnimationtranslateAnimation=newTranslateAnimation(
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个标签
<?xmlversion="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
importandroid.support.v4.app.FragmentActivity;
importandroid.os.Bundle;
publicclassBoardActivityextendsFragmentActivity{
publicstaticfinalStringTAB1="tab1";
publicstaticfinalStringTAB2="tab2";
publicstaticfinalStringTAB3="tab3";
publicstaticBoardTabHostboardTabHost;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
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制作页面切换效果的相关内容，希望对大家有所帮助！