如何自定义PagerTitleStrip机器人 [英] How to customize PagerTitleStrip android

问题描述

我要自定义ViewPager一个PagerTitleStrip以这种方式：

I must customize a PagerTitleStrip in ViewPager in this way:

我要创建圆与对应的内页的数字，中间的圆圈有更大。任何人有什么建议？

I have to create circles with numbers corresponding to the inside pages, the circle in the middle has to be bigger. Anyone have any suggestions?

推荐答案

您可以使用以下code来创建自定义视图寻呼机指标为View寻呼机

You can use Following code to create custom View Pager Indicator for your View Pager

 public class  SimpleViewPagerIndicator extends LinearLayout implements
        OnPageChangeListener {
    private static final String TAG = SimpleViewPagerIndicator.class
            .getSimpleName();

    private Context context;
    private ViewPager pager;
    private OnPageChangeListener onPageChangeListener;
    private LinearLayout itemContainer;
    private List<ImageView> items;
    private OnClickListener itemClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            int position = (Integer) v.getTag();

            pager.setCurrentItem(position);
        }
    };

    public SimpleViewPagerIndicator(Context context) {
        super(context);
        this.context = context;
        setup();
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        setup();
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        setup();
    }

    private void setup() {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (inflater != null) {
            inflater.inflate(R.layout.view_pager_indicator, this);

            itemContainer = (LinearLayout) findViewById(R.id.pager_indicator_container);

            items = new ArrayList<ImageView>();
        }
    }

    /**
     * Notifies the pager indicator that the data set has changed. Be sure to
     * notify the pager as well (though you may wish to place that call in here
     * yourself).
     */
    public void notifyDataSetChanged() {
        if (pager != null && pager.getAdapter() != null) {

            // remove the old items (if any exist)
            itemContainer.removeAllViews();

            // I'm sure this could be optimised a lot more, eg,
            // by reusing existing ImageViews, but it
            // does the job well enough for now.
            items.removeAll(items);

            // now create the new items.
            for (int i = 0; i < pager.getAdapter().getCount(); i++) {

                ImageView item = new ImageView(context);
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT);
                lp.setMargins(5, 5, 5, 5);
                item.setLayoutParams(lp);
                if (i == pager.getCurrentItem()) {
                    item.setImageResource(R.drawable.selected_dot);
                } else {
                    item.setImageResource(R.drawable.un_selected_dot);
                }

                item.setTag(i);
                item.setOnClickListener(itemClickListener);
                items.add(item);

                itemContainer.addView(item);
            }
        }
    }

    public ViewPager getViewPager() {
        return pager;
    }

    public void setViewPager(ViewPager pager) {
        this.pager = pager;
        this.pager.setOnPageChangeListener(this);
    }

    public OnPageChangeListener getOnPageChangeListener() {
        return onPageChangeListener;
    }

    public void setOnPageChangeListener(
            OnPageChangeListener onPageChangeListener) {
        this.onPageChangeListener = onPageChangeListener;
    }

    private void setCurrentItem(int position) {
        if (pager != null && pager.getAdapter() != null) {
            int numberOfItems = pager.getAdapter().getCount();

            for (int i = 0; i < numberOfItems; i++) {
                ImageView item = items.get(i);
                if (item != null) {
                    if (i == position) {
                        item.setImageResource(R.drawable.selected_dot);
                    } else {
                        item.setImageResource(R.drawable.un_selected_dot);
                    }
                }
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageScrolled(position, positionOffset,
                    positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        setCurrentItem(position);
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageSelected(position);
        }
    }
}

您只需要改变的可绘制。

You just have to change the drawables.

这篇关于如何自定义PagerTitleStrip机器人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！