用户向导左右滑动页面实现之ViewPager
接着上一篇博客。上一篇博客是用ImageSwitcher实现用户向导功能，如今用ViewPager实现同样的功能。
直接看代码：
布局文件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>
ViewPager页面的切换用小圆点来表示当前是第几页，这里使用drawable.xml文件去绘制的。例如以下：
dot_focus.xml
<?xml version="1.0" encoding="utf-8"?dot_nomal.xml> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip" /> <solid android:color="#FF930000" /> </shape>
<?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>在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();
}
}
这里ViewPager和ImageSwitcher不同的地方在于ViewPager是用Adapter去封装须要加装的页面。而ImageSwitcher使用ViewFactory去加装图片的。所以使用viewPager时须要集成PagerAdapter实现对应的接口就可以。例如以下：
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);
}
}
这样就能够实现用户向导的功能了。详细的页面效果例如以下：图片显示的是第二张pager的情况，这个是android手机上的demo,假设是Android机顶盒上使用的话，能够捕捉左右键去时间滑动。
有时候，在应用中不不过为了能够切换图片，也许这个Pager他有点击事件所表示的意思。比方点击之后跳转到某个网页，这么办。？ 这里能够封装你的Adapter数据，将ImageView。替换成你定义的封装数据，在Adapter中重写的instantiateItem()中去实例化一个View，然后返回就可以，因为初始化Adapter的list在MainActivity中有原始数据，那么当用户在点击某个pager时，提取这个Pager所表示的信息。比方一个网址链接等。
事实上，如今好多app中使用了自己主动循环切换的效果，这个效果不外乎就是用计时器+Handler实现。仅仅须要加入例如以下代码就可以：
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);
}
};
}; 这段代码中提供了開始和停止自己主动循环切换的开关startTimer()、stopTimer()，通过这两个方法。能够更具需求对ViewPager是否须要自己主动切换做操作。
此外，ImageSwitcher的自己主动切换相同能够使用此代码去控制。
浙公网安备 33010602011771号