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

自定义小圆点指示器

作者: 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