自定义ViewPagerIndicator

下载地址

创建构造方法及代码初始化

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

}

public ViewPagerIndicator(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public ViewPagerIndicator(Context context) {
super(context);
init();
}
private void init() {
// 获取当前屏幕的宽高
WindowManager windowManager = (WindowManager) getContext()
.getSystemService(Context.WINDOW_SERVICE);
outMetrice = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(outMetrice);
// 初始化画笔
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
}

设置关联的viewPager

/**
* 设置相关联的viewPager
*
* @param viewPager
*/
public void setViewPager(final ViewPager viewPager) {
this.viewPager = viewPager;
// 对viewPager设置监听事件
viewPager.setOnPageChangeListener(this);
// 创建线性布局
linearLayout = new LinearLayout(getContext());
// 将线性布局添加到当前自定义的HorizontalScrollView中
this.addView(linearLayout);
// 获取viewpager的数据适配器，然后获取数据适配器展示的条目的个数
int count = viewPager.getAdapter().getCount();
// 循环遍历
for (int i = 0; i < count; i++) {
// 获取当前的title
String title = (String) viewPager.getAdapter().getPageTitle(i);
// 有多少个Title，就动态的添加多少个TextView
final TextView textView = new TextView(getContext());
// 设置线性布局的布局参数
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
// 设置当前的边距值，默认设置为屏幕宽度的1/5
marginValue = outMetrice.widthPixels / 5;
params.setMargins(0, 0, marginValue, 5);
// 设置TextSize
textView.setTextSize(textSize);
// 设置TextView的标题
textView.setText(title);
if (i == 0) {
// 对于初始的textView的颜色
textView.setTextColor(selectedTextColor);
// 当textView可见的时候，获取textView的宽度
textView.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {

@SuppressWarnings("deprecation")
@Override
public void onGlobalLayout() {
// 初始的textView的宽度定义为索引值为0位置处的索引值
textViewWidth = textView.getWidth();
textView.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
// 当获取到textView的宽度时，重新刷新一下界面
postInvalidate();
}
});
} else {
// 设置textView的未选中的默认字体颜色
textView.setTextColor(unselectedTextColor);
}
// 将textView添加到线性布局中
linearLayout.addView(textView, params);
// 将textView添加到map集合中
tvMap.put(textView, i);
// 对textView设置点击事件的监听
textView.setOnClickListener(this);
}
}

设置相应的监听事件

@Override
public void onClick(View v) {
// 获取当前的map中的textView的索引值，然后设置viewPager跳转到那个界面上
viewPager.setCurrentItem(tvMap.get(v));
}

@Override
public void onPageScrollStateChanged(int state) {
// 获取当前状态，对于viewPager的状态,并定义到成员
this.state = state;
}

@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// 计算当前的偏移量，用于绘制顶部的红线或者是图片
int sumWidth = 0;
// 循环遍历所有的在该position前的控件，然后计算出当前的位置
for (int i = 0; i < position; i++) {
sumWidth = sumWidth + linearLayout.getChildAt(i).getWidth()
+ marginValue;
}
// 获取线性布局中的child，然后获取这个textView的宽度
View view = linearLayout.getChildAt(position);
int width = view.getWidth();
// 在滑动时将这个宽度赋值给在成员定义的textViewWidth，用于绘制指示线的宽度（这样可以做到文字有多长，指示线就有多长）
textViewWidth = width;
// 计算出当前指示线的起点位置 偏移的比例*（控件自身宽度+控件的marginRight值）+之前计算出的x坐标
currentX = positionOffset * (width + marginValue) + sumWidth;
// 刷新onDraw
postInvalidate();
}

/**
* @param selectTextColor
*            选中的字体颜色
* @param normalTextColor
*            未选中的字体颜色
* @param textSize
*            字体大小
*/
public void setTextViewAttr(int selectedTextColor, int unselectedTextColor,
int textSize) {
this.selectedTextColor = selectedTextColor;
this.unselectedTextColor = unselectedTextColor;
this.textSize = textSize;
}

@SuppressLint("NewApi")
@Override
public void onPageSelected(int position) {
// 当滑动到某一页时，让该索引值下的textView颜色变成选中的颜色
for (int i = 0; i < linearLayout.getChildCount(); i++) {
TextView tv_title = (TextView) linearLayout.getChildAt(i);
if (position == i) {
tv_title.setTextColor(selectedTextColor);
} else {
tv_title.setTextColor(unselectedTextColor);
}
}
}

