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

Android uses ViewPager to implement sliding between the left and right of the dot navigation at the bottom, Fragment page switching, and viewpager 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

<Span style = "font-size: 18px;"> <? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <Button android: id = "@ + id/fragment_switch_btn" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "Fragment switch"/> <LinearLayout android: id = "@ + id/fragment_switch_ll" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" android: layout_marginTop = "20dp"> </LinearLayout> </span>

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

2> Fragment page switch layout fragment_other.xml

<Span style = "font-size: 18px;"> <? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <TextView android: layout_width = "match_parent" android: layout_height = "match_parent" android: text = "another Fragment interface" android: textSize = "24sp" android: textColor = "# FF0000" android: gravity = "center"/> </LinearLayout> </span>

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

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" ><LinearLayout    android:id="@+id/viewGroup"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_marginBottom="40dp"    android:gravity="center_horizontal"    android:orientation="horizontal"    ></LinearLayout> <android.support.v4.view.ViewPager    android:id="@+id/viewPager"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_alignParentTop="true"    android:layout_above="@id/viewGroup"    android:layout_marginBottom="20dp"    ></android.support.v4.view.ViewPager></RelativeLayout></span>

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)

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <Button        android:id="@+id/btn"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="btn" >    </Button>    <ImageView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@drawable/image_one" >    </ImageView></LinearLayout></span>

2. java code implementation

1> main function MainActivity. java

<Span style = "font-size: 18px;"> 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 @ Overrideprotected 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 onResum E () {super. onResume (); switchFragment ();}/*** 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 () ;}}</span>

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

2> Fragment switching page OtherFragment. java

<span style="font-size:18px;">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;}}</span>

3> Fragment switching interface and sliding interface SwitchFragment. java

<Span style = "font-size: 18px;"> 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. vi Ew. 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 Butto N btn; private List <View> viewList = new ArrayList <View> (); 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 ()]; <span style = "white-space: pre"> </span> // event listening on the sliding interface 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 ();} }); <Span style = "white-space: pre"> </span> // dynamically generates an ImageView to realize the number of dots at the bottom of the View (determined by the number of dots sliding between the left and right views ), solution 1 </span> <span style = "font-family: Arial, Helvetica, sans-serif;"> </span> <span style = "font-size: 18px; "> 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) {// Select the first image imageViews [I] by default. setBackgroundResource (R. drawable. page_indicator_focused);} else {imageViews [I]. setBackgroundResource (R. drawable. page_indicator);} groupViewLl. addView (imageViews [I]);} <span style = "white-space: pre"> </span> // solve the problem by sliding the adapter. setAdapter (new MyPagerAdapter (viewList); viewPager. setOnPageChangeListener (new SwitchPageChangeListener ();} @ Overridepublic void onResume () {Super. onResume () ;}// you can change the event listener on the event guide page 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) ;}}}</span>

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

4> slide adapter MyPagerAdapter. java

<span style="font-size:18px;">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<View> viewList;public MyPagerAdapter(List<View> 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) {}}</span>

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

The above is all the content in this blog.

Source code: http://download.csdn.net/detail/a123demi/7960273

Android ViewPager enables activity page Switching

In the viewpage, You can intercept the touch event.
However, if the viewpage occupies all the space of the current external page, the external viewpage cannot be moved over.

When android uses viewpager and fragment for the tab effect, how does one process the corresponding content of each label in fragment,

You can use this. getActivity () to obtain the context object of the Activity and perform operations like Activity.