雖然在android5.0中design中有了TabLayout來實現ViewPager的Indicator，簡單好用。但這個是我自己實現的，學習了很多，記錄在這里。效果圖：
第一步
新建一個類繼承LinearLayout，用來繪制指示器，及提供Viewpager滑動時重繪指示器的方法：
public class ViewPagerIndicator extends LinearLayout{
//畫筆
private Paint mPaint;
//用來畫一條線
private Path mPath;
//繪制線的寬度
private int mLineWidth;
//線的初始位置
private int mInitTranslationX;
//移動位置
private int mTranslationX;
//子控件
private View mChildView;
public ViewPagerIndicator(Context context) {
super(context,null);
}
public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#ffba00"));
mPaint.setStrokeWidth(3);
mPaint.setStyle(Paint.Style.STROKE);
}
//完成布局后獲取子控件
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mChildView = getChildAt(0);
}
//在onSizeChanged中獲取寬和初始位置，并根據位置初始化線
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTranslationX = 0;
mLineWidth = mChildView.getMeasuredWidth();
mInitTranslationX = (w/getChildCount()-mLineWidth)/2;
initLine();
}
//初始化線
private void initLine(){
mPath = new Path();
mPath.moveTo(0,0);
mPath.lineTo(mLineWidth,0);
}
//繪制線
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
//移動到該坐標后開始繪制
canvas.translate(mInitTranslationX + mTranslationX,getHeight());
canvas.drawPath(mPath,mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
////在viewpager的onPageScrolled監聽方法中調用此方法。viewPager滑動時mTranslationX的距離跟著變化，實現線的滑動，position，offset由onPageScrolled傳值
public void scroll(int position ,float offset){
int tabWidth = getWidth()/getChildCount();
mTranslationX =(int) (tabWidth * offset +tabWidth * position);
//請求重繪，調用dispatchDraw方法
invalidate();
}
}
第二步
在布局中使用該類：
layout\orderpicking
<com.hlw.stock.customlayout.ViewPagerIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="@dimen/xhdpi_40"
android:gravity="center"
android:background="@color/white"
android:orientation="horizontal">
<TextView
android:id="@+id/for_picking"
android:layout_width="@dimen/xhdpi_60"
android:layout_height="match_parent"
android:layout_marginRight="@dimen/xhdpi_60"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="待揀貨"
android:textColor="@color/light_black"
android:textSize="@dimen/xhdpi_14" />
<TextView
android:id="@+id/has_been_picking"
android:layout_width="@dimen/xhdpi_60"
android:layout_height="match_parent"
android:layout_marginRight="@dimen/xhdpi_60"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="已揀貨"
android:textColor="@color/light_black"
android:textSize="@dimen/xhdpi_14"
/>
<TextView
android:id="@+id/all"
android:layout_width="@dimen/xhdpi_60"
android:layout_height="match_parent"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="全部"
android:textColor="@color/light_black"
android:textSize="@dimen/xhdpi_14" />
</com.hlw.stock.customlayout.ViewPagerIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/orderpicking_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/white"></android.support.v4.view.ViewPager>
第三步
在activity中完成ViewPagerIndicator與Viewpager的關聯
public class OrderPickingActivity extends FragmentActivity implements View.OnClickListener {
TextView forPicking;
TextView hasBeenPicking;
TextView hasBeenPicking;
ViewPagerIndicator mIndicator;
ViewPager orderPickingDate;
private List<Fragment> mFragmentList;
private FragmentPagerAdapter orderPickingAdapter;
private ViewPager.OnPageChangeListener onPageChangeListener;
//當前選中的indicator
private TextView currentItem;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.orderpicking);
init();
orderPickingDate.setAdapter(orderPickingAdapter);
orderPickingDate.addOnPageChangeListener();
orderPickingDate.setCurrentItem(0);
currentItem = forPicking;
currentItem.setTextColor(Color.parseColor("#ffba00"));
}
private void init(){
forPicking = (TextView) findViewById(R.id.for_picking);
hasBeenPicking = (TextView) findViewById(R.id.has_been_picking);
all = (TextView) findViewById(R.id.all);
mIndicator=(ViewPagerIndicator)findViewById(R.id.indicator);
orderPickingDate = (ViewPager)findViewById(R.id.orderpicking_date);
//初始化viewpager的item，并添加到list中
mFragmentList = new ArrayList<>();
OrderPickingFragmentForPicking orderPickingFragmentForPicking =
new OrderPickingFragmentForPicking();
OrderPickingFragmentHasBeenPicking orderPickingFragmentHasBeenPicking =
new OrderPickingFragmentHasBeenPicking();
OrderPickingFragmentAll orderPickingFragmentAll =
new OrderPickingFragmentAll();
mFragmentList.add(orderPickingFragmentForPicking);
mFragmentList.add(orderPickingFragmentHasBeenPicking);
mFragmentList.add(orderPickingFragmentAll);
//設置viewpager的適配器；
orderPickingAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mFragmentList.size();
}
@Override
public Fragment getItem(int i) {
return mFragmentList.get(i);
}
};
//設置ViewPager監聽事件
onPageChangeListener = new ViewPager.OnPageChangeListener(){
//滑動時，indicator下面的橫線跟著滑動
@Override
public void onPageScrolled(int i, float v, int i1) {
mIndicator.scroll(i, v);
}
//選中監聽，改變indicator文字顏色
@Override
public void onPageSelected(int i) {
switch (i) {
case 0:
if (currentItem == forPicking)
return;
forPicking.setTextColor(Color.parseColor("#ffba00"));
currentItem.setTextColor(Color.parseColor("#646464"));
currentItem = forPicking;
break;
case 1:
if (currentItem == hasBeenPicking)
return;
hasBeenPicking.setTextColor(Color.parseColor("#ffba00"));
currentItem.setTextColor(Color.parseColor("#646464"));
currentItem = hasBeenPicking;
break;
case 2:
if (currentItem == all)
return;
all.setTextColor(Color.parseColor("#ffba00"));
currentItem.setTextColor(Color.parseColor("#646464"));
currentItem = all;
}
}
@Override
public void onPageScrollStateChanged(int i) {}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.for_picking:
orderPickingDate.setCurrentItem(0);
break;
case R.id.has_been_picking:
orderPickingDate.setCurrentItem(1);
break;
case R.id.all:
orderPickingDate.setCurrentItem(2);
break;
default:
break;
}
}
這就完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
