Implementation of several tabs in Android

Implementation of several tabs in Android

After learning Android for a long time, I will summarize the implementation methods of several tabs today.

Implementation Method 1:

ViewPage implementation

First, create a top. xml layout and a bottom. xml layout, and then add

Top. xml

 

Bottom. xml

 

 

Main. xml, introduced through include, using ViewPager in the middle

 

 

Then, write several la s for display during switchover. I will write one here. Others are similar

 

Tob01.xml

 

 

 

MainActivity. java

 

Package com. imooc. tab01; import java. util. arrayList; import java. util. list; import android. app. activity; import android. OS. bundle; import android. support. v4.view. pagerAdapter; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. view. window; import android. widget. imageButton; import android. widget. linearLayout; public class MainActivity extends Activity implements OnClickListener {private ViewPager mViewPager; private PagerAdapter mAdapter; private List
 
  
MViews = new ArrayList
  
   
(); // TABprivate LinearLayout modification; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; private ImageButton modification; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); initView (); initEvents ();} private void initEvents () {mTabWeixin. setOnClickListener (this); mTabFrd. setOnClickListener (this); mTabAddress. setOnClickListener (this); mTabSetting. setOnClickListener (this); mViewPager. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {int currentItem = mViewPager. getCurrentItem (); resetImg (); switch (currentItem) {case 0: mWeixinImg. setImageResource (R. drawable. tab_weixin_pressed); break; case 1: mFrdImg. setImageResource (R. drawable. tab_find_frd_pressed); break; case 2: mAddressImg. setImageResource (R. drawable. tab_address_pressed); break; case 3: mSettingImg. setImageResource (R. drawable. break); break ;}@overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0 ){}});} private void initView () {mViewPager = (ViewPager) findViewById (R. id. id_viewpager); // tabsmTabWeixin = (LinearLayout) findViewById (R. id. id_tab_weixin); mTabFrd = (LinearLayout) findViewById (R. id. id_tab_frd); mTabAddress = (LinearLayout) findViewById (R. id. id_tab_address); mTabSetting = (LinearLayout) findViewById (R. id. id_tab_settings); // ImageButtonmWeixinImg = (ImageButton) findViewById (R. id. id_tab_weixin_img); mFrdImg = (ImageButton) findViewById (R. id. id_tab_frd_img); mAddressImg = (ImageButton) findViewById (R. id. id_tab_address_img); mSettingImg = (ImageButton) findViewById (R. id. id_tab_settings_img); LayoutInflater mInflater = LayoutInflater. from (this); View tab01 = mInflater. inflate (R. layout. tab01, null); View tab02 = mInflater. inflate (R. layout. tab02, null); View tab03 = mInflater. inflate (R. layout. tab03, null); View tab04 = mInflater. inflate (R. layout. tab04, null); mViews. add (tab01); mViews. add (tab02); mViews. add (tab03); mViews. add (tab04); mAdapter = new PagerAdapter () {@ Overridepublic void destroyItem (ViewGroup container, int position, Object object) {container. removeView (mViews. get (position) ;}@ Overridepublic Object instantiateItem (ViewGroup container, int position) {View view = mViews. get (position); container. addView (view); return view ;}@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;}@ Overridepublic int getCount () {return mViews. size () ;}}; mViewPager. setAdapter (mAdapter) ;}@ Overridepublic void onClick (View v) {resetImg (); switch (v. getId () {case R. id. id_tab_weixin: mViewPager. setCurrentItem (0); mWeixinImg. setImageResource (R. drawable. tab_weixin_pressed); break; case R. id. id_tab_frd: mViewPager. setCurrentItem (1); mFrdImg. setImageResource (R. drawable. tab_find_frd_pressed); break; case R. id. id_tab_address: mViewPager. setCurrentItem (2); mAddressImg. setImageResource (R. drawable. tab_address_pressed); break; case R. id. id_tab_settings: mViewPager. setCurrentItem (3); mSettingImg. setImageResource (R. drawable. tab_settings_pressed); break; default: break;}/*** switch all images to dark */private void resetImg () {mWeixinImg. setImageResource (R. drawable. tab_weixin_normal); mFrdImg. setImageResource (R. drawable. tab_find_frd_normal); mAddressImg. setImageResource (R. drawable. tab_address_normal); mSettingImg. setImageResource (R. drawable. tab_settings_normal );}}
  
 

However, this method has many disadvantages:

The code of the four interfaces will be concentrated in the MainActivity. It seems that the mainActivity and the length are not suitable for the code to improve the later maintenance.

 

Method 2

Use Fragment

Implementation idea: the top title above. The following four buttons use Fragment in the middle for interface switching

This method can only be implemented by clicking to switch between different interfaces, but not by sliding the switching interface.

Key code: when using Fragment, you must note that the imported package must be consistent. The imported Fragment in mainActivity. must be consistent with the Fragment imported on the Fragment interface as follows.

import android.support.v4.app.Fragment;

 

 

Package com. imooc. tab02; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentManager; import android. support. v4.app. fragmentTransaction; import android. view. view; import android. view. view. onClickListener; import android. view. window; import android. widget. imageButton; import android. widget. linearLayout; public c Lass MainActivity extends FragmentActivity implements OnClickListener {private LinearLayout listener; private LinearLayout mTabAddress; private LinearLayout mTabSettings; private publish listener; private publish mImgAddress; private Fragment mTab01; private Fragment mTab02; private Fragment mTab03; privat E Fragment mTab04; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); initView (); initEvent (); setSelect (0);} private void initEvent () {mTabWeixin. setOnClickListener (this); mTabFrd. setOnClickListener (this); mTabAddress. setOnClickListener (this); mTabSettings. setOnClickListener (th Is);} private void initView () {mTabWeixin = (LinearLayout) findViewById (R. id. id_tab_weixin); mTabFrd = (LinearLayout) findViewById (R. id. id_tab_frd); mTabAddress = (LinearLayout) findViewById (R. id. id_tab_address); mTabSettings = (LinearLayout) findViewById (R. id. id_tab_settings); mImgWeixin = (ImageButton) findViewById (R. id. id_tab_weixin_img); mImgFrd = (ImageButton) findViewById (R. id. id_tab_frd_img); mImgA Ddress = (ImageButton) findViewById (R. id. id_tab_address_img); mImgSettings = (ImageButton) findViewById (R. id. id_tab_settings_img);} private void setSelect (int I) {FragmentManager fm = getSupportFragmentManager (); FragmentTransaction transaction = fm. beginTransaction (); hideFragment (transaction); // set the image to bright. // set the content area to switch (I) {case 0: if (mTab01 = null) {mTab01 = new WeixinFragment (); transaction. add (R. id. Id_content, mTab01);} else {transaction. show (mTab01);} mImgWeixin. setImageResource (R. drawable. tab_weixin_pressed); break; case 1: if (mTab02 = null) {mTab02 = new FrdFragment (); transaction. add (R. id. id_content, mTab02);} else {transaction. show (mTab02);} mImgFrd. setImageResource (R. drawable. tab_find_frd_pressed); break; case 2: if (mTab03 = null) {mTab03 = new AddressFragment (); transaction. add (R. id. id_content, MTab03);} else {transaction. show (mTab03);} mImgAddress. setImageResource (R. drawable. tab_address_pressed); break; case 3: if (mTab04 = null) {mTab04 = new SettingFragment (); transaction. add (R. id. id_content, mTab04);} else {transaction. show (mTab04);} mImgSettings. setImageResource (R. drawable. tab_settings_pressed); break; default: break;} transaction. commit ();} private void hideFragment (FragmentTransaction transac Tion) {if (mTab01! = Null) {transaction. hide (mTab01);} if (mTab02! = Null) {transaction. hide (mTab02);} if (mTab03! = Null) {transaction. hide (mTab03);} if (mTab04! = Null) {transaction. hide (mTab04) ;}@overridepublic void onClick (View v) {resetImgs (); switch (v. getId () {case R. id. id_tab_weixin: setSelect (0); break; case R. id. id_tab_frd: setSelect (1); break; case R. id. id_tab_address: setSelect (2); break; case R. id. id_tab_settings: setSelect (3); break; default: break;}/*** switch the image to a dark color */private void resetImgs () {mImgWeixin. setImageResource (R. drawable. tab_weixin_normal); mImgFrd. setImageResource (R. drawable. tab_find_frd_normal); mImgAddress. setImageResource (R. drawable. tab_address_normal); mImgSettings. setImageResource (R. drawable. tab_settings_normal );}}

Main Interface

 

 

     
  <framelayout android:id="@+id/id_content" android:layout_height="0dp" android:layout_weight="1" android:layout_width="fill_parent"></framelayout>    
  
 

Third Implementation Method

 

ViewPager + FragmentPagerAdapter

In fact, this implementation method is similar to the first PageAdapter implementation method,

The first implementation method is PagerAdapter. Each interface contains a View

 

private List
 
   mViews = new ArrayList
  
   ();
  
 

 

The FragmentPagerAdapter implements a Fragment interface for each interface.

 

private List
   
     mFragments;
   

Advantages of Fragment as content layout: code separation and easy code Maintenance

 

ViewPager can achieve sliding. The combination of the two is the FragmentPagerAdapter

 

Package com. imooc. tab03; import java. util. arrayList; import java. util. list; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. view; import android. view. view. onClickListener; import android. view. window; import android. widget. imageButton; import android. widget. linearLayout; public class MainActivity extends FragmentActivity implements OnClickListener {private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List
    
     
MFragments; private LinearLayout instances; private LinearLayout mTabAddress; private LinearLayout mTabSettings; private ImageButton instances; private ImageButton mImgAddress; private ImageButton mImgSettings; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); initView (); initEvent (); setSelect (1);} private void initEvent () {mTabWeixin. setOnClickListener (this); mTabFrd. setOnClickListener (this); mTabAddress. setOnClickListener (this); mTabSettings. setOnClickListener (this);} private void initView () {mViewPager = (ViewPager) findViewById (R. id. id_viewpager); mTabWeixin = (LinearLayout) findViewById (R. id. id_tab_weixin); mTabFrd = (LinearLayout) findViewById (R. id. id_tab_frd); mTabAddress = (LinearLayout) findViewById (R. id. id_tab_address); mTabSettings = (LinearLayout) findViewById (R. id. id_tab_settings); mImgWeixin = (ImageButton) findViewById (R. id. id_tab_weixin_img); mImgFrd = (ImageButton) findViewById (R. id. id_tab_frd_img); mImgAddress = (ImageButton) findViewById (R. id. id_tab_address_img); mImgSettings = (ImageButton) findViewById (R. id. id_tab_settings_img); mFragments = new ArrayList
     
      
(); Fragment mTab01 = new week (); Fragment mTab02 = new FrdFragment (); Fragment mTab03 = new AddressFragment (); Fragment mTab04 = new SettingFragment (); mfragment. add (mTab01); mFragments. add (mTab02); mFragments. add (mTab03); mFragments. add (mTab04); mAdapter = new FragmentPagerAdapter (getSupportFragmentManager () {@ Overridepublic int getCount () {return mFragments. size () ;}@ Overridepublic Fragment getItem (int arg0) {return mFragments. get (arg0) ;}}; mViewPager. setAdapter (mAdapter); mViewPager. setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {int currentItem = mViewPager. getCurrentItem (); setTab (currentItem) ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Overridepublic void onPageScrollStateChanged (int arg0) {// TODO Auto-generated method stub});} @ Overridepublic void onClick (View v) {switch (v. getId () {case R. id. id_tab_weixin: setSelect (0); break; case R. id. id_tab_frd: setSelect (1); break; case R. id. id_tab_address: setSelect (2); break; case R. id. id_tab_settings: setSelect (3); break; default: break;} private void setSelect (int I) {setTab (I); mViewPager. setCurrentItem (I);} private void setTab (int I) {resetImgs (); // set the image to bright. // switch (I) {case 0: mImgWeixin. setImageResource (R. drawable. tab_weixin_pressed); break; case 1: mImgFrd. setImageResource (R. drawable. tab_find_frd_pressed); break; case 2: mImgAddress. setImageResource (R. drawable. tab_address_pressed); break; case 3: mImgSettings. setImageResource (R. drawable. tab_settings_pressed); break ;}/ *** switch the image to a dark color */private void resetImgs () {mImgWeixin. setImageResource (R. drawable. tab_weixin_normal); mImgFrd. setImageResource (R. drawable. tab_find_frd_normal); mImgAddress. setImageResource (R. drawable. tab_address_normal); mImgSettings. setImageResource (R. drawable. tab_settings_normal );}}
     
    

Method 4:

 

Use third-party ViewPagerIndicator to implement indicator + Viewpager FragmentAdapter