開源控件ViewPagerIndicator的使用

時間 2019-12-05

標籤開源控件 viewpagerindicator 使用简体版

原文原文鏈接

前幾天學習了ViewPager做爲引導頁和Tab的使用方法。後來也有根據不一樣的使用狀況改用Fragment做爲Tab的狀況，以及ViewPager結合FragmentPagerAdapter的使用。今天學習一種利用開源控件ViewPagerIndicator實現Tab的方式，也是各類新聞客戶端等APP開發最經常使用的。css

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

1.如何使用開源框架
第1步：improt library項目
第2步：導入library進咱們本身新建的項目
從Github上Download下來這個zip包以後，裏面會有一個library文件，是庫工程，還有一個sample，是做者提供的例子（將sample這個項目import，能夠看到做者提供的各類樣式的Indicator，做爲參考）。若是要在做者例子的基礎上本身開發樣式，須要將library項目import進Eclipse（library是庫工程，咱們須要將其做爲咱們本身項目的依賴庫）。而後建立一個新項目，新建的項目libs目錄下面有android-support-v4.jar，這個必須刪除，由於ViewPageIndicator裏面有這個庫，咱們項目中不容許兩個android-support-v4.jar，不刪除咱們的項目是不能編譯的。右鍵項目—Properties—Android選項卡—Add—選擇library庫工程—OK，導入完畢。android

2.MainActivity佈局
佈局中僅一個ViewPager，一個ViewPagerIndicator.（本例使用的是其中一種ViewPagerIndicator：TabPagerIndicator）
注意它應該緊鄰在ViewPager的上方或下方，總之要挨在一塊兒。git

<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步：實例化ViewPager，給ViewPager設置Adapter
第2步：實例化TabPageIndicator，TabPageIndicator與ViewPager綁在一塊兒
第3步：在Indicator上設置OnPagerChangeListner監聽器
第4步：定義Adapter（繼承FragmentPagerAdapter）github

先實例化ViewPager,而後實例化TabPageIndicator，而後設置TabPageIndicator和ViewPager關聯，就是調用TabPageIndicator的setViewPager(ViewPager view)方法，這樣子就實現了點擊上面的Tab，下面的ViewPager切換；滑動ViewPager，上面的Tab跟着切換。
ViewPager的每個Item咱們使用的是Fragment，使用Fragment可使佈局更加靈活一點，建議多用Fragment。
設置監聽的時候，須要用Indicator提供的OnPagerChangeListener方法app

public class MainActivity extends FragmentActivity {  
    /** * Tab標題 */  
    private static final String[] TITLE = new String[] { "頭條", "房產", "另外一面", "女人",  
                                                        "財經", "數碼", "情感", "科技" };  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  

        //實例化ViewPager， 而後給ViewPager設置Adapter 
        ViewPager pager = (ViewPager)findViewById(R.id.pager);  
        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());  
        pager.setAdapter(adapter);  

        //實例化TabPageIndicator，而後與ViewPager綁在一塊兒（核心步驟） 
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
        indicator.setViewPager(pager);  

        //若是要設置監聽ViewPager中包含的Fragment的改變(滑動切換頁面)，使用OnPageChangeListener爲它指定一個監聽器，那麼不能像以前那樣直接設置在ViewPager上了，而要設置在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) {  
            //新建一個Fragment來展現ViewPager item的內容，並傳遞參數 
            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每個Item的代碼（每個Fragment）
此例只定義了一個Fragment，R.layout.fragment僅定義了一個TextView。在這個Fragment代碼中，經過Bundle傳遞一個Key-value數據，內容僅一個字符串。實際開發的時候，針對每一個ViewPager的item，要設計每一個不一樣的Fragment的佈局、代碼內容等。此例代碼只作示範。框架

public class ItemFragment extends Fragment {

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

        //動態找到佈局文件，再從這個佈局中find出TextView對象
        View contextView = inflater.inflate(R.layout.fragment_item, container, false);
        TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

        //獲取Activity傳遞過來的參數
        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個<style>，其中"StyledIndicators"是咱們須要的<style>，它其中的<item>使用了"CustomTabPageIndicator"這個<style>，這個<style>其中的一個<item>又使用了"CustomTabPageIndicator.Text"這個<style>。
實際上能夠把"StyledIndicators"<style>的<item>屬性所有寫死在"StyledIndicators"下面。但這樣層級分離式的寫法，加強了代碼的複用性，以便後期維護和功能代碼增刪操做。ide

<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步：建立<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上修改，也能夠單獨修改一個activity學習

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/StyledIndicators" >

文／Hi_陳利健（簡書做者）原文連接：http://www.jianshu.com/p/a2263ee3e7c3# 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。

相關標籤/搜索