Customize RadioButton and ViewPager to implement the TabHost sliding page card Effect

Many of the requirements at work are not achieved by the built-in controls of the android system, the built-in TabHost is, can only achieve simple results, so at this time we need to customize controls to achieve the effect: this effect is: Use the custom RadioButton and ViewPager to implement the TabHost sliding page card effect.

This article is generally technical, so don't laugh. I will test the source code and download it at the bottom.
Well, let's start:

Follow these steps::
1. Prepare the style image of the custom RadioButton control, and prepare the configuration file:

(1) Create attrs. xml in the project's values Folder:

Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Resources>
<Declare-styleable name = "MyRadioButton">
<Attr name = "pic" format = "reference"/>
</Declare-styleable>
</Resources>

(2) create styles. xml:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Resources>

<Style name = "radioButtonStyle">
<Item name = "android: button"> @ null </item>
<Item name = "android: textSize"> 12dip </item>
<Item name = "android: gravity"> center_horizontal | bottom </item>
<Item name = "android: paddingBottom"> 5dip </item>
</Style>

</Resources>

(3) define Chinese in string. xml:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Resources>

<String name = "hello"> Hello World, MainAct! </String>
<String name = "app_name"> TabHost </string>
<String name = "home"> Hall </string>
<String name = "account"> User </string>
<String name = "beanExchange"> toys </string>
<String name = "winAcciche"> announcement </string>
<String name = "more"> more </string>

</Resources>

(4) create a MyRadioButton class to inherit from RadioButton:Copy codeThe Code is as follows: package com. dome. viewer. widget;

Import com. dome. viewer. R;
Import android. content. Context;
Import android. content. res. TypedArray;
Import android. graphics. Bitmap;
Import android. graphics. Canvas;
Import android. graphics. Paint;
Import android. graphics. PixelFormat;
Import android. graphics. drawable. BitmapDrawable;
Import android. graphics. drawable. Drawable;
Import android. graphics. drawable. NinePatchDrawable;
Import android. util. AttributeSet;
Import android. widget. RadioButton;

Public class MyRadioButton extends RadioButton {

Private Drawable drawable;

Public MyRadioButton (Context context, AttributeSet attrs ){
Super (context, attrs );
TypedArray a = context. obtainStyledAttributes (attrs, R. styleable. MyRadioButton );
Drawable = a. getDrawable (R. styleable. MyRadioButton_pic );
}
// Converts Drawable to Bitmap.
Private Bitmap drawable2Bitmap (Drawable drawable ){
If (drawable instanceof BitmapDrawable ){
Return (BitmapDrawable) drawable). getBitmap ();
} Else if (drawable instanceof NinePatchDrawable ){
Bitmap bitmap = Bitmap
. CreateBitmap (
Drawable. getIntrinsicWidth (),
Drawable. getIntrinsicHeight (),
Drawable. getOpacity ()! = PixelFormat. OPAQUE? Bitmap. Config. ARGB_8888
: Bitmap. Config. RGB_565 );
Canvas canvas = new Canvas (bitmap );
Drawable. setBounds (0, 0, drawable. getIntrinsicWidth (), drawable. getIntrinsicHeight ());
Drawable. draw (canvas );
Return bitmap;
} Else {
Return null;
}
}

@ Override
Protected void onDraw (Canvas canvas ){
Super. onDraw (canvas );
Bitmap image = drawable2Bitmap (drawable );
If (image! = Null ){
Paint pt = new Paint ();
Pt. setARGB (255, 66, 66, 66 );
// Eliminate the Sawtooth
Pt. setAntiAlias (true );
// Center the display image
Int imageX = (int) (this. getWidth ()-image. getWidth ()/2;
Canvas. drawBitmap (image, imageX, 2, pt );
Pt. setARGB (255,255,255,255 );
}
}
}

(5) Prepare a layout file for the Activity and name it tabhost. xml:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: attrstest = "http://schemas.android.com/apk/res/com.dome.viewer"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: background = "@ drawable/bg">

<RelativeLayout
Android: id = "@ + id/title"
Android: layout_width = "fill_parent"
Android: layout_height = "50dip"
Android: background = "@ drawable/bg_navigation">

<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: layout_centerVertical = "true"
Android: layout_marginLeft = "5dip"
Android: gravity = "center"
Android: text = "Homepage"
Android: textSize = "25dip"/>
</RelativeLayout>

<Android. support. v4.view. ViewPager
Android: id = "@ + id/vPager"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: layout_gravity = "center"
Android: paddingBottom = "55dip"
Android: persistentDrawingCache = "animation"/>

<RadioGroup
Android: id = "@ + id/rg_main_btns"
Android: layout_width = "fill_parent"
Android: layout_height = "50dip"
Android: layout_alignParentBottom = "true"
Android: layout_gravity = "bottom"
Android: background = "@ drawable/bg_navigation"
Android: gravity = "center_horizontal"
Android: orientation = "horizontal">

