ViewPager实现轮播图

写这篇文章只是对今天所学的知识进行加深印象,对ViewPager的一些处理,比如适配器和各个方法的作用等。

先看效果图


这里我是在xml中写的圆点

Drawable文件夹下的xml代码:

Shape_yes.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff6c67"></solid>
    <corners android:radius="1000dp"></corners>
</shape>

Shape_no.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f0f0f0"></solid>
    <corners android:radius="1000dp"></corners>
</shape>

选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_no"
    android:state_selected="false"
    />
    <item android:drawable="@drawable/shape_yes"
     android:state_selected="true"
        />
</selector>

Activity_main.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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">
        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            android:padding="5dp"
            android:orientation="vertical"
            android:background="#66000000">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:orientation="horizontal"
                android:paddingBottom="10dp">

                <ImageView
                    android:id="@+id/iv_one"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginRight="20dp"
                    android:background="@drawable/selector_show" />

                <ImageView
                    android:id="@+id/iv_two"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginRight="20dp"
                    android:background="@drawable/selector_show" />

                <ImageView
                    android:id="@+id/iv_three"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:background="@drawable/selector_show" />
            </LinearLayout>


        </LinearLayout>
    </RelativeLayout>


</RelativeLayout>

写一个类ViewPagerAdapter_Circleextends PagerAdapter

public class ViewPagerAdapter_Circle extends PagerAdapter {
    ArrayList<View> arrayList;
    Context context;

    public ViewPagerAdapter_Circle(ArrayList<View> arrayList, Context context) {
        this.arrayList = arrayList;
        this.context = context;
    }

    /***数据源的大小(条目)*/
    @Override
    public int getCount() {
        return arrayList.size();
    }

    /**
     * 页面视图是否关联到特定的对象
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;//判断当前要显示的页面
    }

    /**
     * 初始化页面
     * 1.页面添加到container
     * 2.将页面返回
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(arrayList.get(position));//页面添加到container,添加位置
        return arrayList.get(position);
    }

    /**
     * 销毁当前页面
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(arrayList.get(position));
    }

}

MainActivity中代码(含注解)

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    int imageResIds[];
    ArrayList<View> imageViewList;//存图片的集合
    ArrayList<ImageView> imageViews;//存白点的集合
    ImageView iv_one,iv_two,iv_three;
    int oldPostion;//记录原来的位置
    private Boolean flag;
    int count=0;
    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 0) {
                viewPager.setCurrentItem(count);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化布局
        initView();
        //初始化数据
        initData();
        //设置适配器
        initAdapter();
        //设置圆点
        initPoint();
        flag = true;
//设置循环播放
        new Thread() {
            @Override
            public void run() {
                while (flag) {
                    try {
                        Thread.sleep(3000);
                        count++;
                        if (count == 3) {
                            count = 0;
                        }
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    /**传递信息*/
                    Message msg = new Message();
                    msg.what = 0;
                    msg.obj = count;
                    handler.sendMessage(msg);
                }
            }
        }.start();
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.vp);
    }
    //初始化要显示的数据
    private void initData() {
        //图片资源数组
        imageResIds = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c};
        imageViewList = new ArrayList<>();//存图片的集合
        ImageView imageView;
        for (int i = 0; i < imageResIds.length; i++) {
            imageView = new ImageView(this);
            imageView.setBackgroundResource(imageResIds[i]);
            imageViewList.add(imageView);
        }
    }
    //设置适配器
    private void initAdapter() {
        ViewPagerAdapter_Circle myViewPagerAdapter = new ViewPagerAdapter_Circle(imageViewList, this);
        viewPager.setAdapter(myViewPagerAdapter);
    }
    /**
     * 设置圆点的
     */
    private void initPoint() {
        iv_one = (ImageView) findViewById(R.id.iv_one);
        iv_two = (ImageView) findViewById(R.id.iv_two);
        iv_three = (ImageView) findViewById(R.id.iv_three);

        imageViews = new ArrayList<>();
        imageViews.add(iv_one);
        imageViews.add(iv_two);
        imageViews.add(iv_three);
        iv_one.setSelected(true);//设置第一个圆点为true
        /**viewPager监听事件*/
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**滑动时调用*/
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            /**停止时调用*/
            @Override
            public void onPageSelected(int position) {
                imageViews.get(position).setSelected(true);//滑动后颜色改变
                imageViews.get(oldPostion).setSelected(false);//变为初始颜色
                oldPostion = position;//把滑动后的圆点的position给原来的oldPostion
            }
                /**滑动状态改变时调用*/
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

}







  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值