绘制指示器

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 如果现实indicator显示，就绘制底部的indicator
if (isVisible) {
// 判断要显示的indicator时什么样式，是颜色样式还是图片样式
if (style == STYLE_COLOR) {
// 绘制指示线
canvas.drawLine(currentX, this.getHeight(), currentX
+ textViewWidth, this.getHeight(), paint);
} else if (style == STYLE_DRAWABLE) {
// 设置Bitmap左上右下的位置
RectF dst = new RectF();
// 左侧时当前的位置
dst.left = currentX;
// 右侧是textView宽度+currentX
dst.right = currentX + textViewWidth;
// 底部是HorizontalScrollView的高度
dst.bottom = this.getHeight();
// 设置顶部的坐标
dst.top = this.getHeight() * 4.0f / 5;
// 绘制图片
canvas.drawBitmap(bitmap, null, dst, paint);
}
}
if (currentX >= outMetrice.widthPixels / 2
&& state == ViewPager.SCROLL_STATE_DRAGGING) {
// 设置horizontalScrollView滑动到的位置
this.scrollTo((int) (currentX - outMetrice.widthPixels / 2), 0);
} else if (currentX < outMetrice.widthPixels / 2
&& state == ViewPager.SCROLL_STATE_DRAGGING) {
this.scrollTo(0, 0);
}
}

设置自定义指示器效果

/**
* 设置指示线或者指示图标显示或隐藏，默认显示
*
* @param isVisible
*            true代表显示，false代表隐藏
*/
public void setIndicatorVisible(boolean isVisible) {
this.isVisible = isVisible;
}

/**
* 设置指示器类型
*
* @param VIEWSTYLE_COLOR
*            单纯的设置指示器颜色
* @param STYLE_DRAWABLE
*            可以设置指示器的图标
*/
public void setIndicatorStyle(int style) {
this.style = style;
}

/**
* 设置指示线的颜色
*
* @param indicatorColor
*/
public void setIndicatorColor(int indicatorColor) {
paint.setColor(indicatorColor);
}

/**
* 设置指示线的宽度
*
* @param indicatorStrokeWidth
*/
public void setIndicatorStrokeWidth(int indicatorStrokeWidth) {
paint.setStrokeWidth(indicatorStrokeWidth);
}

/**
* 如果indicator展示样式为自定义的图片，需要设置图片，否则不需要设置
*
* @param drawableResource
*            图片资源
*/
public void setIndicatorResource(int drawableResource) {
try {
bitmap = BitmapFactory.decodeResource(getResources(),
drawableResource);
if (bitmap == null) {
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.error_tip_btn_pressed);
}
} catch (Exception e) {
Log.i(TAG, "请设置正确图片");
e.printStackTrace();
}
}
/**
* @param selectTextColor
*            选中的字体颜色
* @param normalTextColor
*            未选中的字体颜色
* @param textSize
*            字体大小
*/
public void setTextViewAttr(int selectedTextColor, int unselectedTextColor,
int textSize) {
this.selectedTextColor = selectedTextColor;
this.unselectedTextColor = unselectedTextColor;
this.textSize = textSize;
}

Xml中引用该ViewPagerIndicator

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<com.zhiyuan.viewpagerindicator.ViewPagerIndicator
android:id="@+id/chsv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000"
android:scrollbars="none" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

在代码中可以对ViewPagerIndcator进行设置

public class MainActivity extends FragmentActivity {

private ViewPagerIndicator chsv;
private ViewPager viewPager;
String[] titles = new String[] { "AAAAAA", "BBBBBB", "CCCCCC", "DDDDD",
"EEEE", "FFFF", "G", "H", "III", "GGG", "KKKKKK" };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 关联布局,实例化控件
chsv = (ViewPagerIndicator) findViewById(R.id.chsv);

viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new FragmentPagerAdapter(
getSupportFragmentManager()) {

@Override
public int getCount() {
return titles.length;
}

@Override
public Fragment getItem(int position) {
Fragment instance = TitleFragment.getInstance(titles[position]);
return instance;
}

/**
* 设置indicator展示的标题
*/
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
});
// viewPager和viewPagerIndicator相关联
chsv.setViewPager(viewPager);
// 设置TextView属性
chsv.setTextViewAttr(Color.WHITE, Color.BLACK, 30);
// 设置指示器颜色
chsv.setIndicatorColor(Color.GRAY);
// 设置是否显示指示器
chsv.setIndicatorVisible(true);
// 设置指示器是显示自定义图片还是颜色
chsv.setIndicatorStyle(ViewPagerIndicator.STYLE_DRAWABLE);
// 设置指示器显示的图片
chsv.setIndicatorResource(R.drawable.error_tip_btn_pressed);

}

}

自己定义的Fragment展示ViewPager内容

public class TitleFragment extends Fragment {
@SuppressLint("NewApi")
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
Bundle arguments = getArguments();
String string = arguments.getString("title", "");
TextView tv = new TextView(getActivity());
tv.setText(string);
return tv;
}

/**
* 获取Fragment实例对象
*
* @param title
*            当前页面展示的内容
* @return Fragment
*/
public static Fragment getInstance(String title) {
TitleFragment titleFragment = new TitleFragment();
Bundle args = new Bundle();
args.putString("title", title);
titleFragment.setArguments(args);
return titleFragment;
}
}