English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Main Content

Summary of Android ViewPager Usage

Add tab labels in a window to switch tabs and implement page switching. The advantage of this is that multiple pages can be placed in the same window, sharing the same window resources, which is more fluid than using multiple windows to achieve this function!!

The main class files generated include activity, n views, adapter, custom ViewPager, and n+1layout files

Files used in demo

Steps:

Create activity

package com.example.myviewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
/**
 * Main window
 * @author cgx
 *
 */
public class MainActivity extends Activity implements OnClickListener {
 private Context mContext;
 private MyViewPager mPager;// Page content
 private MyViewPagerAdapter pagerAdapter = null;
 private TextView t1, t2, t3;// Page header label
 private List<View> pageList = new ArrayList<View>();
 private View1 mView1;
 private View2 mView2;
 private View3 mView3;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 mContext = this;
 initViews();
 initEvents();
 initViewPager();
 }
 private void initViews() {
 // TODO Auto-generated method stub
 t1 = (TextView) findViewById(R.id.text1);
 t2 = (TextView) findViewById(R.id.text2);
 t3 = (TextView) findViewById(R.id.text3);
 mPager = (MyViewPager) findViewById(R.id.vPager);
 // Set ViewPager to not allow sliding
 //mPager.setCanScroll(false);
 //When the window is first entered, the default first tab is selected
 t1.setBackgroundColor(Color.parseColor("#FFFF00"));
 t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
 t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
 }
 private void initEvents() {
 // TODO Auto-generated method stub
 t1.setOnClickListener(this);
 t2.setOnClickListener(this);
 t3.setOnClickListener(this);
 }
 private void initViewPager() {
 // TODO Auto-generated method stub
 pageList.clear();
 if (mView1 == null) {
  mView1 = new View1(mContext);
 }
 if (mView2 == null) {
  mView2 = new View2(mContext);
 }
 if (mView3 == null) {
  mView3 = new View3(mContext);
 }
 pageList.add(mView1.getView());
 pageList.add(mView2.getView());
 pageList.add(mView3.getView());
 pagerAdapter = new MyViewPagerAdapter(pageList);
 // cache pages. If you want to cache all pages, the parameter is equal to the number of tabs minus one, and the system default parameter is1, saving two
 mPager.setOffscreenPageLimit(2);
 mPager.setAdapter(pagerAdapter);
 // Set page change listener
 mPager.setOnPageChangeListener(onPageChangeListener);
 }
 /**
 * SimpleOnPageChangeListener. This listener is triggered when our viewpager page changes. Inside, we change the focus of the tab.
 * As the viewpager and actionbar are independent in implementation, we need to manually synchronize them.
 */
 ViewPager.SimpleOnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() {
 @Override
 public void onPageSelected(int position) {
  /**
  * The setSelectedNavigationItem method is used to set the focused tab of the ActionBar.
  * In the following, we judged the sliding menu's gesture mode. If the ViewPager has scrolled to the far left, we set the gesture to full screen,
  * so that when you swipe further to the left, the Menu will open.
  */
  initialize note color
 }
 // private void initTab(int position) {
 if (position == 0) {
  // TODO Auto-generated method stub
  else if (position ==
  t1.setBackgroundColor(Color.parseColor("#FFFF00"));
  t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
  t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
  } 1) {
  t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
  t2.setBackgroundColor(Color.parseColor("#FFFF00"));
  t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
  }
  t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
  t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
  t3.setBackgroundColor(Color.parseColor("#FFFF00"));
  }
 }
 };
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 switch (v.getId()) {
 case R.id.text1:// Click the first tab
  mPager.setCurrentItem(0, false);
  break;
 case R.id.text2:// Click the second tab
  mPager.setCurrentItem(1, false);
  break;
 case R.id.text3:// Click the third tab
  mPager.setCurrentItem(2, false);
  break;
 default:
  break;
 }
 }
}

Custom MyViewPager

package com.example.myviewpager;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
 * Customizable scrolling page control, you can control whether the page can be scrolled by setting the isCanScroll parameter
 */
