虽然在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; }}
这就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。
新闻热点
疑难解答