ViewPager使用示例(一)
mainActivity如下:
package cn.ifeng.com;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;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.ViewGroup.LayoutParams;import android.view.Window;import android.widget.ImageView;//笔记://利用ViewPager来实现一个应用程序的欢迎界面//0 比ViewPager使用示例(二)要优化一些//1 布局较简单.包含两个东西:ViewPager和几个小圆点的集合//2 初始化所有用于展示的图片和所有的小圆点//3 给ViewPager添加适配器并且对其滑动实现监听//4 参考资料// http://malong26.iteye.com/blog/1332730//http://blog.csdn.net/notice520/article/details/7454568//http://blog.csdn.net/wangkuifeng0118/article/details/7388166public class ViewPagerTestActivity extends Activity {private ViewPager viewPager;//ViewPager要显示的所有Viewprivate ArrayList<View> viewsList;private ViewGroup contentView,dotsGroup;//显示所有的小圆点private ImageView [] dotImageViews; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE); //初始化所有用于展示的图片 LayoutInflater inflater=this.getLayoutInflater(); viewsList=new ArrayList<View>(); ViewPageItemView view1 = new ViewPageItemView(this,R.drawable.guide01);viewsList.add(view1);ViewPageItemView view2 = new ViewPageItemView(this,R.drawable.guide02);viewsList.add(view2);ViewPageItemView view3 = new ViewPageItemView(this,R.drawable.guide03);viewsList.add(view3);ViewPageItemView view4 = new ViewPageItemView(this,R.drawable.guide04);viewsList.add(view4);ViewPageItemView view5 = new ViewPageItemView(this,R.drawable.guide05);viewsList.add(view5); dotImageViews=new ImageView[viewsList.size()]; contentView=(ViewGroup) inflater.inflate(R.layout.main, null); dotsGroup=(ViewGroup) contentView.findViewById(R.id.dotsGroup); viewPager=(ViewPager) contentView.findViewById(R.id.viewPager); //初始化所有的小圆点 for(int i=0;i<viewsList.size();i++){ ImageView imageView=new ImageView(ViewPagerTestActivity.this); //LayoutParams(10, 10)设置imageView的宽和高 imageView.setLayoutParams(new LayoutParams(10, 10)); //左,上,右,下的padding imageView.setPadding(10, 0, 10, 0); dotImageViews[i]=imageView; if(i==0){ // 默认进入程序后第一张图片被选中,所以第一个小圆点显示为亮白色 dotImageViews[i].setBackgroundResource(R.drawable.guide_dot_white); }else{ dotImageViews[i].setBackgroundResource(R.drawable.guide_dot_black); } //将每个点都存入dotsGroup中 dotsGroup.addView(dotImageViews[i]); } //初始化完成View列表和dotsGroup后才 setContentView() setContentView(contentView); viewPager.setAdapter(new MyPagerAdapter()); viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); } //自定义适配器继承自PagerAdapter //当滑动时每次都会摧毁前一个界面,然后新建一个界面 class MyPagerAdapter extends PagerAdapter{ @Overridepublic void startUpdate(View arg0) {} @Overridepublic int getCount() {return viewsList.size();} //初始化arg1位置的界面 @Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager)arg0).addView(viewsList.get(arg1));return viewsList.get(arg1);}//摧毁arg1位置的界面 @Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager)arg0).removeView(viewsList.get(arg1));}//判断是否由对象生成界面 @Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;} } //监听ViewPager实现图片滑动的过程 class MyOnPageChangeListener implements OnPageChangeListener{ //arg0==1的时候表示正在滑动,arg0==2的时候表示滑动完毕了 //arg0==0的时候表示什么都没做,就是停在那@Overridepublic void onPageScrollStateChanged(int arg0) {} //表示在前一个页面滑动到后一个页面的时候,在前一个页面滑动前调用的方法@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {} //arg0是表示当前选中的页面,此方法是在页面跳转完毕的时候调用的@Overridepublic void onPageSelected(int arg0) {//滑动时改变小圆点的显示.循环很巧妙 for(int i=0;i<dotImageViews.length;i++){ //当前已经选中的. dotImageViews[arg0].setBackgroundResource(R.drawable.guide_dot_white); if(arg0!=i){ //当前未选中的. dotImageViews[i].setBackgroundResource(R.drawable.guide_dot_black); } }} } }
ViewPageItemView如下:
package cn.ifeng.com;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.Toast;public class ViewPageItemView extends RelativeLayout { private Context mContext; private ImageView mImageView; private RelativeLayout mLayout; private int mResoureId;public ViewPageItemView(Context context,int resoureId) {super(context);mContext=context;mResoureId=resoureId;init();}private void init() {LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);mLayout = (RelativeLayout)inflater.inflate(R.layout.viewpage_item, null);addView(mLayout);mImageView = (ImageView)mLayout.findViewById(R.id.viewPage_item_imageView);mImageView.setImageResource(mResoureId);mImageView.setOnClickListener(new OnClickListener() {public void onClick(View v) {Toast.makeText(mContext, ""+mResoureId, Toast.LENGTH_SHORT).show();}});}}
main.xml如下:
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/dotsGroup" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="30dp" android:gravity="center_horizontal"> </LinearLayout> </RelativeLayout></FrameLayout>
viewPager_item.xml如下:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/viewPage_item_imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /></RelativeLayout>