Android Tabhost and Viewpager in combination to achieve home navigation effect _android

Today is the tabhost combined with Viewpager to achieve the home page at the bottom of the effect of navigation, although there are many such a demo online, but, I still have to write their own practice to send out, yes! is so willful;

First on the effect chart, as follows:

There are comments in the code, not too much explanation, say a few points to pay attention to the problem

1:tabhost, Tabwidget, framelayout must add ID this attribute, otherwise it will error

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

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

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

This property is fixed.

2:viewpager adapter to inherit Pageradapter, do not make a mistake slightly;

Layout file xml:

<?xml version= "1.0" encoding= "Utf-8"?> <tabhost xmlns:android= "Http://schemas.android.com/apk/res/android" "Xmlns:tools=" Http://schemas.android.com/tools "android:id=" @android: Id/tabhost "android:layout_width=" Match_ Parent "android:layout_height=" match_parent "tools:context=" com.example.wgh.tabhostwithviewpager.MainActivity " > <linearlayout android:layout_width= "match_parent" android:layout_height= "Match_parent" android:orientation = "vertical" > <framelayout android:id= "@android: Id/tabcontent" android:layout_width= "Match_parent" Android: layout_height= "Match_parent" android:layout_weight= "1.0" > <android.support.v4.view.viewpager android:id= "@+" Id/viewpager "android:layout_width=" match_parent "android:layout_height=" Match_parent "></" android.support.v4.view.viewpager> </FrameLayout> <tabwidget android:id= "@android: Id/tabs" android: Layout_width= "Match_parent" android:layout_height= "match_parent" android:layout_weight= "0.0" android:visibility= " Gone "/> <view android:layout_width= "match_parent" android:layout_height= "1DP" android:background= "#0ff0f0"/> <radiogroup android:id= "@+id/radiogroup" android:layout_width= match_parent "android:layout_height=" Wrap_ Content "android:orientation=" horizontal "> <radiobutton android:id=" @+id/radiobutton1 "android:layout_width= "0DP" android:layout_height= "wrap_content" android:layout_margin= "5DP" android:layout_weight= "1" android:
background= "@drawable/img_draw_money_fail" android:button= "@null" android:paddingleft= "10DP"/> <radiobutton Android:id= "@+id/radiobutton2" android:layout_width= "0DP" android:layout_height= "Wrap_content" Android:layout_ Margin= "5DP" android:layout_weight= "1" android:background= "@drawable/img_draw_money_fail" android:button= "@null" > <radiobutton android:id= "@+id/radiobutton3" android:layout_width= "0DP" android:layout_height= "Wrap_content"
"Android:layout_margin=" 5DP "android:layout_weight=" 1 "android:background=" @drawable/img_draw_money_fail "android:button= "@null"/> <radiobutton android:id= "@+id/radiobutton4" android:layout_width= "0DP" Android: layout_height= "Wrap_content" android:layout_margin= "5DP" android:layout_weight= "1" android:background= "@drawable Img_draw_money_fail "android:button=" @null "/> </RadioGroup> </LinearLayout> </TabHost>

Activity:

