Implementation of Carousel Diagram in Android

Last time I talked about the practice of a small red dot indicator. The connection with this suddenly made me think of a place where there are more small red dots, that is, the carousel. In fact, the carousel is nothing, a ViewPager plus this little red dot indicator, we can make it ourselves. But what the product wants is an infinite loop and an automatic carousel. Well, that gave birth to this blog.

First we have a layout.

activity_lb.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="200dp">
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <com.hao.baselib.widge.PagerIndicator
            android:id="@+id/pageIndicator"
            android:layout_width="100dp"
            android:layout_height="20dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
</LinearLayout>

Here you can see that we used a ViewPager and a PagerIndicator. I won't say much about ViewPager. We talked about the specific code and usage of PagerIndicator in the previous blog. Here I post a link for your reference.

About the production of the little red dot indicator in Android

Okay, next is the content of Activity

LbActivity.java

public class LbActivity extends BaseActivity<LbModel> implements LbCallback {

    private ViewPager mViewPager;
    private HotSalePagerAdapter hotSalePagerAdapter;
    //定时用的
    private Handler mHandler;
    private int currentPoint = 3 * 100;
    private PagerIndicator pageIndicator;

    @Override
    protected LbModel getModelImp() {
        return new LbModel(this, this);
    }

    @Override
    protected int getContentLayoutId() {
        return R.layout.activity_lb;
    }

    @Override
    protected void initWidget() {
        //初始化控件
        mViewPager = findViewById(R.id.viewpager);
        pageIndicator = findViewById(R.id.pageIndicator);
        pageIndicator.setCount(3,10);
        mViewPager.setPageMargin(24);
        //设置适配器
        ArrayList<String> list = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            list.add("");
        }
        hotSalePagerAdapter = new HotSalePagerAdapter(this, list);
        mViewPager.setAdapter(hotSalePagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (position%3 != 2){
                    pageIndicator.setCurrent(position % 3, positionOffset);
                }
                Log.i("aaaaaaaaaaaaaaaa","aaa"+position%3+"");
            }

            @Override
            public void onPageSelected(int position) {
                currentPoint = position+1;
                Log.i("aaaaaaaaaaaaaaaa","bbb"+position%3+"");
                pageIndicator.setCurrent(position%3,0);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        mViewPager.setCurrentItem(currentPoint);
        mHandler = new Handler();
        Runnable r = new Runnable() {
            @Override
            public void run() {
                mViewPager.setCurrentItem(currentPoint);
                //每隔10分钟循环执行run方法
                mHandler.postDelayed(this, 3000);
            }
        };
        //主线程中调用：
        mHandler.postDelayed(r, 3000);//延时100毫秒
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mHandler != null) {
            mHandler.removeCallbacksAndMessages(this);
        }
    }
}

You can transplant the code to your own Activity or Fragment according to the specific situation

Finally, the adapter

HotSalePagerAdapter.java

public class HotSalePagerAdapter extends PagerAdapter {

    /**
     * 上下文
     */
    private Activity mContext;
    /**
     * 布局加载器
     */
    private LayoutInflater mInflate;
    /**
     * 数据
     */
    private ArrayList<String> mData;
    /**
     * 异步图片加载工具
     */
    private DownloadImageLoader downloadImageLoader;

    public HotSalePagerAdapter(Activity context,ArrayList<String> list){
        mContext = context;
        mData = list;
        mInflate = LayoutInflater.from(mContext);
        downloadImageLoader = DownloadImageLoader.getInstance();
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View rootView = mInflate.inflate(R.layout.item_banner,null);
        ImageView imageView = rootView.findViewById(R.id.iv_banner);
        if (position %3 == 0){
            downloadImageLoader
                    .loadImage(mContext
                            ,"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl" +
                                    ".duitang.com%2Fuploads%2Fitem%2F201902%2F03%2F20190203145913_" +
                                    "yaynj.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f" +
                                    "9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618128283&t=f0bcb9d5d6" +
                                    "b7da4bd9a4b6fcd182c5db"
                            ,R.mipmap.ic_about
                            ,R.mipmap.ic_about
                            ,imageView);
        }else if (position % 3 == 1){
            downloadImageLoader
                    .loadImage(mContext
                            ,"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaim" +
                                    "g.cn%2Fsinacn12%2F456%2Fw640h616%2F20180821%2F0eed-hhzsnea12" +
                                    "63343.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9" +
                                    "999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618128283&t=2f9e1755" +
                                    "ce694edb99a8b43758cf7700"
                            ,R.mipmap.ic_about
                            ,R.mipmap.ic_about
                            ,imageView);
        }else if (position %3 == 2){
            DownloadImageLoader.getInstance()
                    .loadImage(mContext
                            ,"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg" +
                                    ".hkwb.net%2Fatt%2Fsite2%2F20151214%2F6782afe97a6e09a71fdb30" +
                                    "4ccefb474a.jpg&refer=http%3A%2F%2Fimg.hkwb.net&app=2002&siz" +
                                    "e=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618128283&t=9d073" +
                                    "8c4a9d2ea17dc36c2a52d1c8627"
                            ,R.mipmap.ic_about
                            ,R.mipmap.ic_about
                            ,imageView);
        }
        container.addView(rootView,0);
        return rootView;
    }
}

Here I wrote a dead value in the adapter. You can pass in the required value to the list according to the specific situation. And we need to modify some related values, for example, 3 is written in many places here, which should be changed to list.size(). I won’t change the specifics, and everyone will learn by themselves. If you have any questions, you can leave a message in the message area.