Android uses Tabhost and Fragment to make a page switch effect _android

Three tab pages on top

Effect Chart:

Define the effect of page transitions in file Boardtabhost.java; When you switch pages, the current page slides out and the target page slides in. This is 2 different animations when setting the animation to differentiate between the treats

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 p Ublic Boardtabhost (context) {Super (context):} public Boardtabhost (context context, AttributeSet attr) {Super (CO
ntext, attr); @Override public void Setcurrenttab (int index) {//We need two animation Here:first one is fading animation, 2nd one I  s 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/* F
Romxvalue * *, 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 (an Imation. 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 > Curre Nttab) {translateanimation translateanimation = new Translateanimation (animation.relative_to_parent, 1.0f,/* fly into S Creen/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; }
}

The corresponding layout file Activity_board.xml

Using Boardtabhost, load a vertical linearlayout; tabwidget, load tag; fragment framelayout.
You can see there are 3 fragment, and 3 tabs will be set in the activity.

<?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" 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>

It is worth mentioning that here the ID is to be specified with Android ID;
such as @android:id/tabhost, @android: Id/tabcontent, @android: id/tabs; otherwise the system could not find the corresponding control and the error

3 tabs are set in the Boardactivity.java and the label corresponds to the 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); }
}

Main file directory:

──layout

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

──tabhostdemo

├──boardactivity.java
├──boardtabhost.java
├──tabfragment1.java
├──tabfragment2.java
└──tabfragment3.java

The above is a small set to introduce Android in the use of tabhost and Fragment to make page switching effect of the relevant content, I hope to help you!