Android development step-by-step 53: viewpager + fragment construct sliding tabs left and right

Android development step-by-step 53: viewpager + fragment construct sliding tabs left and right

Slide tabs are used by many applications for external frameworks, such as Weibo. The following is the main tab, then, you can continue to slide between the left and right tabs in the middle of the tab, and then nest tabs in the tab. The main components used are: viewpager for sliding effect, and the fragment used to implement the function of each tab page. Let's take a look:

Step 1: Design the page activity_learn_fragment.xml

 

 

 

 

Step 2: Write Activity, FragmentTestActivity. java

 

/** *  */package com.figo.study;import java.util.ArrayList;import android.graphics.Color;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.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.TextView;import com.figo.study.adapter.TabFragmentPagerAdapter;import com.figo.study.fragment.EarnFragment;import com.figo.study.fragment.ExampleFragment;import com.figo.study.fragment.MeFragment;import com.figo.study.fragment.WithdrawFragment;/** * @author figo *  */public class FragmentTestActivity extends FragmentActivity {private TextView tv_earn, tv_withdraw, tv_me;private ArrayList
 
   fragmentsList;private ViewPager vp;private int currIndex;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_learn_fragment);initViews();initViewPager();}private void initViews() {tv_earn = (TextView) findViewById(R.id.tv_earn);tv_withdraw = (TextView) findViewById(R.id.tv_withdraw);tv_me = (TextView) findViewById(R.id.tv_me);tv_earn.setOnClickListener(new TabOnClickListener(0));tv_withdraw.setOnClickListener(new TabOnClickListener(1));tv_me.setOnClickListener(new TabOnClickListener(2));}private void initViewPager() {try {vp = (ViewPager) findViewById(R.id.viewPager);fragmentsList = new ArrayList
  
   ();Bundle bundle = new Bundle();Fragment meFragment = MeFragment.newInstance(FragmentTestActivity.this, bundle);Fragment earnFragment = EarnFragment.newInstance(FragmentTestActivity.this, bundle);Fragment withdrawFragment = WithdrawFragment.newInstance(FragmentTestActivity.this, bundle);fragmentsList.add(earnFragment);fragmentsList.add(withdrawFragment);fragmentsList.add(meFragment);vp.setAdapter(new TabFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));vp.setCurrentItem(0);vp.setOnPageChangeListener(new MyOnPageChangeListener());} catch (Exception e) {Log.e("initViewPager", "initViewPager", e);}}public class TabOnClickListener implements View.OnClickListener {private int index = 0;public TabOnClickListener(int i) {index = i;}@Overridepublic void onClick(View v) {vp.setCurrentItem(index);}};public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageSelected(int arg0) {switch (arg0) {case 0:tv_earn.setTextColor(Color.BLUE);tv_withdraw.setTextColor(Color.BLACK);tv_me.setTextColor(Color.BLACK);tv_earn.setBackgroundColor(0xFF996699);tv_withdraw.setBackgroundColor(0xFF999999);tv_me.setBackgroundColor(0xFF999999);break;case 1:tv_earn.setTextColor(Color.BLACK);tv_withdraw.setTextColor(Color.BLUE);tv_me.setTextColor(Color.BLACK);tv_earn.setBackgroundColor(0xFF999999);tv_withdraw.setBackgroundColor(0xFF996699);tv_me.setBackgroundColor(0xFF999999);break;case 2:tv_earn.setTextColor(Color.BLACK);tv_withdraw.setTextColor(Color.BLACK);tv_me.setTextColor(Color.BLUE);tv_earn.setBackgroundColor(0xFF999999);tv_withdraw.setBackgroundColor(0xFF999999);tv_me.setBackgroundColor(0xFF996699);break;}currIndex = arg0;}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}}}
  
 

 

Step 3: Compile the fragment of each tab

1. MeFragment. java

 