<Com. dome. viewer. widget. MyRadioButton
Android: id = "@ + id/buyHomeTab"
Style = "@ style/radioButtonStyle"
Android: layout_width = "60dip"
Android: layout_height = "50dip"
Android: background = "@ drawable/navigation_item"
Android: checked = "true"
Attrstest: pic = "@ drawable/gcdt"
Android: text = "@ string/home"/>

<Com. dome. viewer. widget. MyRadioButton
Android: id = "@ + id/winAfficheTab"
Style = "@ style/radioButtonStyle"
Android: layout_width = "60dip"
Android: layout_height = "50dip"
Android: background = "@ drawable/navigation_item"
Android: button = "@ null"
Attrstest: pic = "@ drawable/kjgg"
Android: text = "@ string/winAcciche"/>

<Com. dome. viewer. widget. MyRadioButton
Android: id = "@ + id/integralTab"
Style = "@ style/radioButtonStyle"
Android: layout_width = "65dip"
Android: layout_height = "50dip"
Android: background = "@ drawable/navigation_item"
Attrstest: pic = "@ drawable/jfdh"
Android: text = "@ string/beanExchange"/>

<Com. dome. viewer. widget. MyRadioButton
Android: id = "@ + id/accountTab"
Style = "@ style/radioButtonStyle"
Android: layout_width = "60dip"
Android: layout_height = "50dip"
Android: background = "@ drawable/navigation_item"
Attrstest: pic = "@ drawable/yhzx"
Android: text = "@ string/account"/>

<Com. dome. viewer. widget. MyRadioButton
Android: id = "@ + id/moreTab"
Style = "@ style/radioButtonStyle"
Android: layout_width = "60dip"
Android: layout_height = "50dip"
Android: background = "@ drawable/navigation_item"
Attrstest: pic = "@ drawable/more"
Android: text = "@ string/more"/>
</RadioGroup>

</RelativeLayout>

(6) Create TabHostActivity:Copy codeThe Code is as follows: package com. dome. viewer;

Import java. util. ArrayList;
Import java. util. List;
Import android. app. Activity;
Import android. app. LocalActivityManager;
Import android. content. Intent;
Import android. OS. Bundle;
Import android. OS. Parcelable;
Import android. support. v4.view. PagerAdapter;
Import android. support. v4.view. ViewPager;
Import android. support. v4.view. ViewPager. OnPageChangeListener;
Import android. util. Log;
Import android. view. View;
Import android. view. Window;
Import android. widget. RadioGroup;

