Android Tabhost+viewpager+radiogroup Multi-functional template Finishing

Now Androbi more popular layout is similar to the news client and mobile phone QQ kind of bottom can choose, the above individual pages can be sliding selection.

During the testing process, it was found that the Tabhost built with Android. Very rare to own the effect of the definition.

So using Tabhost+viewpager+radiogroup to build this effect

The first thing to figure out is the use and function of each

(1) Tabhost

Because Android Tabhost seems to be in some mobile phone version number can only be fixed at the bottom of the position, so we use Gadiogroup to display the interface button, because the building habhost must define host, tabs, content a few contents, So we hide the tabs. Replace the display with Gadiogroup. The code is as follows:

<tabhost xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/ Tools "<span style=" color: #ff0000; " > android:id= "@android: Id/tabhost" </span> android:layout_width= "match_parent" android:layout_height= " Match_parent "tools:context=" Com.example.android_mode. Mainactivity "> <linearlayout android:layout_width=" fill_parent "android:layout_height=" fill_parent "android:orientation=" vertical "> <framelayout <span style=" color: #ff0000; " >android:id= "@android: id/tabcontent" </span> android:layout_width= "Fill_parent" Android:layo            ut_height= "Fill_parent" android:layout_weight= "1" > </FrameLayout> <tabwidget <span style= "color: #ff0000;" >android:id= "@android: Id/tabs" </span> android:layout_width= "Fill_parent" Android:layout_hei ght= "Wrap_content" <spanstyle= "COLOR: #000066;" >android:visibility= "Gone" </span> > </TabWidget> <radiogroup android:layout_            Width= "Fill_parent" android:layout_height= "wrap_content" android:orientation= "Horizontal" >                <radiobutton android:id= "@+id/b1" android:layout_width= "Wrap_content"                android:layout_height= "40DP" android:layout_weight= "1" android:background= "#00ABCD"            android:button= "@null" android:gravity= "center" android:text= "Home"/> <view android:layout_width= "2px" android:layout_height= "fill_parent"/> &lt ; RadioButton android:id= "@+id/b2" android:layout_width= "Wrap_content" Android: layout_height= "40DP" android:layout_weight= "1" android:background= "#00ABCD" a Ndroid:button= "@null" android:gravity= "center" android:text= "Settings"/> </radiogroup > </LinearLayout></TabHost>

For the master file, because Tabactivity is not supported under the Android 3.0 version number. So we consider the compatibility, choose Activitygroup.

The detailed methods are as follows:

public class Mytabownact extends Activitygroup {RadioButton radioButton1; RadioButton RadioButton2; Tabhost tabhost; @Overrideprotected void OnCreate (Bundle savedinstancestate) {//TODO auto-generated method Stubsuper.oncreate (savedinstancestate); Setcontentview (r.layout.tabmain); tabhost = (tabhost) findViewById (Android.  R.id.tabhost); Tabhost.setup (); Tabhost.setup (This.getlocalactivitymanager ()); This statement is required again. Assume that inheriting tabactivity is not Tabhost.addtab (Tabhost.newtabspec ("L1"). SetContent (New Intent (this, Act1.class)). Setindicator ( "Home")); Tabhost.addtab (Tabhost.newtabspec ("L2"). SetContent (New Intent (this, Act2.class)). Setindicator ("set")); RadioButton1 = (RadioButton) Findviewbyid (R.ID.B1); radioButton2 = (RadioButton) Findviewbyid (R.ID.B2); Radiobutton1.setonclicklistener (New Onclicklistener () {@Overridepublic void OnClick (View arg0) {//TODO auto-generated  Method Stubtabhost.setcurrenttabbytag ("L1"); Display with hidden Markup}}); Radiobutton2.setonclicklistener (new Onclicklistener () {@Overridepublic void OnClick (View arg0) {//TODO auto-generated method Stubtabhost.setcurrenttabbytag ("L2");}});}} 

So far we've implemented the bottom effect, which is to change the interface above with the button below.

Next we select one of the above interface, using Viewpager to achieve the effect of sliding.

The interface layout file is as follows:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <linearlayout Android:layout_widt H= "Fill_parent" android:layout_height= "wrap_content" android:orientation= "Horizontal" > <TextVi EW android:layout_width= "wrap_content" android:layout_height= "40DP" android:layout_weight        = "1" android:background= "#FF0fab" android:gravity= "Center" android:text= "page One"/>            <view android:layout_width= "2DP" android:layout_height= "fill_parent"/> <textview Android:layout_width= "Wrap_content" android:layout_height= "40DP" android:layout_weight= "1 "Android:background=" #da0ccb "android:gravity=" Center "android:text=" Page II "/> & Lt View android:lAyout_width= "2DP" android:layout_height= "fill_parent"/> <textview android:layout_width = "Wrap_content" android:layout_height= "40DP" android:layout_weight= "1" android:background = "#eeffff" android:gravity= "Center" android:text= "Page Three"/> </LinearLayout> <android . Support.v4.view.ViewPager android:id= "@+id/pager" android:layout_width= "Fill_parent" Android:layout_ height= "Fill_parent" > </android.support.v4.view.ViewPager></LinearLayout>

</pre><span style= "font-size:18px" > We're going to prepare three layouts for the interface. Here I named P1.xml,p2.xml,p3.xml, then we can get the effect of sliding in the main file by getting Viewpager and then associating to the adapter. </span><pre name= "code" class= "java" ><span style= "font-family:arial, Helvetica, Sans-serif;" >public class Act1 extends Activity {</span>

Viewpager Pager; @Overrideprotected void OnCreate (Bundle savedinstancestate) {//TODO auto-generated method Stubsuper.oncreate (Savedinstancestate), Setcontentview (r.layout.pager);p ager = (Viewpager) findViewById (R.id.pager );p Ager.setadapter (New Mypageradapter ());} Class Mypageradapter extends Pageradapter {list<view> List = new arraylist<view> ();p ublic mypageradapter () { TODO auto-generated constructor Stubview view1 = Layoutinflater.from (Getapplicationcontext ()). Inflate (R.LAYOUT.P1, NULL); View view2 = Layoutinflater.from (Getapplicationcontext ()). Inflate (R.LAYOUT.P2, NULL); View view3 = Layoutinflater.from (Getapplicationcontext ()). Inflate (R.LAYOUT.P3, null); List.add (View1); List.add ( VIEW2); List.add (VIEW3);} @Overridepublic Object Instantiateitem (viewgroup container, int position) {//TODO auto-generated method Stub (Viewpager Container). AddView (List.get (position)); return list.get (position);} @Overridepublic void Destroyitem (ViewGroup container, int position, object object) {//TODO auto-generated Method stub//Super.destroyitem (container, Position, object);((Viewpager) container). Removeview ( List.get (position));///(position);//(List.get (position));} @Overridepublic int GetCount () {//TODO auto-generated method Stubreturn list.size ();} @Overridepublic boolean isviewfromobject (View arg0, Object arg1) {//TODO auto-generated method Stubreturn arg0 = arg1;} }}

Effect Display Graph:

Android Tabhost+viewpager+radiogroup Multi-functional template Finishing