ViewPager图片轮播

来源:转载


很久没有写博客了,感觉自己太low了,还是得多写写东西,虽然可能是比较简单的小Demo,但是还是不能偷懒!

好了,直接说说今天的demo吧,今天主要就是实现图片轮播。这个demo还是比较简单,所以就简单说下关键点吧!

1.使用ViewPager来显示图片

2.动态的添加底部的指示点

3.将指示点和ViewPager图片进行关联

4.无限循环

只要清楚以上4点,那么就很好写demo了,下面就直接上代码

XML文件是:

<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="match_parent" android:layout_height="wrap_content"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/linearlayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="30dp" android:layout_centerHorizontal="true" android:orientation="horizontal"> </LinearLayout> </RelativeLayout></FrameLayout>

MainActivity的代码是:

package com.feng.viewpagerdemo;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;public class MainActivity extends Activity implements ViewPager.OnPageChangeListener { private ViewPager mViewPager; private LinearLayout mLinearLayout; /** * 装圆点数组 */ private ImageView[] dots; /** * 装ImagView数组 */ private ImageView[] mImageViews; /** * 装图片ID的数组 */ private int[] photos; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLinearLayout = (LinearLayout) this.findViewById(R.id.linearlayout); mViewPager = (ViewPager) this.findViewById(R.id.viewPager); photos = new int[]{R.mipmap.photo1, R.mipmap.photo2, R.mipmap.photo3, R.mipmap.photo4, R.mipmap.photo5}; /** * 初始化底部的指示点,动态将指示点加入布局 */ dots = new ImageView[photos.length]; for (int i = 0; i < dots.length; i++) { ImageView imageView = new ImageView(this); imageView.setLayoutParams(new LinearLayout.LayoutParams(10, 10)); dots[i] = imageView; if (i == 0) { imageView.setBackgroundResource(R.mipmap.message_no_read); } else { imageView.setBackgroundResource(R.mipmap.message_read); } LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); params.leftMargin = 7; params.rightMargin = 7; mLinearLayout.addView(imageView,params); } //初始化图片 mImageViews = new ImageView[photos.length]; for (int i = 0; i < mImageViews.length; i++) { ImageView imageView = new ImageView(this); imageView.setBackgroundResource(photos[i]); mImageViews[i] = imageView; } //设置适配器 mViewPager.setAdapter(new MyAdapter()); //设置监听,使得底部的指示点和图片同步 mViewPager.setOnPageChangeListener(this); //设置ViewPager的默认项, 这样子开始就能往左滑动 mViewPager.setCurrentItem((mImageViews.length) * 100); } @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { setDotSelect(i % mImageViews.length);//ViewPager滑动的时候指示点也变动 } @Override public void onPageScrollStateChanged(int i) { } private class MyAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE;//为了无限轮播,让数据足够大 } @Override public boolean isViewFromObject(View view, Object o) { return view == o; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mImageViews[position % mImageViews.length]); return mImageViews[position % mImageViews.length]; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mImageViews[position % mImageViews.length]); } } /** * 根据选中的Pager设置底部指示点 * @param position */ public void setDotSelect(int position){ for(int i=0;i<dots.length;i++){ if(i== position){ dots[i].setBackgroundResource(R.mipmap.message_no_read); }else{ dots[i].setBackgroundResource(R.mipmap.message_read); } } }}

代码中已经注释很清楚了,还请各位看官多多指教!!

下面是效果图






分享给朋友:
您可能感兴趣的文章:
随机阅读: