您好,登錄后才能下訂單哦!
雖然在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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。