ViewPager使用讲解
ViewPager的使用讲解
ViewPager的几个主要逻辑：
一、自动轮播逻辑：
1.使用Handler发送一个延时消息来启动自动轮播2.在handleMessage方法中，先获取当前页面，然后将当前页面在使用之前设置为下一页(可以切换到下一页)
3.在在handleMessage方法中，
继续发送一个延时消息，这样就可以不断的轮播了
二、手指按下的时候停止轮播，抬起继续轮播逻辑：
1.给ViewPager设置onTouchEventListener事件在手指按下的时候，使用Handler将所有消息移除
2.手指抬起的时候，继续发送延时消息
三、动态更新小圆点逻辑：
1.创建一个存放小圆点的LinearLayout布局
2.在drawable目录下创建shape标签的文件，使用它的shape属性中的oval绘制圆，并用size标签定相同的宽和高
3.创建ImageVeiw对象，并通过setImageResource将drawable设置给ImageVeiw对象
4.将ImageVeiw添加到LinearLayout容器中
5.通过修改布局参数的leftMargin属性，修改小圆点的间距
6.通过ViewPager的addOnPageChangeListener方法监听页面的切换，然后在页面选中的时候更新小红点的状态
展示一个下App:
代码：
public class MainActivity extends AppCompatActivity { private ViewPager mViewpager; private int[] mImageIds = {R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g}; private String[] mImageDes = {"美图一", "美图二", "美图三", "美图四", "美图五", "美图六", "美图七"}; private MainActivity mContent; private TextView tvTitle; private LinearLayout mLlContainer; //小圆点的容器 private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case 0: //切换到下一页 int currentItem = mViewpager.getCurrentItem(); mViewpager.setCurrentItem(++currentItem); mHandler.sendEmptyMessageDelayed(0, 2000); //继续两秒发一个消息 break; } } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mContent = MainActivity.this; mViewpager = (ViewPager) findViewById(R.id.viewpager); mLlContainer = (LinearLayout) findViewById(R.id.llContainer); tvTitle = (TextView) findViewById(R.id.tvTitle); //初始化第一个条目文字 tvTitle.setText(mImageDes[0]); mViewpager.setAdapter(new MyViewPager()); //设置当期的item位置 mViewpager.setCurrentItem(mImageIds.length * 1000000); initDot(); //初始化小圆点 //监听ViewPager页面切换 mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { //页面滑动的时候回调 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //页面被选中的时候回调 @Override public void onPageSelected(int position) { position = position % mImageDes.length; tvTitle.setText(mImageDes[position]); for (int i = 0; i < mLlContainer.getChildCount(); i++) { ImageView ivDot = (ImageView) mLlContainer.getChildAt(i); if (i == position) { ivDot.setImageResource(R.drawable.red_dot_shape); } else { ivDot.setImageResource(R.drawable.grey_dot_shape); } } } //页面滑动状态发生改变的时候回调 @Override public void onPageScrollStateChanged(int state) { } }); //给ViewPager设置触摸监听 mViewpager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: //手按下的时候停止自动轮播 mHandler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_UP: //抬起的时候继续自动轮播 mHandler.sendEmptyMessageDelayed(0, 2000); break; } return false; } }); } private void initDot() { for (int i = 0; i < mImageIds.length; i++) { ImageView ivDot = new ImageView(this); //布局参数可以修改xml文件中以layout开头的属性, // LayoutParams保存了一个View的布局参数。 /** * 注意：通过getLayoutParams()获取LayoutParams时， * 需要根据View所在父布局的类型来设置不同的类型， * (为什么呢？我们知道LayoutParams作用就是子视图告诉父视图 * 它们想要变成什么样的布局，因此必须要使用父控件.LayoutParams， * 况且只有ViewGroup才有LayoutParams属性) */ LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); if (i > 0) { layoutParams.leftMargin = 10; ivDot.setImageResource(R.drawable.grey_dot_shape); } else { ivDot.setImageResource(R.drawable.red_dot_shape); } ivDot.setLayoutParams(layoutParams); mLlContainer.addView(ivDot); } //启动自动轮播 mHandler.sendEmptyMessageDelayed(0, 2000); //延时两秒发一个消息 } /** * ViewPager内存优化： * 永远最多只加载3页，其余页都销毁 * 即：上一页、当前页、下一页 * 这样的做法也有助于滑动的流畅性 */ class MyViewPager extends PagerAdapter { //返回条目的个数 @Override public int getCount() { //为了可以无限制的左右滑动，将此值设为整数的最大值 return Integer.MAX_VALUE; } //判断当前显示的对象是否是我们初始化返回的object(固定这样写) @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //初始化条目的布局，类似于getView(); @Override public Object instantiateItem(ViewGroup container, final int position) { int i = position % mImageIds.length; //初始化布局对象 View view = View.inflate(mContent, R.layout.viewpager_item, null); ImageView ivIcon = (ImageView) view.findViewById(R.id.ivIcon); //给ViewPager的item增加点击事件(一般会给图片设置点击事件) ivIcon.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContent, "跳转到美图展示界面", Toast.LENGTH_SHORT).show(); } }); ivIcon.setImageResource(mImageIds[i]); /** * setImageResource和setBackGroundResource区别： * 后者是可以填充父布局的 */ //将布局对象添加给容器 container.addView(view); //返回布局对象 return view; } //销毁布局，由系统自动调用（固定这样写） @Override public void destroyItem(ViewGroup container, int position, Object object) { //上面我们将布局放入到container容器中，现在移除 container.removeView((View) object); } } }布局：
<?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" > <FrameLayout android:layout_width="match_parent" android:layout_height="200dp"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="#277bdb" android:gravity="center" android:orientation="vertical" android:padding="8dp"> <TextView android:id="@+id/tvTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题" android:textColor="#000" android:textSize="16sp"/> <LinearLayout android:id="@+id/llContainer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="horizontal"/> </LinearLayout> </FrameLayout> </RelativeLayout>shape标签：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ccc"/> <size android:width="10dp" android:height="10dp"/> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#f00"/> <size android:width="10dp" android:height="10dp"/> </shape>