/*****/Package com. figo. study. fragment; import com. figo. study. r; import com. figo. study. r. id; import com. figo. study. r. layout; import android. content. context; import android. OS. bundle; import android. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. widget. button; import android. widget. textView; import android. widget. toast ;/** * @ Author figo **/public class MeFragment extends android. support. v4.app. fragment {static Context mContext; Bundle meBundle; public static MeFragment newInstance (Context context, Bundle bundle) {mContext = context; MeFragment newFragment = new MeFragment (); newFragment. setArguments (bundle); return newFragment;} @ Overridepublic void onCreate (Bundle savedInstanceState) {// TODO Auto-generated method stub Super. onCreate (savedInstanceState);} @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stub View = inflater. inflate (R. layout. fragment_me, container, false); TextView TV _me = (TextView) view. findViewById (R. id. TV _me); TV _me.setText ("I am born to be useful! "); Button btn_me = (Button) view. findViewById (R. id. btn_me); btn_me.setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stub // getArguments () Toast. makeText (mContext, "earn more money! ", Toast. LENGTH_LONG). show () ;}}); return view ;}}

 

2. EarnFragment. java

 

/*****/Package com. figo. study. fragment; import com. figo. study. r; import com. figo. study. r. id; import com. figo. study. r. layout; import android. content. context; import android. OS. bundle; import android. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. widget. button; import android. widget. textView; import android. widget. toast ;/** * @ Author figo **/public class EarnFragment extends android. support. v4.app. fragment {static Context mContext; Bundle meBundle; public static EarnFragment newInstance (Context context, Bundle bundle) {mContext = context; EarnFragment newFragment = new EarnFragment (); newFragment. setArguments (bundle); return newFragment;} @ Overridepublic void onCreate (Bundle savedInstanceState) {// TODO Auto-generated met Hod stubsuper. onCreate (savedInstanceState);} @ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stub View = inflater. inflate (R. layout. fragment_earn, container, false); TextView TV _me = (TextView) view. findViewById (R. id. TV _earn); TV _me.setText ("Making money is the foundation of superstructure! "); Button btn_earn = (Button) view. findViewById (R. id. btn_earn); btn_earn.setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stub // getArguments () Toast. makeText (mContext, "earn more money! ", Toast. LENGTH_LONG). show () ;}}); return view ;}}

 

3. WithdrawFragment. java

 

/*****/Package com. figo. study. fragment; import java. util. arrayList; import java. util. list; import com. figo. study. r; import com. figo. study. r. id; import com. figo. study. r. layout; import com. figo. study. adapter. viewPagerAdapter; import android. content. context; import android. graphics. color; import android. OS. bundle; import android. support. v4.view. viewPager; import android. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. animation. translateAnimation; import android. view. viewGroup; import android. widget. button; import android. widget. textView; import android. widget. toast;/*** @ author figo **/public class WithdrawFragment extends android. support. v4.app. fragment {static Context mContext; Bundle meBundle; private List
 
  
Lists = new ArrayList
  
   
(); Private TextView TV _goods; private TextView TV _card; private TextView TV _lottery; int white = Color. WHITE; int blue = Color. BLUE; ViewPager viewPager; public static WithdrawFragment newInstance (Context context, Bundle bundle) {mContext = context; WithdrawFragment newFragment = new WithdrawFragment (); newFragment. setArguments (bundle); return newFragment;} @ Overridepublic void onCreate (Bundle savedInstanceS Tate) {// TODO Auto-generated method stubsuper. onCreate (savedInstanceState) ;}@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// TODO Auto-generated method stubView = inflater. inflate (R. layout. fragment_withdraw, container, false); initViewPager (view); // TextView TV _me = (TextView) view. findViewById (R. id. TV _withdraw); // TV _me.setText ("want to live" Learn to enjoy! "); // Button btn_withdraw = (Button) view. findViewById (R. id. btn_withdraw); // btn_withdraw.setOnClickListener (new OnClickListener () {// @ Override // public void onClick (View v) {// TODO Auto-generated method stub // getArguments () // Toast. makeText (mContext, "earn more money! ", // Toast. LENGTH_LONG ). show (); //}); return view;} private void initViewPager (View view) {lists. add (getActivity (). getLayoutInflater (). inflate (R. layout. layout1, null); lists. add (getActivity (). getLayoutInflater (). inflate (R. layout. layout2, null); lists. add (getActivity (). getLayoutInflater (). inflate (R. layout. layout3, null); TV _goods = (TextView) view. findViewById (R. id. TV _goods); TV _card = (TextView) view. findViewById (R. id. TV _card); TV _lottery = (TextView) view. findViewById (R. id. TV _lottery); ViewPagerAdapter myAdapter = new ViewPagerAdapter (lists); viewPager = (ViewPager) view. findViewById (R. id. vpType); viewPager. setAdapter (myAdapter); viewPager. setOnPageChangeListener (new ViewPager. onPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {// when sliding, The imageView on the top is slide slowly through animation // TODO Auto-generated method stubswitch (arg0) {case 0: // textView1.setBackgroundColor (0x3A6A00); // textView2.setBackgroundColor (0x999999); // compare (0x999999); then (0xFF996699); then (0xFF999999 ); values (0xFF999999); TV _goods.setTextColor (blue); TV _card.setTextColor (white); values (white); break; case 1: values (0xFF999999); values (0xFF996699); values (0xFF999999 ); upper (white); TV _card.setTextColor (blue); lower (white); break; case 2: lower (0xFF999999); lower (0xFF999999); lower (0xFF996699); TV _goods.setTextColor (white ); TV _card.setTextColor (white); TV _lottery.setTextColor (blue) ;}@overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Overridepublic void onPageScrollStateChanged (int arg0) {// TODO Auto-generated method stub}); TV _goods.setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View arg0) {// TODO Auto-generated method stubviewPager. setCurrentItem (0) ;}}); TV _card.setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View arg0) {// TODO Auto-generated method stubviewPager. setCurrentItem (1) ;}}); TV _lottery.setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View arg0) {// TODO Auto-generated method stubviewPager. setCurrentItem (2 );}});}}