Android TabHost + ViewPager + RadioGroup multi-function template arrangement, tabhostradiogroup

Android TabHost + ViewPager + RadioGroup multi-function template arrangement, tabhostradiogroup

Currently, the most popular layout of Android is that the bottom can be selected, similar to that of the news client and mobile QQ, on which individual pages can be selected by sliding.

During the test, we found that TabHost built with Android was used for building, which made it difficult to get custom results.

Therefore, TabHost + ViewPager + RadioGroup is used to construct this effect.

First, we need to clarify their respective purposes and functions.

(1) TabHost

Because the TabHost of Android seems to be fixed at the bottom of some mobile phone versions, we use the GadioGroup to display the interface buttons. Because the building of the HabHost must define the host, tabs, and content, in this way, we hide tabs and use GadioGroup instead of display. 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. >>< 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: layout_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_height =" wrap_content "<span style =" 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 = "#00 ABCD" android: button = "@ null" android: gravity = "center" android: text = "Homepage"/> <View android: layout_width = "2px" android: layout_height = "fill_parent"/> <RadioButton android: id = "@ + id/b2" android: layout_width = "wrap_content" android: layout_height = "40dp" android: layout_weight = "1" android: background = "#00 ABCD" android: button = "@ null" android: gravity = "center" android: text = ""/> </RadioGroup> </LinearLayout> </TabHost>

For primary files, because TabActivity is not supported in Android 3.0 or earlier versions, we chose ActivityGroup for compatibility consideration.

The specific method is as follows:

Public class MyTabOwnAct extends ActivityGroup {RadioButton success; 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 (); // you must run this statement again. If you inherit TabActivity, do not use tabHost. addTab (tabHost. newTabSpec ("l1 "). setContent (new Intent (this, Act1.class )). setIndicator ("Homepage"); 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 and hide tags}); radioButton2.setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View arg0) {// TODO Auto-generated method stubtabHost. setCurrentTabByTag ("l2 ");}});}}

So far, we have implemented the effects at the bottom, that is, we can use the buttons below to change the interface above.

Next we will select one of the interfaces above and use ViewPager to achieve the sliding effect.

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_width = "fill_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <TextView android: layout_width = "wrap_content" android: layout_height = "40dp" android: layout_weight = "1" android: background = "# FF0fab" android: gravity = "center" android: text = "Page 1"/> <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 2"/> <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 3"/> </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 need to prepare three la S. Here we name them p1.xml, p2.xml, and p3.xml respectively, then we can get the sliding effect in the main file by getting ViewPager and associating it with 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);pager = (ViewPager) findViewById(R.id.pager);pager.setAdapter(new MyPagerAdapter());}class MyPagerAdapter extends PagerAdapter {List<View> list = new ArrayList<View>();public 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;}}}

Display chart: