開源控件ViewPagerIndicator的使用

前幾天學(xué)習(xí)了ViewPager作為引導(dǎo)頁和Tab的使用方法。后來也有根據(jù)不同的使用情況改用Fragment作為Tab的情況，以及ViewPager結(jié)合FragmentPagerAdapter的使用。今天學(xué)習(xí)一種利用開源控件ViewPagerIndicator實(shí)現(xiàn)Tab的方式，也是各種新聞客戶端等APP開發(fā)最常用的。

在此感謝xiaanming老師分享的代碼，以及JakeWharton大神為廣大開發(fā)者提供的開源框架。

1.如何使用開源框架
第1步：improt library項(xiàng)目
第2步：導(dǎo)入library進(jìn)我們自己新建的項(xiàng)目
從Github上Download下來這個(gè)zip包之后，里面會(huì)有一個(gè)library文件，是庫工程，還有一個(gè)sample，是作者提供的例子（將sample這個(gè)項(xiàng)目import，可以看到作者提供的各種樣式的Indicator，作為參考）。如果要在作者例子的基礎(chǔ)上自己開發(fā)樣式，需要將library項(xiàng)目import進(jìn)Eclipse（library是庫工程，我們需要將其作為我們自己項(xiàng)目的依賴庫）。然后創(chuàng)建一個(gè)新項(xiàng)目，新建的項(xiàng)目libs目錄下面有android-support-v4.jar，這個(gè)必須刪除，因?yàn)閂iewPageIndicator里面有這個(gè)庫，我們項(xiàng)目中不允許兩個(gè)android-support-v4.jar，不刪除我們的項(xiàng)目是不能編譯的。右鍵項(xiàng)目—Properties—Android選項(xiàng)卡—Add—選擇library庫工程—OK，導(dǎo)入完畢。

2.MainActivity布局
布局中僅一個(gè)ViewPager，一個(gè)ViewPagerIndicator.（本例使用的是其中一種ViewPagerIndicator：TabPagerIndicator）
注意它應(yīng)該緊鄰在ViewPager的上方或下方，總之要挨在一起。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/base_action_bar_bg" >
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

3.MainActivity代碼
第1步：實(shí)例化ViewPager，給ViewPager設(shè)置Adapter
第2步：實(shí)例化TabPageIndicator，TabPageIndicator與ViewPager綁在一起
第3步：在Indicator上設(shè)置OnPagerChangeListner監(jiān)聽器
第4步：定義Adapter（繼承FragmentPagerAdapter）

先實(shí)例化ViewPager,然后實(shí)例化TabPageIndicator，然后設(shè)置TabPageIndicator和ViewPager關(guān)聯(lián)，就是調(diào)用TabPageIndicator的setViewPager(ViewPager view)方法，這樣子就實(shí)現(xiàn)了點(diǎn)擊上面的Tab，下面的ViewPager切換；滑動(dòng)ViewPager，上面的Tab跟著切換。
ViewPager的每一個(gè)Item我們使用的是Fragment，使用Fragment可以使布局更加靈活一點(diǎn)，建議多用Fragment。
設(shè)置監(jiān)聽的時(shí)候，需要用Indicator提供的OnPagerChangeListener方法

public class MainActivity extends FragmentActivity {  
    /** 
     * Tab標(biāo)題 
     */  
    private static final String[] TITLE = new String[] { "頭條", "房產(chǎn)", "另一面", "女人",  
                                                        "財(cái)經(jīng)", "數(shù)碼", "情感", "科技" };  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
          
