Android 中 viewpager 滑動(dòng)指示器的實(shí)例代碼
先看下效果圖:
這個(gè)需要用到1個(gè)開(kāi)源的 庫(kù),這個(gè)后面也會(huì)說(shuō)下的。
工程目錄:
1. MainActivity.java
public class MainActivity extends FragmentActivity { private ViewPagerFrameAdapter adapter; //適配器(標(biāo)題和內(nèi)容) private ViewPager mPager; private TabPageIndicator tabbPageIndicator; // private UnderlinePageIndicatorEx underlinePageIndicator; private int COUNT = 0; private List<String> titles = new ArrayList<String>(); //標(biāo)題 @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //標(biāo)題,這里自己造的假數(shù)據(jù) for (int j = 0; j < 3 ; j++){ titles.add( "第"+ j +"標(biāo)簽卡"); } mPager = (ViewPager)findViewById(R.id.pager); adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles); mPager.setAdapter(adapter); //得到指示器 tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator); tabbPageIndicator.setViewPager(mPager); //下標(biāo) underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator); underlinePageIndicator.setViewPager(mPager); underlinePageIndicator.setFades(false); //設(shè)置指示器 tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator); } //adapter 沒(méi)啥好說(shuō)的 跟前面的一樣 private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{ private List<String> title; //頁(yè)面標(biāo)題頭部數(shù)據(jù) public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) { super(fm); this.title = title; } //根據(jù)position 返回 fragment @Override public Fragment getItem(int position) { return ArrayFragment.newInstance(position); } //size @Override public int getCount() { return title.size(); } //頂部的title @Override public CharSequence getPageTitle(int position) { if (titles != null){ return titles.get(position).toString(); } return super.getPageTitle(position); } } }
UnderlinePageIndicatorEx.java
//繼承這個(gè)然后重寫(xiě) public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{ public UnderlinePageIndicatorEx(Context context) { super(context, null); } public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) { super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle); } public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } //自身的 ViewPage傳遞過(guò)去 @Override public void setViewPager(ViewPager viewPager) { if (mViewPager == viewPager){ return; } // if (mViewPager != null) { // mViewPager.setOnPageChangeListener(null); // } if (viewPager.getAdapter() == null) { throw new IllegalStateException(" pager 沒(méi)有 加入 adapter"); } mViewPager = viewPager; // mViewPager.setOnPageChangeListener(this); invalidate(); post(new Runnable(){ @Override public void run() { if (mFades) { post(mFadeRunnable); } } }); } }
ArrayFragment.java
public class ArrayFragment extends Fragment{ private int position; public ArrayFragment(int position){ this.position = position; } // 返回 viwePager 下面滑動(dòng)的頁(yè)面 public static ArrayFragment newInstance(int position){ return new ArrayFragment(position); } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public void onDestroy() { super.onDestroy(); } // 根據(jù)position 返回不同的view @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.layoutaa, null); return view; } }
好了接下來(lái)是 布局xml了。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- 標(biāo)題 和 標(biāo)題下面的 指示器 --> <LinearLayout android:layout_width="fill_parent" android:layout_height="35dp" android:orientation="vertical" android:background="@drawable/main_header_background"> <com.viewpagerindicator.TabPageIndicator android:id="@+id/tab_indicator" android:layout_height="wrap_content" android:layout_width="fill_parent"/> <com.test.linepagerindictor.widget.UnderlinePageIndicatorEx android:id="@+id/underline_indicator" android:layout_height="3dip" android:layout_width="fill_parent" android:layout_alignParentBottom="true"/> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout>
接下來(lái)設(shè)置 滑動(dòng)指示器的style
<!-- 總 style 直接引用 這個(gè) 由 tab style 和 Indicator style 組成 --> <style name="StyledAllIndicators" parent="@android:style/Theme.Light"> <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item> <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item> </style> <!-- tab的 style --> <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator"> <item name="android:background">#00000000</item> <item name="android:textAppearance">@style/CustomTabPageIndicator_text</item> <item name="android:textColor">@color/selector_tab</item> <item name="android:textSize">20sp</item> <!-- 分割線(xiàn),可有可無(wú)的 --> <item name="android:divider">@drawable/custom_tab_indicator_divider</item> <item name="android:dividerPadding">10dip</item> <item name="android:showDividers">middle</item> <item name="android:paddingTop">4dp</item> <item name="android:paddingLeft">8dp</item> <item name="android:paddingBottom">4dp</item> <item name="android:paddingRight">8dp</item> <item name="android:fadingEdge">horizontal</item> <item name="android:fadingEdgeLength">8dp</item> </style> <style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium"> <item name="android:typeface">monospace</item> </style> <!-- 下標(biāo)的指示器的顏色 --> <style name="CustomUnderlinePageIndicator"> <item name="selectedColor">#EB5548</item> <item name="android:background">#00000000</item> <item name="fadeLength">1000</item> <item name="fadeDelay">1000</item> </style>
selector_tab.xml 這個(gè)是 選擇器 在style中引用的,是用來(lái)切換 被選中的背景色的
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="#91D228" /> <item android:state_focused="true" android:color="#91D228" /> <item android:color="#dddddd" /> </selector>
- Android開(kāi)發(fā)實(shí)現(xiàn)的ViewPager引導(dǎo)頁(yè)功能(動(dòng)態(tài)加載指示器)詳解
- Android自定義ViewPagerIndicator實(shí)現(xiàn)炫酷導(dǎo)航欄指示器(ViewPager+Fragment)
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android實(shí)現(xiàn)帶指示器的自動(dòng)輪播式ViewPager
- Android自定義View Flyme6的Viewpager指示器
- Android自定義ViewPager指示器
- Android應(yīng)用中仿今日頭條App制作ViewPager指示器
- Android應(yīng)用中使用ViewPager和ViewPager指示器來(lái)制作Tab標(biāo)簽
- Android ViewPager小圓點(diǎn)指示器
相關(guān)文章
Android檢測(cè)手機(jī)多點(diǎn)觸摸點(diǎn)數(shù)的方法
這篇文章主要為大家詳細(xì)介紹了Android檢測(cè)手機(jī)多點(diǎn)觸摸點(diǎn)數(shù)的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05淺析Android位置權(quán)限以及數(shù)組尋找索引的坑
這篇文章給大家分享了Android位置權(quán)限以及數(shù)組尋找索引的坑的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07Android 開(kāi)發(fā)中根據(jù)搜索內(nèi)容實(shí)現(xiàn)TextView中的文字部分加粗
最近遇到一個(gè)需求,需要做一個(gè)搜索功能。搜索的內(nèi)容需要加粗顯示。實(shí)現(xiàn)方法很簡(jiǎn)單,下面通過(guò)本文給大家分享Android 開(kāi)發(fā)中根據(jù)搜索內(nèi)容實(shí)現(xiàn)TextView中的文字部分加粗樣式,非常不錯(cuò),需要的朋友參考下2017-03-03Ubuntu中為Android系統(tǒng)上實(shí)現(xiàn)內(nèi)置C可執(zhí)行程序測(cè)試Linux內(nèi)核驅(qū)動(dòng)程序
本文主要介紹在Ubuntu上為Android系統(tǒng)內(nèi)置C可執(zhí)行程序測(cè)試Linux內(nèi)核驅(qū)動(dòng)程序,這里對(duì)測(cè)試Linux 內(nèi)核驅(qū)動(dòng)程序做了詳細(xì)介紹,并附有代碼示例,有興趣的小伙伴可以參考下2016-08-08Android的HTTP類(lèi)庫(kù)Volley入門(mén)學(xué)習(xí)教程
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)框架Volley的入門(mén)學(xué)習(xí)教程,Volley適合于輕量級(jí)的通信功能開(kāi)發(fā),善于處理JSON對(duì)象,需要的朋友可以參考下2016-02-02Android Handler中的休眠喚醒實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Android Handler中的休眠喚醒實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01實(shí)例詳解Android 獲取短信會(huì)話(huà)列表
本文通過(guò)實(shí)例詳解android獲取短信會(huì)話(huà)列表的全部?jī)?nèi)容,涉及到android獲取短信列表的相關(guān)知識(shí),對(duì)android會(huì)話(huà)列表相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12詳解android特性之CoordinatorLayout用法探析實(shí)例
本篇文章主要介紹了android特性之CoordinatorLayout用法探析實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02kotlin Standard中的內(nèi)聯(lián)函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于kotlin Standard中內(nèi)聯(lián)函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用kotlin具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08