ViewPager圆点导航动态实现(利用seletor)

      尝试过重绘view等方法来实现ViewPager底部的圆点导航,上网学习后才发现有更简便的实现方法。


      1.首先设置selector来设定圆点的两种状态,即当前页面被选中、当前页面未被选中:

<?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_selected"></item>
    <item android:state_enabled="false" android:drawable="@drawable/dot_unselected"></item>ß
</selector>

可见,设定了两种状态,当前View被选中,通过setEable(true),来使得圆点使用@drawable/dot_selected来代替;反之则使用@drawable/dot_unselected来代替。

两种状态的文件如下,通过shape标签来实现圆点:
//dot_seleted.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff7c7e8c" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

//dot_unselected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff43465a" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

  2.接下来动态写入圆点:
private void initDots() {
    dots = new ArrayList<>();
    ImageView item;
    for (int i = 0; i < vpList.size(); i++) {//List<Integer> vpList;//用于存储每张图片的resId
        item = new ImageView(this);
        item.setBackgroundResource(R.drawable.dot_selector);//此处将dot_selector设为背景
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20, 20);//设置每一个圆点的宽高
        layoutParams.setMargins(15, 0, 15, 0);//设置左右间隔。注意,由于此处圆点的父View是LinearLayout,故使用LinearLayout.LayoutParams
					     //而非ViewGroup.LayoutParams
        item.setLayoutParams(layoutParams);
        if (vpMain.getCurrentItem() == i)
            item.setEnabled(true);//当前图片被选中,置为true
        else
            item.setEnabled(false);//当前图片未被选中,置为false

        dots.add(item);//该圆点加入集合便于管理
        llDots.addView(item);//将该点加入LinearLayout中
    }
}
3.最后重写onPageSelected方法,即可实现圆点导航:
@Override
public void onPageSelected(int position) {
    for (int i = 0; i < dots.size(); i++) {
        if (position == i)
            dots.get(i).setEnabled(true);
        else
            dots.get(i).setEnabled(false);
    }
}

ps:
踩过的坑,待填:

ViewPager中的onPageSelected()中使用setBackgroundColor()setImageResource()无法成功画出底部圆点的变化,圆点不会正常的跟随图片移动,而

setBackgroundColor()可正常运行(但setBackground不仅是改变了整个矩形背景的颜色,并非单纯地改变圆点颜色)。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值