        //實(shí)例化ViewPager， 然后給ViewPager設(shè)置Adapter  
        ViewPager pager = (ViewPager)findViewById(R.id.pager);  
        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());  
        pager.setAdapter(adapter);  
  
        //實(shí)例化TabPageIndicator，然后與ViewPager綁在一起（核心步驟）  
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
        indicator.setViewPager(pager);  
          
        //如果要設(shè)置監(jiān)聽ViewPager中包含的Fragment的改變(滑動(dòng)切換頁面)，使用OnPageChangeListener為它指定一個(gè)監(jiān)聽器，那么不能像之前那樣直接設(shè)置在ViewPager上了，而要設(shè)置在Indicator上，
        indicator.setOnPageChangeListener(new OnPageChangeListener() {  
              
            @Override  
            public void onPageSelected(int arg0) {  
                Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();  
            }  
              
            @Override  
            public void onPageScrolled(int arg0, float arg1, int arg2) {  
                  
            }  
              
            @Override  
            public void onPageScrollStateChanged(int arg0) {  
                  
            }  
        });  
          
    }  
      
    /** 
     * 定義ViewPager的適配器 
     */  
    class TabPageIndicatorAdapter extends FragmentPagerAdapter {  
        public TabPageIndicatorAdapter(FragmentManager fm) {  
            super(fm);  
        }  
  
        @Override  
        public Fragment getItem(int position) {  
            //新建一個(gè)Fragment來展示ViewPager item的內(nèi)容，并傳遞參數(shù)  
            Fragment fragment = new ItemFragment();    
            Bundle args = new Bundle();    
            args.putString("arg", TITLE[position]);    
            fragment.setArguments(args);    
              
            return fragment;  
        }  
  
        @Override  
        public CharSequence getPageTitle(int position) {  
            return TITLE[position % TITLE.length];  
        }  
  
        @Override  
        public int getCount() {  
            return TITLE.length;  
        }  
    }  
}

4.定義ViewPager每一個(gè)Item的代碼（每一個(gè)Fragment）
此例只定義了一個(gè)Fragment，R.layout.fragment僅定義了一個(gè)TextView。在這個(gè)Fragment代碼中，通過Bundle傳遞一個(gè)Key-value數(shù)據(jù)，內(nèi)容僅一個(gè)字符串。實(shí)際開發(fā)的時(shí)候，針對(duì)每個(gè)ViewPager的item，要設(shè)計(jì)每個(gè)不同的Fragment的布局、代碼內(nèi)容等。此例代碼只做示范。

public class ItemFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        //動(dòng)態(tài)找到布局文件，再從這個(gè)布局中find出TextView對(duì)象
        View contextView = inflater.inflate(R.layout.fragment_item, container, false);
        TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

        //獲取Activity傳遞過來的參數(shù)
        Bundle mBundle = getArguments();
        String title = mBundle.getString("arg");

        mTextView.setText(title);

        return contextView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }   
}

5.Indicator的樣式修改
第1步：在values/styles中添加<style>:
本例中，添加了3個(gè)<style>，其中"StyledIndicators"是我們需要的<style>，它其中的<item>使用了"CustomTabPageIndicator"這個(gè)<style>，這個(gè)<style>其中的一個(gè)<item>又使用了"CustomTabPageIndicator.Text"這個(gè)<style>。
實(shí)際上可以把"StyledIndicators"<style>的<item>屬性全部寫死在"StyledIndicators"下面。 但這樣層級(jí)分離式的寫法，增強(qiáng)了代碼的復(fù)用性，以便后期維護(hù)和功能代碼增刪操作。

    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</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>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>

第2步：創(chuàng)建<style>中使用到的drawable資源文件：
在drawable目錄下添加tab_indicator.xml 和selector_tabtext.xml。
本例中使用到了自定義的drawable資源，自定義drawable一般配合上面的自定義style使用，提供圖片、顏色等資源來支持自定義樣式：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />     
    <item android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" />
    <item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" />
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#EE2C2C" />
    <item android:state_pressed="true" android:color="#EE2C2C" />
    <item android:state_focused="true" android:color="#EE2C2C" />
    <item android:color="@android:color/black"/>
</selector>

第3步：在Manifest中改用我們自定義的樣式：
本例中直接在application上修改，也可以單獨(dú)修改一個(gè)activity

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/StyledIndicators" >
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容