android 自定义viewPager 下标

    像一般商城类 app 的主界面 页面 顶部会有一个  广告展示窗口，如淘宝，京东等。这些广告在滚动的时候 都有一个下标表示 当前条目所处的 序列。

     如图： 

要实现这个效果 思路如下：

     下标用ImageView 实现 ，然后把所有的 下标都 放入 一个横向 的 LinearLayout中 ，通过 设置 LinearLayout的 gravity 控制 下标出现的 位置。

效果图：

具体实现：

       首先 这是个自定义控件，继承自LinearLayout ，需要一些自定义的 属性 比如

       count:  下标的数量

       checkedImg :  选中显示的图拍呢

<resources>    <declare-styleable name="viewPagerIndex" >        <attr name="checkImg" format="reference"/>        <attr name="unCheckImg" format="reference"/>        <attr name="count" format="integer"/>        <attr name="checkIndex" format="integer"/>    </declare-styleable></resources>

实例化时，先获取 布局文件中设置的属性

private void init(AttributeSet attrs) {    TypedArray attributes = getResources().obtainAttributes(attrs, R.styleable.viewPagerIndex);    checkImg = attributes.getResourceId(R.styleable.viewPagerIndex_checkImg, R.mipmap.ic_launcher);    unCheckImg = attributes.getResourceId(R.styleable.viewPagerIndex_unCheckImg, R.mipmap.ic_launcher);    count = attributes.getInt(R.styleable.viewPagerIndex_count, 0);    checkIndex = attributes.getInt(R.styleable.viewPagerIndex_checkIndex, 0);    LayoutInflater.from(getContext()).inflate(R.layout.view_viewpager_index_layout, this);    LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);    layoutParams.setLayoutDirection(HORIZONTAL);    this.setLayoutParams(layoutParams);    setContent();}

然后 调用 setContent() 将 下标 添加 到 LinearLayout中：

/** * 添加 下标 */private void setContent() {    this.removeAllViews();    for (int i = 0; i < count; i++) {        ImageView imageView = new ImageView(getContext());        if (checkIndex == i) {            imageView.setImageResource(checkImg);            imageView.setTag(TAG_CHECKED);        } else {            imageView.setImageResource(unCheckImg);            imageView.setTag(TAG_UN_CHECKED);        }        this.addView(imageView);    }}

如要 改变 选中下标 则 调用此方法：

/** * 设置 选中 下标 的 序号 * * @param checkIndex */public void setCheckIndex(int checkIndex) {    this.checkIndex = checkIndex;    ImageView imageViewChoosed = (ImageView) getChildAt(checkIndex);    if (imageViewChoosed==null||TAG_CHECKED.equals(imageViewChoosed.getTag())) {        // 如果 设置 下标序号 就是当前选中下标序号 则不做任何处理        return;    }    // 将 当前选中下标改为 未选中，    ImageView imageViewChecked = (ImageView) this.findViewWithTag(TAG_CHECKED);    imageViewChecked.setImageResource(unCheckImg);    imageViewChecked.setTag(TAG_UN_CHECKED);    // 将设置的下标设置为选中    imageViewChoosed.setImageResource(checkImg);    imageViewChoosed.setTag(TAG_CHECKED);}

项目地址：http://download.csdn.net/detail/qq_22911297/9868313

最终效果如图