美文网首页
自定义小圆点指示器

自定义小圆点指示器

作者: hongzhenw | 来源:发表于2017-10-18 18:26 被阅读0次

    前言

    可绑定到ViewPager,用于表示滑动的页面

    属性配置

    ci_radius:圆点半径
    ci_margin:圆点间隔距离
    ci_background:圆点未选中颜色
    ci_selected_background:圆点选中颜色
    ci_gravity:圆点的位置(left、centre、right)
    ci_mode:选中圆点在未选中原点的位置(inside、outside、solo)

    示例布局

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:CircleIndicator="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_viewpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    
        <com.gmrz.customcirindicator.view.CircleIndicator
            android:id="@+id/ci_indicator"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            CircleIndicator:ci_background="@android:color/white"
            CircleIndicator:ci_margin="10dp"
            CircleIndicator:ci_mode="outside"
            CircleIndicator:ci_radius="3dp"
            CircleIndicator:ci_selected_background="@android:color/holo_red_light"/>
    
    </RelativeLayout>
    

    调用代码

    public class MainActivity extends AppCompatActivity {
    
        private ViewPager mViewPager;
        private CircleIndicator mIndicator;
        private ArrayList<View> mLists;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initView();
            initData();
            initEvent();
        }
    
        /**
         * 初始化View事件
         */
        private void initEvent() {
            mViewPager.setAdapter(new ViewPagerAdapter());
            mIndicator.setViewPager(mViewPager);
        }
    
        /**
         * 初始化View数据
         */
        private void initData() {
            mLists = new ArrayList<>();
            Random random = new Random();
            for (int i = 0; i < 5; i++) {
                View view = new View(this);
                view.setBackgroundColor(0xff000000 | random.nextInt(0x00ffffff));
                mLists.add(view);
            }
        }
    
        /**
         * 初始化View
         */
        private void initView() {
            mViewPager = (ViewPager) findViewById(R.id.vp_viewpager);
            mIndicator = (CircleIndicator) findViewById(R.id.ci_indicator);
        }
    
        /**
         * ViewPager适配器
         */
        class ViewPagerAdapter extends PagerAdapter {
    
            @Override
            public int getCount() {
                return mLists.size();
            }
    
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
    
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(mLists.get(position));
                return mLists.get(position);
            }
    
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mLists.get(position));
            }
        }
    }
    

    演示截图

    原谅渣图(要啥自行车啊)

    Untitled.gif

    下载地址:Github

    相关文章

      网友评论

          本文标题:自定义小圆点指示器

          本文链接:https://www.haomeiwen.com/subject/jjpeuxtx.html