无限循环的viewpager广告轮播图展示
第一步:我们先写布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.text.ViewPagerActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="300dp"/> <LinearLayout android:layout_alignBottom="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="#55000000" > <TextView android:id="@+id/text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这里是广告介绍" android:textColor="#ffffff" android:textSize="20dp" android:gravity="center" android:padding="5dp" /> <LinearLayout android:id="@+id/dot_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center" android:paddingBottom="5dp" > </LinearLayout> </LinearLayout> </RelativeLayout>第二步:初始化 View:就是简单的find
private void initview() { mViewPager= (ViewPager) findViewById(R.id.viewpager); mLinerlayout_dot_group= (LinearLayout) findViewById(R.id.dot_group); mTextview= (TextView) findViewById(R.id.text_view); new Thread(){//自动播放开启线程 public void run(){ while(isCircul){ LogUtils.ytf("自动播放"); SystemClock.sleep(3000); handler.sendEmptyMessage(0); } } }.start(); }第三步:初始化 viewpager的数据 在这里我们本地图片模拟网络
/** * 初始化VIEWPager的数据 */ private void initViewpagerData(){ imageText=new String[]{"汉堡包","饮料可乐","大白加小白","小熊","欢乐游泳"}; mList_ImageView=new ArrayList<>(); int imageIDS[]={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e}; View dotview; for(int i=0;i<imageIDS.length;i++){ iv=new ImageView(this); iv.setImageResource(imageIDS[i]); iv.setScaleType(ImageView.ScaleType.CENTER_CROP); mList_ImageView.add(iv); //准备小圆点的数据 dotview=new View(this); dotview.setBackgroundResource(R.drawable.dot_selector); //设置小圆点的宽和高 LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10,10); if(i!=0){ params.leftMargin=10;//设置小白点间距 } dotview.setLayoutParams(params); //设置小圆点的状态 if(i==0){ dotview.setEnabled(true);//第一个小白点初始化 }else{ dotview.setEnabled(false); } //把小圆点添加到线性布局中 mLinerlayout_dot_group.addView(dotview); } }这里我顺便写一下怎么设置白点
在资源文件drawable文件里新建资源文件 分为 白点 、 黑点 、 点;
1、白点的shape文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <size android:height="5dp" android:width="5dp"/> <solid android:color="#ffffff"/> </shape>2、黑点的shape文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <size android:height="5dp" android:width="5dp"/> <solid android:color="#000000"/> </shape>3、白点黑点的选择状态文件drawable文件
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/dop_select" android:state_enabled="true"/> <item android:drawable="@drawable/dop_unselect" android:state_enabled="false"/> </selector>第四步,写适配器 让图片展示出来
第五步:绑定适配器 设置数据/** * 定义ViewpagerAdapter */ class viewpagerAdapter extends PagerAdapter{ @Override public int getCount() { return Integer.MAX_VALUE;//无限循环的关键 } //是否复用当前view对象 @Override public boolean isViewFromObject(View view, Object object) { return view==object; } //重写每一个条目要显示的内容 @Override public Object instantiateItem(ViewGroup container, int position) { //用position求余mList_ImageView.size()得到 int newposition=position%mList_ImageView.size(); ImageView iv=mList_ImageView.get(newposition); container.addView(iv); return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //移除条目 container.removeView((View) object); } }
private void setdata() { mViewpagerAdapter=new viewpagerAdapter(); mViewPager.setAdapter( mViewpagerAdapter); mTextview.setText(imageText[0]);//第一个标题初始化 }第六步: 要实现 滑动时 白点状态变化 就要监听器
private void initlistenrt() { mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //当页面选中的时候调用 @Override public void onPageSelected(int position) { int newposition=position%mList_ImageView.size(); mLinerlayout_dot_group.getChildAt(newposition).setEnabled(true);//设置小点为白色 mLinerlayout_dot_group.getChildAt(lastposition).setEnabled(false);//把上一个小圆点设为false mTextview.setText(imageText[newposition]);//设置广告介绍 lastposition=newposition;//记录上一个白点的位置以便滑动后设为黑色 } @Override public void onPageScrollStateChanged(int state) { } }); }
最后 启动线程 自动播放:
new Thread(){//自动播放开启线程 public void run(){ while(isCircul){ LogUtils.ytf("自动播放"); SystemClock.sleep(3000); handler.sendEmptyMessage(0); } } }.start();
private Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1); } };
全部activity代码:
public class ViewPagerActivity extends Activity { private ViewPager mViewPager; private LinearLayout mLinerlayout_dot_group; private TextView mTextview; private viewpagerAdapter mViewpagerAdapter; private int lastposition=0; private boolean isCircul=true; private List<ImageView> mList_ImageView; private String [] imageText; private ImageView iv; private Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_pager); initview(); initViewpagerData(); setdata(); initlistenrt(); } private void setdata() { mViewpagerAdapter=new viewpagerAdapter(); mViewPager.setAdapter( mViewpagerAdapter); mTextview.setText(imageText[0]);//第一个标题初始化 } private void initview() { mViewPager= (ViewPager) findViewById(R.id.viewpager); mLinerlayout_dot_group= (LinearLayout) findViewById(R.id.dot_group); mTextview= (TextView) findViewById(R.id.text_view); new Thread(){//自动播放开启线程 public void run(){ while(isCircul){ LogUtils.ytf("自动播放"); SystemClock.sleep(3000); handler.sendEmptyMessage(0); } } }.start(); } /** * 初始化VIEWPager的数据 */ private void initViewpagerData(){ imageText=new String[]{"汉堡包","饮料可乐","大白加小白","小熊","欢乐游泳"}; mList_ImageView=new ArrayList<>(); int imageIDS[]={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e}; View dotview; for(int i=0;i<imageIDS.length;i++){ iv=new ImageView(this); iv.setImageResource(imageIDS[i]); iv.setScaleType(ImageView.ScaleType.CENTER_CROP); mList_ImageView.add(iv); //准备小圆点的数据 dotview=new View(this); dotview.setBackgroundResource(R.drawable.dot_selector); //设置小圆点的宽和高 LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(10,10); if(i!=0){ params.leftMargin=10;//设置小白点间距 } dotview.setLayoutParams(params); //设置小圆点的状态 if(i==0){ dotview.setEnabled(true);//第一个小白点初始化 }else{ dotview.setEnabled(false); } //把小圆点添加到线性布局中 mLinerlayout_dot_group.addView(dotview); } } private void initlistenrt() { mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //当页面选中的时候调用 @Override public void onPageSelected(int position) { int newposition=position%mList_ImageView.size(); mLinerlayout_dot_group.getChildAt(newposition).setEnabled(true);//设置小点为白色 mLinerlayout_dot_group.getChildAt(lastposition).setEnabled(false);//把上一个小圆点设为false mTextview.setText(imageText[newposition]);//设置广告介绍 lastposition=newposition;//记录上一个白点的位置以便滑动后设为黑色 } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 定义ViewpagerAdapter */ class viewpagerAdapter extends PagerAdapter{ @Override public int getCount() { return Integer.MAX_VALUE;//无限循环的关键 } //是否复用当前view对象 @Override public boolean isViewFromObject(View view, Object object) { return view==object; } //重写每一个条目要显示的内容 @Override public Object instantiateItem(ViewGroup container, int position) { //用position求余mList_ImageView.size()得到 int newposition=position%mList_ImageView.size(); ImageView iv=mList_ImageView.get(newposition); container.addView(iv); return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //移除条目 container.removeView((View) object); } } @Override protected void onDestroy() { super.onDestroy(); isCircul=false; } }