Android開源框架ViewPagerIndicator的基本使用
阿新 • • 發佈：2019-02-03
轉載本部落格請註明出處：點選開啟連結 http://blog.csdn.net/qq_32059827/article/details/52495647
很多新聞資訊類的app都有一些共性，那就是有一行頁籤，然後點選頁籤的內容後，會跳轉到對應的頁面。有很多此類app都是用到了ViewPagerIndicator這個開源框架。此篇部落格就對這個框架的使用做一個筆記。後續隨著在開發中不同的額使用場景，也會增加此部落格的內容。
今天就先對他的使用方式，做一個介紹，完成一個小demo
首先，寫一個佈局。這個佈局很簡單，如果使用到，直接複製再根據實際需求稍作修改即可：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:layout_height="wrap_content" android:layout_width="fill_parent" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
接著就是主活動中的程式碼了：
package com.itydl.demo; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.viewpagerindicator.TabPageIndicator; public class MainActivity extends Activity { //定義一串資料來源。這裡是定義死的，當然大部分都是來源於網路解析的資料 private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres","Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //固定使用佈局 setContentView(R.layout.activity_main); //獲取例項 ViewPager pager = (ViewPager)findViewById(R.id.pager); //設定viewpage的介面卡 MyAdapter adapter = new MyAdapter(); pager.setAdapter(adapter); //把viewpage和TabPageIndicator關聯 TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator); indicator.setViewPager(pager); } private class MyAdapter extends PagerAdapter{ @Override public int getCount() { // TODO Auto-generated method stub return CONTENT.length;//告訴viewpage，我有多少條資料，要載入 } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1;//官方推薦寫法 } /** * 頁籤顯示資料的方法 */ @Override public CharSequence getPageTitle(int position) { return CONTENT[position]; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { //先使每頁page上顯示text文字 // 本page要展示的內容。替換掉Fragmenlayout那張白紙。 改變子類自己的介面資料與樣式。暫時先用textview代表整塊view TextView textView = new TextView(MainActivity.this); textView.setText(CONTENT[position]);//為每一頁載入的page設定顯示的內容 textView.setTextSize(25); textView.setGravity(Gravity.CENTER); textView.setTextColor(Color.GREEN); //別忘記把view新增到page裡面 container.addView(textView); return textView; } } }
可以看到，也是so easy嘛。可以直接執行啦，看一下效果圖：
我們發現，的確奇醜無比。接下來就讓他靚起來！那就要去配置一下樣式了——
去開源框架提供的demo類中的配置檔案，找到如下程式碼：
<activity android:name=".SampleTabsDefault" android:label="Tabs/Default" android:theme="@style/Theme.PageIndicatorDefaults"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" /> </intent-filter> </activity>
發現，它有一個樣式 android:theme="@style/Theme.PageIndicatorDefaults"
那就把這個樣式，複製到自己的activity的配置檔案中來。好了，咱就使用系統自帶的樣式吧，執行看一看結果：
(*@ο@*) 哇～感覺好絢麗了！！什麼？還是不滿足？想定義自己喜歡的樣式？沒問題——
接下來就修改成自己喜歡的樣式：
對自帶的樣式做修改：
style中：
<style name="Theme.PageIndicatorDefaults" parent="android:Theme">
<item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
</style>
<style name="Widget">
</style>
<style name="Widget.TabPageIndicator" parent="Widget">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/vpi__tab_indicator</item>
<item name="android:paddingLeft">22dip</item>
<item name="android:paddingRight">22dip</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/vpi__dark_theme</item>
<item name="android:maxLines">1</item>
</style>
<style name="TextAppearance.TabPageIndicator" parent="Widget">
<item name="android:textStyle">bold</item>
<!-- <item name="android:textColor">@color/vpi__dark_theme</item> -->
</style><selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
</selector>color裡面的vpi__dark_theme
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#000000"/>
<item android:state_window_focused="false" android:color="#000000"/>
<item android:state_pressed="true" android:color="#ff0000"/>
<item android:state_selected="true" android:color="#ff0000"/>
<!-- item android:state_activated="true" android:color="@color/vpi__bright_foreground_holo_dark"/ -->
<item android:color="#000000"/> <!-- not selected -->
</selector>再執行一下：
這樣看起來，就比較清爽了。如果想定義自己的樣式，繼續摸索改進就好了。