ViewPager轮播图

最新推荐文章于 2025-01-12 17:21:46 发布

原创最新推荐文章于 2025-01-12 17:21:46 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #轮播图 #自动播放 #pageAdapte

android 专栏收录该内容

130 篇文章

订阅专栏

目前很多的电商类的APP首页都有这样的轮播图，所以在此提供本人的demo

1、先看看它的布局文件

这里还是挺简单的，就一个ViewPager和一个LinearLayout，LinearLayout是用来放那些小点的（指示器），这里要给它id这样方便对他进行操作。

<?xml version="1.0" encoding="utf-8"?>
<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.ws.myrecycleview.activity.ViewPagerLoopActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="224dp">

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/linear_dot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/viewpager"
        android:layout_marginTop="2dp"
        android:orientation="horizontal"
        android:background="#ffdd00"
        android:gravity="center">

    </LinearLayout>

</RelativeLayout>

public class ViewPagerLoopActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    //放指示器的
    private LinearLayout mLinearLayout;
    //放图片资源的，我这里用的是本地的资源，根据需求自行修改
    private List<Integer> imageArray;
    //ViewPager中放的内容
    private ImageView[] imageViews;
    //适配器设置viewpager的
    private MyViewPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_loop);

        init();

        adapter = new MyViewPagerAdapter();
        mViewPager.setAdapter(adapter);

        new Thread(new Runnable() {
            @Override
            public void run() {
                //循环播放
                while (true){
                    //3秒自动到下一张
                    SystemClock.sleep(3000);
                    //在主线程中去更新UI（该方法为把主线程请到子线程家里来）
                    runOnUiThread(new Runnable() {
                        public void run() {
                            int currentViewPager = mViewPager.getCurrentItem()+1;
                            //如果到了最后一张，让他返回显示第一张（关键）
                            if(currentViewPager == imageViews.length){
                                mViewPager.setCurrentItem(0);
                            }else {
                                mViewPager.setCurrentItem(currentViewPager);
                            }

                        }
                    });

                }

            }
        }).start();//别忘了start哈，否则没效果
    }

    private void init() {
        initViews();
        initDatas();
        initListeners();
    }

    private void initListeners() {
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
                    mLinearLayout.getChildAt(i).setEnabled(true);
                }
                mLinearLayout.getChildAt(position).setEnabled(false);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initDatas() {
        imageArray = new ArrayList<>();
        imageArray.add(R.mipmap.image1);
        imageArray.add(R.mipmap.image2);
        imageArray.add(R.mipmap.image3);
        imageArray.add(R.mipmap.image4);

        imageViews = new ImageView[imageArray.size()];

        for (int i = 0; i < imageArray.size(); i++) {
            View dot = new View(this);
            dot.setBackgroundResource(R.drawable.dot_select);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(30, 30);
            params.leftMargin = 10;
            dot.setEnabled(false);
            dot.setLayoutParams(params);
            mLinearLayout.addView(dot);
            ImageView imageView_image = new ImageView(ViewPagerLoopActivity.this);
            imageView_image.setImageResource(imageArray.get(i));
            imageViews[i] = imageView_image;
        }

        for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
            mLinearLayout.getChildAt(i).setEnabled(true);
        }
        mLinearLayout.getChildAt(0).setEnabled(false);


    }

    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mLinearLayout = (LinearLayout) findViewById(R.id.linear_dot);
    }

    private class MyViewPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return imageViews.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        //要addView然后返回要显示的view，不要使用super的那个东东，会出错的
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(imageViews[position]);
            return imageViews[position];
        }
        //去掉super的那个东东，前面用了addView这里就要用removeView
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imageViews[position]);
        }
    }
}

这里差不多就结束了，关键就是到最后时要让他回到第一个，还有就是让它循环，不停的动。

接下来提供几个drawable的资源

// 指示器的背景选择器dot_select

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:drawable="@drawable/dot_white"/>
    <item android:state_enabled="false" android:drawable="@drawable/dot_black"/>
</selector>

dot_white白点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="0.5dp"/>
    <solid android:color="#ffffff"/>
    <stroke android:color="#000000"
        android:width="1dp"/>
</shape>

dot_black黑点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="0.5dp"/>
    <solid android:color="#000000"/>
    <stroke android:color="#ffffff"
        android:width="1dp"/>
</shape>