`

为ViewPager设置CirclePageIndicator(小圆点)

阅读更多
一切为了快速迭代!

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.lang.reflect.Field;

/**
 * Created by liangfei on 3/26/15.
 */
public class CirclePageIndicator extends LinearLayout implements ViewPager.OnPageChangeListener {
    public static final int INDICATOR_TYPE_CIRCLE = 0;
    public static final int INDICATOR_TYPE_FRACTION = 1;

    public enum IndicatorType {
        CIRCLE(INDICATOR_TYPE_CIRCLE),
        FRACTION(INDICATOR_TYPE_FRACTION),
        UNKNOWN(-1);

        private int type;
        IndicatorType(int type) {
            this.type = type;
        }

        public static IndicatorType of(int value) {
            switch (value) {
                case INDICATOR_TYPE_CIRCLE:
                    return CIRCLE;
                case INDICATOR_TYPE_FRACTION:
                    return FRACTION;
                default:
                    return UNKNOWN;
            }
        }
    }

    public static final int DEFAULT_INDICATOR_SPACING = 5;

    private int mActivePosition = -1;
    private int mIndicatorSpacing;
    private boolean mIndicatorTypeChanged = false;

    private IndicatorType mIndicatorType = IndicatorType.of(INDICATOR_TYPE_CIRCLE);
    private ViewPager mViewPager;

    private ViewPager.OnPageChangeListener mUserDefinedPageChangeListener;

    public CirclePageIndicator(Context context) {
        this(context, null);
    }

    public CirclePageIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirclePageIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.CirclePageIndicator, 0, 0);
        try {
            mIndicatorSpacing = a.getDimensionPixelSize(
                    R.styleable.CirclePageIndicator_indicator_spacing,
                    DEFAULT_INDICATOR_SPACING);
            int indicatorTypeValue = a.getInt(
                    R.styleable.CirclePageIndicator_indicator_type,
                    mIndicatorType.type);
            mIndicatorType = IndicatorType.of(indicatorTypeValue);
        } finally {
            a.recycle();
        }

        init();
    }

    private void init() {
        setOrientation(HORIZONTAL);
        if (!(getLayoutParams() instanceof FrameLayout.LayoutParams)) {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            params.gravity = Gravity.BOTTOM | Gravity.START;
            setLayoutParams(params);
        }
    }

    public void setViewPager(ViewPager pager) {
        mViewPager = pager;
        mUserDefinedPageChangeListener = getOnPageChangeListener(pager);
        pager.setOnPageChangeListener(this);
        setIndicatorType(mIndicatorType);
    }

    public void setIndicatorType(IndicatorType indicatorType) {
        mIndicatorType = indicatorType;
        mIndicatorTypeChanged = true;
        if (mViewPager != null) {
            addIndicator(mViewPager.getAdapter().getCount());
        }
    }

    private void removeIndicator() {
        removeAllViews();
    }

    private void addIndicator(int count) {
        removeIndicator();
        if (count <= 0) return;
        if (mIndicatorType == IndicatorType.CIRCLE) {
            for (int i = 0; i < count; i++) {
                ImageView img = new ImageView(getContext());
                LayoutParams params = new LayoutParams(
                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                params.leftMargin = mIndicatorSpacing;
                params.rightMargin = mIndicatorSpacing;
                img.setImageResource(R.drawable.circle_indicator_stroke);
                addView(img, params);
            }
        } else if (mIndicatorType == IndicatorType.FRACTION) {
            TextView textView = new TextView(getContext());
            textView.setTag(count);
            LayoutParams params = new LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            addView(textView, params);
        }
        updateIndicator(mViewPager.getCurrentItem());
    }

    private void updateIndicator(int position) {
        if (mIndicatorTypeChanged || mActivePosition != position) {
            mIndicatorTypeChanged = false;
            if (mIndicatorType == IndicatorType.CIRCLE) {
                ((ImageView) getChildAt(mActivePosition))
                        .setImageResource(R.drawable.circle_indicator_stroke);
                ((ImageView) getChildAt(position))
                        .setImageResource(R.drawable.circle_indicator_solid);
            } else if (mIndicatorType == IndicatorType.FRACTION) {
                TextView textView = (TextView) getChildAt(0);
                //noinspection RedundantCast
                textView.setText(String.format("%d/%d", position + 1, (int) textView.getTag()));
            }
            mActivePosition = position;
        }
    }

    private ViewPager.OnPageChangeListener getOnPageChangeListener(ViewPager pager) {
        try {
            Field f = pager.getClass().getDeclaredField("mOnPageChangeListener");
            f.setAccessible(true);
            return (ViewPager.OnPageChangeListener) f.get(pager);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        return null;
    }

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

    @Override
    public void onPageSelected(int position) {
        updateIndicator(position);
        if (mUserDefinedPageChangeListener != null) {
            mUserDefinedPageChangeListener.onPageSelected(position);
        }
    }

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



自定义属性:
<resources>
    <declare-styleable name="CirclePageIndicator">
        <attr name="indicator_spacing" format="dimension" />
        <attr name="indicator_type" format="enum">
            <enum name="circle" value="0" />
            <enum name="fraction" value="1" />
        </attr>
    </declare-styleable>
</resources>


两个点:







不使用上面的类。
快速的使用方法:
伪代码

private ViewPager viewPager;
	private LinearLayout indicators;
	private ArrayList<View> listViews = new ArrayList<View>();
	private int curPagerPosition=0,oldPagerPosition=0;
.......
viewPager=(ViewPager)findViewById(R.id.viewPager);
indicators=(LinearLayout)findViewById(R.id.indicators);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				indicators.getChildAt(oldPagerPosition).setBackgroundResource(R.drawable.img_detail_dot_normal);
				indicators.getChildAt(position).setBackgroundResource(R.drawable.img_detail_dot_selected);
				oldPagerPosition=position;
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});


indicators.removeAllViews();
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin=10;
params.rightMargin=10;
List<ProductImgEntity> imgs=curProductDetailInfo.getImgs();
						if(curProductDetailInfo.getImgs()==null){
							showToast(R.string.alert_data_incomplete);
	return;
}
						int size=imgs.size();
						for(int i=0;i<size;i++){
							View view=LayoutInflater.from(context).inflate(R.layout.item_product_img, null);
							ImageView item_0=(ImageView)view.findViewById(R.id.item_0);
							Commands.loadImageByVolley(curProductDetailInfo.getImgs().get(i).getImgUrl(),item_0,R.drawable.default_img,400,400);
							listViews.add(view);
							
							ImageView child=new ImageView(context);
							child.setLayoutParams(params);
							child.setBackgroundResource(i==curPagerPosition?R.drawable.img_detail_dot_selected:R.drawable.img_detail_dot_normal);
							indicators.addView(child);
						}
						
						viewPager.setAdapter(new MyPagerAdapter(listViews));









CircleIndicator
https://github.com/THEONE10211024/CircleIndicator
  • 大小: 200 Bytes
  • 大小: 221 Bytes
  • 大小: 1.1 KB
  • 大小: 1.1 KB
分享到:
评论

相关推荐

    ViewPager页面切换导航附加小圆点效果演示

    2. 主Activity或Fragment,其中设置了ViewPager和小圆点指示器,并关联了适配器。 3. 小圆点指示器的布局文件,可能包含一个LinearLayout或RelativeLayout,里面包含了多个ImageView或自定义的圆形View。 4. 监听...

    给ViewPager添加indicator

    而Indicator则是用来指示当前ViewPager中所显示页面的一种可视化元素,通常表现为小圆点或其他形状,用户可以通过观察Indicator了解当前浏览的是哪个页面以及总共有多少页面。本教程将详细介绍如何在Android项目中为...

    Android-小圆点指示器的viewpager使用非常方便自动轮播图片

    在Activity或Fragment中,设置`CirclePageIndicator`与`ViewPager`关联: ```java CircleIndicator indicator = findViewById(R.id.indicator); indicator.setViewPager(viewPager); ``` 6. **同步指示器状态*...

    ViewPager底部带圆圈标识

    标题中的“ViewPager底部带圆圈标识”指的是在Android开发中,使用ViewPager进行页面滑动时,在底部添加一种视觉指示器,通常表现为小圆点,用来显示当前页面在总页面中的位置。这种设计常见于许多应用的引导页或者...

    viewpager 指示器控件

    2. CirclePageIndicator:这个指示器由Jake Wharton的ViewPagerIndicator库提供,它呈现为一系列连续的小圆点,当前页面对应的圆点会被高亮。使用CirclePageIndicator,你需要在布局文件中添加控件,然后在Activity...

    ViewPagerDemo

    5. **设置适配器**:在`MainActivity`或其他控制类中,获取`ViewPager`实例并设置适配器: ```java ViewPager viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new MyPagerAdapter...

    viewpager和Fragmentviewpager简单使用

    `FragmentViewPager` 是 `ViewPager` 的一个扩展,专为处理 `Fragment` 页面而设计。本教程将深入探讨 `ViewPager` 和 `FragmentViewPager` 的基本用法。 ### 1. ViewPager简介 `ViewPager` 是 Android Support ...

    android ViewPager实现引导页效果

    3. **设置ViewPager**:在主Activity中,实例化ViewPager,并将其Adapter设置为我们之前创建的`GuidePagerAdapter`。记得在布局文件中添加ViewPager,并将其关联到Activity的XML布局中。 4. **数据绑定**:在`...

    ViewPager的简单使用

    在本教程中,我们将深入探讨ViewPager的基本用法以及如何添加底部指示器小圆点。 首先,ViewPager的核心功能是展示一个可以左右滑动的页面序列。它通过适配器(PagerAdapter)来获取并展示数据。创建一个自定义的...

    viewpager特效滑动指示器

    例如,当有三个页面时,可以绘制三个小圆点,当前页面的圆点颜色为选中状态。 2. 使用第三方库:有许多开源库,如`TabPageIndicator`(来自`ViewPagerIndicator`库)和`CirclePageIndicator`,它们提供了丰富的样式...

    ViewPagerXml

    例如,`CirclePageIndicator`是一个常见的选择,它可以为每个页面显示一个小圆点,并突出显示当前页面的圆点。 `RSSIndicator`可能是一个自定义的指示器,专门设计用来显示RSS源的数量,或者是一个包含了RSS源数据...

    android仿新闻客户端图片轮播带小圆点

    本项目标题为"android仿新闻客户端图片轮播带小圆点",描述中提到这个实现具有简洁的代码和良好的用户交互体验,支持手动滑动和自动轮播无缝切换。 首先,我们要理解这个功能的核心技术点: 1. **ViewPager**:在...

    可循环滑动的带指示器Viewpager实现

    在`onCreate()`或`onResume()`中设置`ViewPager`的`OnPageChangeListener`,并在`onPageSelected()`回调中更新指示器的状态。 4. 设置数据:在`PagerAdapter`中填充数据,可以是`Fragment`或者`View`,根据项目需求...

    特效_viewpager动画效果

    这个"特效_viewpager动画效果"主题涉及到如何为ViewPager添加各种动态视觉效果,以提升用户体验和应用的交互性。以下是对这个主题的详细解释: 1. ViewPager基本使用: ViewPager允许用户通过左右滑动来切换页面,...

    android ViewPager实现手机引导页

    最后,将PagerAdapter设置到ViewPager中,并添加一个页面切换完成后的回调,以便在用户浏览完所有引导页后跳转到主界面: ```java ViewPager viewPager = findViewById(R.id.view_pager); List&lt;View&gt; pages = new ...

    ViewPager和点的适配

    为了提供更好的用户体验,可以为页面切换添加平滑的动画效果,如淡入淡出、滑动等,这可以通过在PagerAdapter中设置相应的动画实现。 7. **优化性能** 对于内容较多的ViewPager,确保使用ViewHolder模式避免频繁...

    安卓欢迎界面引导页面viewpager相关-Viewpager实现引导页.rar

    - 设置Adapter:在Activity或Fragment中,获取ViewPager实例,然后设置刚才创建的PagerAdapter。 - 添加指示器(可选):为了增强用户体验,通常会在引导页下方添加一个指示器,如小圆点,来显示当前页面的位置。...

    带引导小点的Viewpager展示界面

    1. **ViewPager的使用**:首先,需要在布局XML文件中添加ViewPager,并为其设置适配器。适配器通常是一个实现了`PagerAdapter`接口的自定义类,它负责提供要显示的页面内容。在这个案例中,适配器可能包含一个包含...

    viewpager指示器.zip

    在Android开发中,ViewPager是一个非常常用的组件,它允许用户通过左右滑动来切换不同的页面,通常用于实现类似相册、应用设置等界面的平滑过渡。而“ViewPager指示器”则是与ViewPager配合使用的控件,它能显示当前...

Global site tag (gtag.js) - Google Analytics