一个
轻量级的viewpager
指示器 ，类似于nexus5 启动器的效果。它可以自定义
指示器上小圆点的样式和动画效果。可以用于引导页。项目地址：https://github.com/ongakuer/
CircleIndi
cator 效果图：如何使用1. xml布局中创建
CircleIndi
cator是配合ViewPager使用的，一般如下布局：<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@ id/viewpager_default"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<me.relex.
circleindi
cator.
CircleIndi
cator
android:id="@ id/
indi
cator_default"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="40dp"/>
</RelativeLayout>2. java代码中// DEFAULT
ViewPager defaultViewpager = (ViewPager) f
indViewById(R.id.viewpager_default);
CircleIndi
cator default
Indi
cator = (
CircleIndi
cator) f
indViewById(R.id.
indi
cator_default);
DemoPagerAdapter defaultPagerAdapter = new DemoPagerAdapter(getSupportFragmentManager());
defaultViewpager.setAdapter(defaultPagerAdapter);//为ViewPager设置适配器
default
Indi
cator.setViewPager(defaultViewpager);//将ViewPager
添加到
CircleIndi
cator中，以便监听ViewPager的滚动等事件DemoPagerAdapter是ViewPager的适配器，这个需要你去实现。属性说明属性名称类型说明ci_widthdimension小圆点的宽度ci_heightdimension小圆点的高度ci_marg
indimension小圆点间的间距ci_anima
torreferenceViewPager页面切换时，给小圆点设置动画。设置当前的小圆点恢复到未选中时的状态的动画。例如：当前正从a切换到b，那么该属性设置的是a的动画。ci_anima
tor_reversereference和"ci_anima
tor"属性一样，只不过该属性设置的是b的动画。ci_drawablereference设置当前或选中的小圆点的样式，如颜色、圆角等。ci_drawable_unselectedreference和"ci_drawable"一样，只是该属性设置的是未选中的小圆点的样式。点击上面的"下载源码"下载完整的demo工程。demo简要说明xml布局：<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="verti
cal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="@ id/viewpager_default"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<me.relex.
circleindi
cator.
CircleIndi
cator
android:id="@ id/
indi
cator_default"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="40dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="@ id/viewpager_custom"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<me.relex.
circleindi
cator.
CircleIndi
cator
android:id="@ id/
indi
cator_custom"
app:ci_width="10dp"
app:ci_height="4dp"
app:ci_margin="6dp"
app:ci_anima
tor="@anima
tor/
indi
cator_anima
tor"
app:ci_anima
tor_reverse="@anima
tor/
indi
cator_anima
tor_reverse"
app:ci_drawable="@drawable/black_radius_square"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="40dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="@ id/viewpager_unselected_background"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<me.relex.
circleindi
cator.
CircleIndi
cator
android:id="@ id/
indi
cator_unselected_background"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
app:ci_width="6dp"
app:ci_height="6dp"
app:ci_anima
tor="@anima
tor/
indi
cator_no_anima
tor"
app:ci_drawable="@drawable/white_radius"
app:ci_drawable_unselected="@drawable/black_radius"
android:layout_height="40dp"
/>
</RelativeLayout>
</LinearLayout>定义了3组ViewPager和
指示器。第一组是采用默认样式的，被选中的小圆点带有放大的动画。第2组比较全，既定义了动画又修改了样式。第3组是取消动画的同时使用了ci_drawable_unselected属性。适配器Adapter：public class DemoPagerAdapter extends FragmentPagerAdapter {
private int pagerCount = 5;
private Random random = new Random();
public DemoPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override public Fragment getItem(int i) {
return ColorFragment.newInstance(0xff000000 | random.nextInt(0x00ffffff));
}
@Override public int getCount() {
return pagerCount;
}
}定义了5个页面或Fragment，通过ColorFragment生成Fragment。Fragment：public class ColorFragment extends Fragment {
private static final String ARG_COLOR = "color";
private int mColor;
public static ColorFragment newInstance(int param1) {
ColorFragment fragment = new ColorFragment();
Bundle args = new Bundle();
args.putInt(ARG_COLOR, param1);
fragment.setArguments(args);
return fragment;
}
public ColorFragment() {
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mColor = getArguments().getInt(ARG_COLOR);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.color_fragment, container, false);
v.setBackgroundColor(mColor);
return v;
}
}生成空的页面，没有任何控件，只是设置了页面的背景色。
扫一扫
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
