android實(shí)現(xiàn)ViewPager的Indicator的實(shí)例代碼
雖然在android5.0中design中有了TabLayout來實(shí)現(xiàn)ViewPager的Indicator,簡單好用。但這個(gè)是我自己實(shí)現(xiàn)的,學(xué)習(xí)了很多,記錄在這里。效果圖:
第一步
新建一個(gè)類繼承LinearLayout,用來繪制指示器,及提供Viewpager滑動(dòng)時(shí)重繪指示器的方法:
public class ViewPagerIndicator extends LinearLayout{ //畫筆 private Paint mPaint; //用來畫一條線 private Path mPath; //繪制線的寬度 private int mLineWidth; //線的初始位置 private int mInitTranslationX; //移動(dòng)位置 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中獲取寬和初始位置,并根據(jù)位置初始化線 @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(); //移動(dòng)到該坐標(biāo)后開始繪制 canvas.translate(mInitTranslationX + mTranslationX,getHeight()); canvas.drawPath(mPath,mPaint); canvas.restore(); super.dispatchDraw(canvas); } ////在viewpager的onPageScrolled監(jiān)聽方法中調(diào)用此方法。viewPager滑動(dòng)時(shí)mTranslationX的距離跟著變化,實(shí)現(xiàn)線的滑動(dòng),position,offset由onPageScrolled傳值 public void scroll(int position ,float offset){ int tabWidth = getWidth()/getChildCount(); mTranslationX =(int) (tabWidth * offset +tabWidth * position); //請求重繪,調(diào)用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的關(guān)聯(lián)
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; //當(dāng)前選中的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); //設(shè)置viewpager的適配器; orderPickingAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mFragmentList.size(); } @Override public Fragment getItem(int i) { return mFragmentList.get(i); } }; //設(shè)置ViewPager監(jiān)聽事件 onPageChangeListener = new ViewPager.OnPageChangeListener(){ //滑動(dòng)時(shí),indicator下面的橫線跟著滑動(dòng) @Override public void onPageScrolled(int i, float v, int i1) { mIndicator.scroll(i, v); } //選中監(jiān)聽,改變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; } }
這就完成了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)Tab布局的4種方式(Fragment+TabPageIndicator+ViewPager)
- 教你制作Android中炫酷的ViewPagerIndicator(不僅仿MIUI)
- Android 利用ViewPager+GridView實(shí)現(xiàn)首頁導(dǎo)航欄布局分頁效果
- Android 中 TabHost與ViewPager結(jié)合實(shí)現(xiàn)首頁導(dǎo)航效果
- Android 開發(fā)之BottomBar+ViewPager+Fragment實(shí)現(xiàn)炫酷的底部導(dǎo)航效果
- Android ViewPager制作新手導(dǎo)航頁(動(dòng)態(tài)加載)
- iOS中UIActivityIndicatorView的用法及齒輪等待動(dòng)畫實(shí)例
- Android改變ExpandableListView的indicator圖標(biāo)實(shí)現(xiàn)方法
- 基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果
- Android動(dòng)態(tài)給ViewPager添加Indicator導(dǎo)航
相關(guān)文章
Android使用動(dòng)畫設(shè)置ProgressBar進(jìn)度的方法
這篇文章主要為大家詳細(xì)介紹了Android使用動(dòng)畫設(shè)置ProgressBar進(jìn)度的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Android 定時(shí)器實(shí)現(xiàn)圖片的變換
這篇文章主要介紹了Android 定時(shí)器實(shí)現(xiàn)圖片的變換的相關(guān)資料,利用到定時(shí)器和handler,message的結(jié)合實(shí)現(xiàn)改功能,需要的朋友可以參考下2017-08-08Android中的指紋識別demo開發(fā)實(shí)例
這篇文章主要介紹了Android中的指紋識別demo開發(fā)實(shí)例的相關(guān)知識,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09Android中利用matrix 控制圖片的旋轉(zhuǎn)、縮放、移動(dòng)
本篇文章是對Android中利用matrix 控制圖片的旋轉(zhuǎn)、縮放、移動(dòng)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06android實(shí)現(xiàn)視頻的加密和解密(使用AES)
本篇文章主要介紹了android實(shí)現(xiàn)視頻的加密和解密(使用AES),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Android和IOS的瀏覽器中檢測是否安裝某個(gè)客戶端的方法
這篇文章主要介紹了Android和IOS的瀏覽器中檢測是否安裝某個(gè)客戶端的方法,需要的朋友可以參考下2014-06-06解決Android SearchView不顯示搜索icon的問題
這篇文章主要介紹了解決Android SearchView不顯示搜索icon問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05Android實(shí)現(xiàn)萬能自定義陰影控件實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Android實(shí)現(xiàn)萬能自定義陰影控件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08