ViewPager_html/css_WEB-ITnose implemented by user guide sliding left and right

Continuing from the previous blog, the previous blog used ImageSwitcher to implement the user guide function, and now uses ViewPager to implement the same function. Look at the code directly:

Layout file activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    tools:context=".MainActivity" >       <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"/>    <LinearLayout        android:id="@+id/dots"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="50dp"        android:gravity="center_horizontal"        android:orientation="horizontal" >    </LinearLayout></RelativeLayout>

The switching of ViewPager pages uses small dots to indicate the current number. Page, here the drawable.xml file is used to draw, as follows:

dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">      <corners android:radius="5dip" />      <solid android:color="#FF930000" /></shape>

dot_nomal.xml

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">      <corners android:radius="5dip" />      <solid android:color="#FF3C3C3C" /></shape>

The following code in Activity:

package com.example.viewpagerautoswitch;import java.util.ArrayList;import java.util.List;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.os.Bundle;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.ViewGroup.LayoutParams;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.Toast;@SuppressLint("HandlerLeak")public class MainActivity extends Activity {	private ViewPager mViewPager ;	private MyPagerAdapter mViewPagerAdapter ;	private LinearLayout mLinearLayout ;	private ImageView[] mImageDots ;	private Context mContext ;		@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		mContext = MainActivity.this ;		mViewPager = (ViewPager)findViewById(R.id.viewpager);		mLinearLayout = (LinearLayout)findViewById(R.id.dots);		initViewPager(getImageItem() ,0);	}		public void initViewPager(List<ImageView> mList ,int position){		mImageDots = new ImageView[mList.size()];		for(int i=0 ;i<mList.size() ;i++){			ImageView image = new ImageView(mContext);			image.setLayoutParams(new LayoutParams(10, 10));			image.setBackgroundResource(R.drawable.dot_nomal);			mImageDots[i] = image ;			mLinearLayout.addView(image);			TextView tv = new TextView(mContext);			tv.setLayoutParams(new LayoutParams(20, 10));			mLinearLayout.addView(tv);		}		mViewPagerAdapter = new MyPagerAdapter(mContext,mList);				mViewPager.setOnPageChangeListener(new OnPageChangeListener() {			// onPageScrollStateChanged --> onPageSelected --> onPageScrolled -->onPageScrollStateChanged			@Override			public void onPageSelected(int position) {				for(int i=0 ;i<mImageDots.length ;i++){					if(i == position){						mImageDots[i].setBackgroundResource(R.drawable.dot_focus);					}else{						mImageDots[i].setBackgroundResource(R.drawable.dot_nomal);					}				}			}						@Override			public void onPageScrolled(int current_position, float persent, int px) {			}						@Override			public void onPageScrollStateChanged(int state) {			}		});				mViewPager.setOnClickListener(new OnClickListener() {			@Override			public void onClick(View view) {			}		});				mViewPager.setAdapter(mViewPagerAdapter);		mViewPager.setCurrentItem(position);		mImageDots[position].setBackgroundResource(R.drawable.dot_focus);	}		public List<ImageView> getImageItem(){		List<ImageView> list = new ArrayList<ImageView>();		ImageView img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img1);		list.add(img);		img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img2);		list.add(img);		img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img3);		list.add(img);		return list ; 	}		@Override	public void finish() {		super.finish();	}}

The difference between ViewPager and ImageSwitcher here is that ViewPager uses Adapter to encapsulate the pages that need to be installed, while ImageSwitcher uses ViewFactory to add them. Installing pictures. Therefore, when using viewPager, you need to integrate PagerAdapter to implement the corresponding interface. As follows:

MyPagerAdapter.java

package com.example.viewpagerautoswitch;import java.util.List;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;public class MyPagerAdapter extends PagerAdapter {		private List<ImageView> items ; 	private Context mContext ;		public MyPagerAdapter(Context context,List<ImageView> item){		mContext = context ;		items = item ;	}	@Override	public int getCount() {		return items == null ? 0 : items.size();	}	@Override	public boolean isViewFromObject(View view, Object obj) {		return view == (View)obj;	}		 @Override  	 public Object instantiateItem (ViewGroup container, int position) {  	        ImageView image = items.get(position); 	        ((ViewPager)container).addView(image, 0);  	        return image;  	 }  	      	 @Override  	 public void destroyItem (ViewGroup container, int position, Object object) {  	        container.removeView((View)object);  	 }  }

In this way, the user guide function can be realized. The specific page effect is as follows: The picture shows the second pager In this case, this is a demo on an Android phone. If used on an Android set-top box, the left and right keys can be captured to slide the time.

Sometimes, in the application, it is not just to switch pictures. Maybe this Pager has the meaning of a click event, such as jumping to a certain web page after clicking. , do this! ? Here you can encapsulate your Adapter data, replace the ImageView with the encapsulated data you define, instantiate a View in the instantiateItem() rewritten in the Adapter, and then return it, because the list of initialized Adapter has the original value in MainActivity Data, then when the user clicks on a pager, extract the information represented by the pager, such as a URL link, etc.

In fact, many apps now use the effect of automatic cycle switching. This effect is nothing more than using a timer Handler. You only need to add the following code:

private Timer mTimer ;	private void startTimer(){		if(mTimer == null){			mTimer = new Timer(true);		}		mTimer.schedule(new TimerTask(){			@Override			public void run() {				mHandler.sendEmptyMessage(0);			}		}, 1000, 4000) ;// 延迟1秒开始执行，循环执行时间是4秒	}		private void stopTimer(){		if(mTimer != null){			mTimer.cancel() ;			mTimer = null ;		}	}		@SuppressLint("HandlerLeak")	Handler mHandler = new Handler(){		public void handleMessage(android.os.Message msg) {			if(msg.what == 0){                 int mViewPagerCurrentIndex = mViewPager.getCurrentItem();                   mViewPagerCurrentIndex = (++mViewPagerCurrentIndex) % mViewPager.getAdapter().getCount() ;                 mViewPager.setCurrentItem(mViewPagerCurrentIndex, true);  			}		};	};

This code provides startTimer() and stopTimer() switches for starting and stopping automatic loop switching. Through these two methods, you can operate more specifically on whether ViewPager needs to automatically switch.

In addition, the automatic switching of ImageSwitcher can also be controlled using this code.