public class MyViewPager extends ViewPager {
 /** Whether the page can be scrolled, default is scrollable*/
 private boolean isCanScroll = true;
 public MyViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 public MyViewPager(Context context) {
 super(context);
 }
 public boolean isCanScroll() {
 return isCanScroll;
 }
 /** Set whether the page can be scrolled */
 public void setCanScroll(boolean isCanScroll) {
 this.isCanScroll = isCanScroll;
 }
 @Override
 public void scrollTo(int x, int y) {
 super.scrollTo(x, y);
 }
 // Set the key to disable scrolling
 @Override
 public boolean onTouchEvent(MotionEvent arg0) {
 if (!isCanScroll)
  return true;
 return super.onTouchEvent(arg0);
 }
 @Override
 public boolean onInterceptTouchEvent(MotionEvent arg0) {
 return super.onInterceptTouchEvent(arg0);
 }
 @Override
 public void setCurrentItem(int item, boolean smoothScroll) {
 super.setCurrentItem(item, smoothScroll);
 }
 @Override
 public void setCurrentItem(int item) {
 super.setCurrentItem(item);
 }
}

Adapter:

package com.example.myviewpager;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * ViewPager adapter
 * */
public class MyViewPagerAdapter extends PagerAdapter{
  private List<View> mListViews; 
  public MyViewPagerAdapter(List<View> mListViews) { 
    this.mListViews = mListViews;//Constructor, the parameter is our tab, which is more convenient 
  }
  @Override 
  public void destroyItem(ViewGroup container, int position, Object object)  {   
    container.removeView(mListViews.get(position));//Delete a tab 
  } 
  @Override 
  public Object instantiateItem(ViewGroup container, int position) { //This method is used to instantiate a tab
    container.addView(mListViews.get(position), 0);//Add a tab 
    return mListViews.get(position);
  } 
  @Override 
  public int getCount() {      
    return mListViews.size();//Return the number of tabs 
  } 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) {       
    return arg0 == arg1;//Official suggestion for writing
  }
}

The first view

package com.example.myviewpager;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
/**
 * first
 * @author cgx
 *
 */
public class View1 {
 private Context mContext;
 private View rootView;
 public View1(Context mContext) {
 // TODO Auto-generated constructor stub
 this.mContext=mContext;
 //loading layout
 rootView = LayoutInflater.from(mContext).inflate(
  R.layout.view1_layout, null);
 }
 public View getView(){
 return rootView;
 }
}

layout file for activity

<LinearLayout 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/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF" >
    <TextView
      android:id="@"+id/text1"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="Page Tab"1"
      android:textColor="#000000"
      android:textSize="20sp" />
    <TextView
      android:id="@"+id/text2"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="Page Tab"2"
      android:textColor="#000000"
      android:textSize="20sp" />
    <TextView
      android:id="@"+id/text3"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="Page Tab"3"
      android:textColor="#000000"
      android:textSize="20sp" />
  </LinearLayout>
   <com.example.myviewpager.MyViewPager
    android:id="@"+id/vPager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1.0"
    android:background="#000000"
    android:flipInterval="30"
     />
</LinearLayout>

View1layout

<?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"
  android:background="#123456" >
</LinearLayout>

Since it is used for demonstration, the layout of the view is only distinguished by different background colors, and the specific layout to be displayed in development can be directly modified in the layout file of the view. The views in the demo are written according to the first one, similar to

Summary.

In actual development, although the official has provided many api, when it comes to using them ourselves, we still need to wrap them again according to our habits to become our own tools, so that we can use them directly in the future. The above examples are the summaries I made during my internship. Please forgive my rudeness, and welcome everyone to point out and learn together (^_^)

Code link: http://pan.baidu.com/s/1pJAF6Gz

This is the information compilation of Android ViewPager. We will continue to supplement relevant information in the future. Thank you all for your support to this site!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please report violations by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.

Basic Tutorial
You May Also Like