Package Com.example.wgh.tabhostwithviewpager;
Import android.app.TabActivity;
Import Android.os.Bundle;
Import Android.support.v4.view.ViewPager;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.widget.RadioButton;
Import Android.widget.RadioGroup;
Import Android.widget.TabHost;
Import java.util.ArrayList; public class Mainactivity extends Tabactivity {private tabhost tabhost = null; private Viewpager viewpager = null; privat
e Radiogroup radiogroup = null;
Private arraylist<view> list = null;
Private View view1 = null;
Private View view2 = null;
Private View view3 = null;
Private View view4 = null;
Private RadioButton radioButton1 = null;
Private RadioButton radioButton2 = null;
Private RadioButton radioButton3 = null;
Private RadioButton radioButton4 = null; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_main);
Initview ();
InitData (); Set initialization default option Radiogroup.check (R.Id.radiobutton1);
Radiobutton1.setbackgroundresource (r.drawable.img_draw_money_success);
Viewpager.setcurrentitem (0);
Tabhost.setcurrenttab (0);
Getviewpager Add Adapter Myadapter adapter = new Myadapter (list);
Viewpager.setadapter (adapter); /** * Viewpager set sliding monitor, according to Viewpager selected page position, set the style of Tabhost page card Options * * * Viewpager.setonpagechangelistener (NEW Viewpager.onpagechangelistener () {@Override public void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) {} @Override public void onpageselected (int position) {if (position = = 0) {Radiobutton1.setbackgro
Undresource (r.drawable.img_draw_money_success);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (R.drawable.img_draw_money_fail);
}else if (position = = 1) {Radiobutton1.setbackgroundresource (r.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (r.drawable.img_draw_money_success); RadiobuttoN3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (R.drawable.img_draw_money_fail);
}else if (position = = 2) {Radiobutton1.setbackgroundresource (r.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (r.drawable.img_draw_money_success);
Radiobutton4.setbackgroundresource (R.drawable.img_draw_money_fail);
}else if (position = = 3) {Radiobutton1.setbackgroundresource (r.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (r.drawable.img_draw_money_success);
@Override public void onpagescrollstatechanged (int state) {}}); /** * to Radiogroup settings to monitor, in order to change the Viewpager page * * * Radiogroup.setoncheckedchangelistener (NEW Radiogroup.oncheckedchangelistener () {@Override public void oncheckedchanged (Radiogroup radiogroup, int checkedid) {sWitch (checkedid) {case R.id.radiobutton1:viewpager.setcurrentitem (0); Radiobutton1.setbackgroundresource (
r.drawable.img_draw_money_success);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (R.drawable.img_draw_money_fail);
Break
Case R.id.radiobutton2:viewpager.setcurrentitem (1);
Radiobutton1.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (r.drawable.img_draw_money_success);
Radiobutton3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (R.drawable.img_draw_money_fail);
Break
Case R.id.radiobutton3:viewpager.setcurrentitem (2);
Radiobutton1.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (r.drawable.img_draw_money_success); Radiobutton4.setbackgroundresource (r.drawable.img_dRaw_money_fail);
Break
Case R.id.radiobutton4:viewpager.setcurrentitem (3);
Radiobutton1.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton2.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton3.setbackgroundresource (R.drawable.img_draw_money_fail);
Radiobutton4.setbackgroundresource (r.drawable.img_draw_money_success);
Break
}
}
}); /** * Initialization data source/private void InitData () {list = new arraylist<view> (); List.add (View1); List.add (VIEW2); list.add
(VIEW3);
List.add (VIEW4); /** * Initialize control/private void Initview () {tabhost = Gettabhost (); Viewpager = (Viewpager) Findviewbyid (R.id.viewpager); R
Adiogroup = (radiogroup) Findviewbyid (R.id.radiogroup);
RadioButton1 = (RadioButton) Findviewbyid (R.id.radiobutton1);
RadioButton2 = (RadioButton) Findviewbyid (R.id.radiobutton2);
RadioButton3 = (RadioButton) Findviewbyid (R.id.radiobutton3);
RadioButton4 = (RadioButton) Findviewbyid (R.ID.RADIOBUTTON4); /** * will each page to show the layout instance out, added to the list, and finally through the adapter return to show the corresponding layOut */layoutinflater Inflater = Layoutinflater.from (this);
View1 = Inflater.inflate (r.layout.layout_one,null);
View2 = Inflater.inflate (r.layout.layout_two,null);
VIEW3 = Inflater.inflate (r.layout.layout_three,null);
VIEW4 = Inflater.inflate (r.layout.layout_four,null); }
}

Viewpager Adapter Myadapter:

public class Myadapter extends Pageradapter {
private arraylist<view> list = null;
Public Myadapter (arraylist<view> list) {
this.list = list;
}
@Override public
int GetCount () {return
list.size ();
}
@Override Public
Boolean isviewfromobject (View arg0, Object arg1) {return
arg0 = = arg1;
}
@Override public
Object instantiateitem (viewgroup container, int position) {
Container.addview list.get ( position));
return List.get (position);
}
@Override public
void Destroyitem (ViewGroup container, int position, object object) {
Container.removeview ( List.get (position));
}

The above is a small set to introduce Android Tabhost and Viewpager combined to achieve the home navigation effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!