使用ViewPager实现广告自动轮播的效果
package com.loaderman.viewpgerlunbodemo; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; /** * support v4 和 v7 * v4: 支持Android api4以上版本 * <p> * v7中包含v4 */ public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private final int[] mImageIds = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e}; // 图片标题集合 private final String[] mImageDes = {"巩俐不低俗,我就不能低俗", "朴树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀"}; private TextView tvTitle; private LinearLayout llContainer; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); //切换到下一个页面 int currentItem = mViewPager.getCurrentItem(); mViewPager.setCurrentItem(++currentItem); //继续发送消息, 形成类似递归的循环 mHandler.sendEmptyMessageDelayed(0, 3000); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tvTitle = (TextView) findViewById(R.id.tv_title); llContainer = (LinearLayout) findViewById(R.id.ll_container); mViewPager = (ViewPager) findViewById(R.id.viewpager); mViewPager.setAdapter(new MyAdapter()); //设置当前条目位置 //mViewPager.setCurrentItem(Integer.MAX_VALUE / 2); mViewPager.setCurrentItem(mImageIds.length * 100000); //添加页面切换的事件监听 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //页面滑动监听 } @Override public void onPageSelected(int position) { //页面选中监听 position = position % mImageIds.length; //更新标题 tvTitle.setText(mImageDes[position]); //切换红点图片 //将所有点先初始化为灰点 for (int i = 0; i < mImageIds.length; i++) { ImageView point = (ImageView) llContainer.getChildAt(i); if (i != position) { point.setImageResource(R.drawable.shape_gray); } else { point.setImageResource(R.drawable.shape_red); } } } @Override public void onPageScrollStateChanged(int state) { //页面状态发生变化 } }); //手动初始化第一个页面的标题 tvTitle.setText(mImageDes[0]); //根据新闻个数, 初始化小圆点 for (int i = 0; i < mImageIds.length; i++) { ImageView point = new ImageView(this); //设置margin //当前控件的父控件是谁, 就使用谁的布局参数 //初始化布局参数, 宽高包裹内容 //一般来讲, 布局文件中控件的属性如果是layout_xxxx, 都需要通过布局参数来设置 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout .LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); //从第二个点开始设置左边距 if (i > 0) { params.leftMargin = 10; point.setImageResource(R.drawable.shape_gray); } else { point.setImageResource(R.drawable.shape_red); } //设置布局参数 point.setLayoutParams(params); //将小圆点添加到线性布局上 llContainer.addView(point); } mHandler.sendEmptyMessageDelayed(0, 3000); //给ViewPager设置触摸监听 mViewPager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //停止轮播 //可以清除handler中的所有消息 mHandler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_UP: //继续轮播 mHandler.sendEmptyMessageDelayed(0, 3000); break; default: break; } return false;//返回false表示不消费此事件, 允许viewpager底层处理触摸事件 } }); } class MyAdapter extends PagerAdapter { //返回条目个数 @Override public int getCount() { // return mImageIds.length; return Integer.MAX_VALUE;//条目个数返回整数最大值 } //判断显示的view是不是就是返回的object对象 //只有是true, 才显示, 否则不显示 //一般永远这样写了 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //初始化条目布局对象, 类似getView //ViewPager: 如何避免内存溢出? 永远只最多加载3个页面对象, 当前页, 上一页, 下一页 @Override public Object instantiateItem(ViewGroup container, int position) { //初始化条目布局 ImageView view = new ImageView(MainActivity.this); //0,1,2,3,4 //5,6,7,8,9-->0,1,2,3,4 //10->0 11->1 //15->0 //当前位置对集合大小取余, 返回0-4的位置信息 position = position % mImageIds.length; final int tempPosition= position; //view.setImageResource(mImageIds[position]); view.setBackgroundResource(mImageIds[position]); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "点击了"+tempPosition, Toast.LENGTH_SHORT).show(); } }); //将条目布局添加给ViewPager容器 container.addView(view); System.out.println("初始化条目:" + position); //返回布局对象 return view; } //销毁布局对象 //一般永远这样写了 @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object); //从容器中移除布局对象 container.removeView((View) object); System.out.println("销毁条目:" + position); } } }
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:layout_width="match_parent" android:layout_height="180dp"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="180dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="#a000" android:orientation="vertical" android:padding="5dp"> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题" android:textColor="#fff" android:textSize="16sp"/> <LinearLayout android:id="@+id/ll_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal"> </LinearLayout> </LinearLayout> </FrameLayout> </LinearLayout>
页签的圆形的图形绘制:
shape_gray.xml
<?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>
shape_red.xml
<?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>
效果图:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!