Public class TabHostActivity extends Activity {

@ Override
Protected void onStart (){
Super. onStart ();
}

Private RadioGroup radioGroup;

// Page card content
Private ViewPager mPager;
// Tab page list
Private List <View> listViews;
// Current page card number
Private LocalActivityManager manager = null;

Private MyPagerAdapter mpAdapter = null;
Private int index;

// Update the value passed by intent
@ Override
Protected void onNewIntent (Intent intent ){
SetIntent (intent );
}

@ Override
Protected void onSaveInstanceState (Bundle outState ){

}
@ Override
Public void onBackPressed (){
Log. I ("", "onBackPressed ()");
Super. onBackPressed ();
}
@ Override
Protected void onPause (){
Log. I ("", "onPause ()");
Super. onPause ();
}

@ Override
Protected void onStop (){
Log. I ("", "onStop ()");
Super. onStop ();
}

@ Override
Protected void onDestroy (){
Log. I ("", "onDestroy ()");
Super. onDestroy ();
}

@ Override
Protected void onResume (){
Super. onResume ();

If (getIntent ()! = Null ){
Index = getIntent (). getIntExtra ("index", 0 );
MPager. setCurrentItem (index );
SetIntent (null );
} Else {
If (index <4 ){
Index = index + 1;
MPager. setCurrentItem (index );
Index = index-1;
MPager. setCurrentItem (index );

} Else if (index = 4 ){
Index = index-1;
MPager. setCurrentItem (index );
Index = index + 1;
MPager. setCurrentItem (index );
}
}
}

@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
RequestWindowFeature (Window. FEATURE_NO_TITLE );
SetContentView (R. layout. tabhost );
MPager = (ViewPager) findViewById (R. id. vPager );
Manager = new LocalActivityManager (this, true );
Manager. dispatchCreate (savedInstanceState );
InitViewPager ();
RadioGroup = (RadioGroup) this. findViewById (R. id. rg_main_btns );
RadioGroup. setOnCheckedChangeListener (new RadioGroup. OnCheckedChangeListener (){
Public void onCheckedChanged (RadioGroup group, int checkedId ){
Switch (checkedId ){

Case R. id. buyHomeTab:
Index = 0;
ListViews. set (0, getView ("A", new Intent (TabHostActivity. this, OneDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
MPager. setCurrentItem (0 );
Break;

Case R. id. winAfficheTab:
Index = 1;
ListViews. set (1, getView ("B", new Intent (TabHostActivity. this, TowDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
MPager. setCurrentItem (1 );
Break;

Case R. id. integralTab:
Index = 2;
ListViews. set (2, getView ("C", new Intent (TabHostActivity. this, ThreeDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
MPager. setCurrentItem (2 );
Break;

Case R. id. accountTab:
Index = 3;
ListViews. set (3, getView ("D", new Intent (TabHostActivity. this, FourDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
MPager. setCurrentItem (3 );
Break;

Case R. id. moreTab:
Index = 4;
ListViews. set (4, getView ("E", new Intent (TabHostActivity. this, FiveDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
MPager. setCurrentItem (4 );
Break;
Default:
Break;
}
}
});
}

/**
* Initialize ViewPager
*/
Private void InitViewPager (){
Intent intent = null;
ListViews = new ArrayList <View> ();
MpAdapter = new MyPagerAdapter (listViews );
Intent = new Intent (TabHostActivity. this, OneDomeActivity. class );
ListViews. add (getView ("A", intent ));
Intent = new Intent (TabHostActivity. this, TowDomeActivity. class );
ListViews. add (getView ("B", intent ));
Intent = new Intent (TabHostActivity. this, ThreeDomeActivity. class );
ListViews. add (getView ("C", intent ));
Intent = new Intent (TabHostActivity. this, FourDomeActivity. class );
ListViews. add (getView ("D", intent ));
Intent = new Intent (TabHostActivity. this, FiveDomeActivity. class );
ListViews. add (getView ("E", intent ));
MPager. setOffscreenPageLimit (0 );
MPager. setAdapter (mpAdapter );
MPager. setCurrentItem (0 );
MPager. setOnPageChangeListener (new MyOnPageChangeListener ());
}

/**
* ViewPager Adapter
*/
Public class MyPagerAdapter extends PagerAdapter {
Public List <View> mListViews;

Public MyPagerAdapter (List <View> mListViews ){
This. mListViews = mListViews;
}

@ Override
Public void destroyItem (View arg0, int arg1, Object arg2 ){
(ViewPager) arg0). removeView (mListViews. get (arg1 ));
}

@ Override
Public void finishUpdate (View arg0 ){
}

@ Override
Public int getCount (){
Return mListViews. size ();
}

@ Override
Public Object instantiateItem (View arg0, int arg1 ){
(ViewPager) arg0). addView (mListViews. get (arg1), 0 );
Return mListViews. get (arg1 );
}

@ Override
Public boolean isViewFromObject (View arg0, Object arg1 ){
Return arg0 = (arg1 );
}

@ Override
Public void restoreState (Parcelable arg0, ClassLoader arg1 ){
}

@ Override
Public Parcelable saveState (){
Return null;
}

@ Override
Public void startUpdate (View arg0 ){
}
}

/**
* When the page card switches to the listener, the content of the TabHost is also changed when the ViewPager changes.
*/
Public class MyOnPageChangeListener implements OnPageChangeListener {

Public void onPageSelected (int arg0 ){
Manager. dispatchResume ();
Switch (arg0 ){
Case 0:
Index = 0;
RadioGroup. check (R. id. buyHomeTab );
ListViews. set (0, getView ("A", new Intent (TabHostActivity. this, OneDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
Break;
Case 1:
Index = 1;
RadioGroup. check (R. id. winAfficheTab );
ListViews. set (1, getView ("B", new Intent (TabHostActivity. this, TowDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
Break;
Case 2:
Index = 2;
RadioGroup. check (R. id. integralTab );
ListViews. set (2, getView ("C", new Intent (TabHostActivity. this, ThreeDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
Break;
Case 3:
Index = 3;
RadioGroup. check (R. id. accountTab );
ListViews. set (3, getView ("D", new Intent (TabHostActivity. this, FourDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
Break;
Case 4:
Index = 4;
RadioGroup. check (R. id. moreTab );
ListViews. set (4, getView ("E", new Intent (TabHostActivity. this, FiveDomeActivity. class )));
MpAdapter. notifyDataSetChanged ();
Break;
}
}
Public void onPageScrolled (int arg0, float arg1, int arg2 ){
}
Public void onPageScrollStateChanged (int arg0 ){
}
}

Private View getView (String id, Intent intent ){
Return manager. startActivity (id, intent). getDecorView ();
}

}

(7) Create five activities as page cards in sequence, and create five xml files as Activity layout files,

Source code download