Android uses ViewPager to implement sliding between left and right of the dot navigation at the bottom and Fragment page Switching

Android uses ViewPager to implement sliding between left and right of the dot navigation at the bottom and Fragment page Switching

In the previous blog, we introduced the use of ViewPager and Fragment to achieve the sliding effect of the slider on the top left and right. For details, refer to (http://blog.csdn.net/a123demi/article/details/39480385 ).

In this blog, We will illustrate how to use ViewPager to implement the sliding between the left and right sides of the dot navigation at the bottom, monitor events on the sliding interface, and implement page switching through Fragment.

To achieve this effect, you need to implement the following problems:

1. How do I load and implement the dot at the bottom?

2. How to Achieve the sliding effect between the left and right sides?

3. How can I monitor events when a page is swiped?

4. How can I switch between a sliding page and other pages?

I. The implementation results are as follows:

II. The specific code is as follows:

1. XML layout File

1> activity_main.xml

 

 

 

Note: LinearLayout with the id of fragment_switch_ll is reserved for Fragment switching.

 

2> Fragment page switch layout fragment_other.xml

 

3> left and right slide layout fragment_switch.xml (another layout in the Fragment page switch)

 

 

 

 

Note: LinearLayout with the id of viewGroup is the parent container that implements the dot ImageView.

 

4> layout of view_one.xml on the left/right sliding interface (this example includes listener events), view_one.xml, and view_one.xml (only one of them is provided, and others are similar)

 

 

 

2. java code implementation

 

1> main function MainActivity. java

 

Package com. example. pagerdemo; import android. app. activity; import android. app. fragment; import android. app. fragmentTransaction; import android. OS. bundle; import android. view. view; import android. view. view. onClickListener; import android. widget. button; public class MainActivity extends Activity {private Button fgSwitchBtn; private boolean isSwitch = true; // true: Enter SwitchFragment, false: Enter OtherFragment @ Overrid Eprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); fgSwitchBtn = (Button) this. findViewById (R. id. fragment_switch_btn); fgSwitchBtn. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubswitchFragment () ;}}@ Overridepublic void onResume () {super. onResume (); switchFra Gment ();}/*** Fragment interface switch */private void switchFragment () {Fragment fragment = null; if (isSwitch) {fragment = new SwitchFragment ();} else {fragment = new OtherFragment ();} isSwitch =! IsSwitch; FragmentTransaction ft = this. getFragmentManager (). beginTransaction (); ft. replace (R. id. fragment_switch_ll, fragment); ft. commitAllowingStateLoss ();}}

 

 

Note: switchFragment () implements Fragment switching and solves problem 4.

2> Fragment switching page OtherFragment. java

 

package com.example.pagerdemo;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class OtherFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {super.onCreateView(inflater, container, savedInstanceState);View otherView = inflater.inflate(R.layout.fragment_other, container,false);return otherView;}}

3> Fragment switching interface and sliding interface SwitchFragment. java

 

 

Package com. example. pagerdemo; import java. util. arrayList; import java. util. list; import android. app. activity; import android. app. fragment; import android. content. context; import android. OS. bundle; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. view. view. onClickListener; import android. view. viewGroup. layoutParams; import android. widget. button; import android. widget. imageView; import android. widget. linearLayout; import android. widget. toast; public class SwitchFragment extends Fragment {private LinearLayout groupViewLl; private ViewPager viewPager; private ImageView [] imageViews; private ImageView imageView; private Button btn; private List
 
  
ViewList = new ArrayList
  
   
(); Private LayoutInflater mInflater; public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {super. onCreateView (inflater, container, savedInstanceState); View switchView = inflater. inflate (R. layout. fragment_switch, container, false); mInflater = inflater; groupViewLl = (LinearLayout) switchView. findViewById (R. id. viewGroup); viewPager = (ViewPager) switchView. findViewById (R. id. viewPager); return switchView;} @ Overridepublic void onActivityCreated (Bundle savedInstanceState) {super. onActivityCreated (savedInstanceState);/*** Add the View to be slide to viewList */View oneView = mInflater. inflate (R. layout. view_one, null); viewList. add (oneView); viewList. add (mInflater. inflate (R. layout. view_two, null); viewList. add (mInflater. inflate (R. layout. view_three, null);/*** defines the Image View of the dot sliding navigation, depending on the number of views */imageViews = new ImageView [viewList. size ()]; // sliding interface event listening to Solve the Problem 3btn = (Button) oneView. findViewById (R. id. btn); btn. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {Toast. makeText (SwitchFragment. this. getActivity (), this is view_one, Toast. LENGTH_SHORT ). show () ;}}); // dynamically generate an ImageView to achieve the bottom dot (the number of dots is determined based on the sliding View on the left and right). Problem 1 is solved.
  
 For (int I = 0; I <viewList. size (); I ++) {imageView = new ImageView (this. getActivity (); imageView. setLayoutParams (new LayoutParams (20, 20); imageView. setPadding (20, 0, 20, 0); imageViews [I] = imageView; if (I = 0) {// the first image imageViews [I] is selected by default. setBackgroundResource (R. drawable. page_indicator_focused);} else {imageViews [I]. setBackgroundResource (R. drawable. page_indicator);} groupViewLl. addView (imageViews [I]);} // solve the problem by sliding the adapter. setAdapter (new MyPagerAdapter (viewList); viewPager. setOnPageChangeListener (new SwitchPageChangeListener () ;}@ Overridepublic void onResume () {super. onResume ();} // guides the page to change the event listener and set the background changes when the dot slides. Class implements OnPageChangeListener {@ Overridepublic void merge (int arg0) {}@ Overridepublic void merge (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageSelected (int arg0) {for (int I = 0; I <imageViews. length; I ++) {imageViews [arg0]. setBackgroundResource (R. drawable. page_indicator_focused); if (arg0! = I) {imageViews [I]. setBackgroundResource (R. drawable. page_indicator );}}}}}

 

 

Note: SwitchPageChangeListener achieves the sliding color change of the dots in the bottom navigation bar.

4> slide adapter MyPagerAdapter. java

 

package com.example.pagerdemo;import java.util.List;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;public class MyPagerAdapter extends PagerAdapter {private List
 
   viewList;public MyPagerAdapter(List
  
    viewList){this.viewList = viewList;}@Overridepublic int getCount() {return viewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getItemPosition(Object object) {return super.getItemPosition(object);}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(viewList.get(arg1));}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(viewList.get(arg1));return viewList.get(arg1);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}@Overridepublic void finishUpdate(View arg0) {}}
  
 

Note: The effect of page changes when the adapter slides pages by adding or deleting views.