Android 開源架構ViewPageIndicator或ActionBarSherlock實作tab滑動分頁效果

參考自：http://blog.csdn.net/xiaanming/article/details/9971721

http://blog.csdn.net/xiaanming/article/details/10766053

部落客說的很清楚了，總結幾個問題

一，共同的問題

1，項目都需要導入對應的類庫，由于類庫中包含android-support-v4.jar，是以項目中一定要删除android-support-v4.jar，否則沖突報錯。

打開檢視添加library界面，會發現你添加的library的路徑出現D:/work/...?類似的情況，但是别的工程使用的時候又不會出錯。

二，對于使用ActionBarSherlock類庫項目的問題

1，在android4.1上面怎麼設定style沒效果，這個庫是在android2.X上面使用ActionBar，android3.0以後就是使用Andriod自帶的ActionBar了，是以在android3.0以上使用的style為android自帶的style，是以我們要在引用的時候加上android:。

還有必須在values，values-v11，values-v14都如此設定style，并且style樣式改成背景白色"@style/Theme.Sherlock.Light"，才是想要的結果。

兩個測試機器，對于去除自帶的tab藍色下劃線<item name="android:actionBarDivider">@null</item>，一個機器起作用，另外一個不行。

2，在切換橫豎螢幕的時候，會由tab效果切換成spinner效果，viewpage效果不變，不太清楚是怎麼造成的。

關于ActionBarSherlock類庫的項目

1，首頁面布局，隻有一個viewpager，每個頁面fragment加到List，加載到adapter給viewpager

<RelativeLayout 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:background="@android:color/white">
    
    <android.support.v4.view.ViewPager    
        android:id="@+id/viewPager"    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content" />   

</RelativeLayout>

2，首頁面

其實主要涉及的就是在ViewPager監聽方法setOnPageChangeListener中的兩個設定

點選Tab的時候切換不同的Fragment界面 mViewPager.setCurrentItem(tab.getPosition());

滑動ViewPager的時候設定相對應的Tab被選中mActionBar.setSelectedNavigationItem(arg0);

package com.example.viewpagerandtabdemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockFragmentActivity;

public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener, OnPageChangeListener{
	/**
	 * 頂部Tab的title
	 */
	private String [] mTabTitles;
	
	/**
	 * ViewPager對象的引用
	 */
	private ViewPager mViewPager;
	
	/**
	 * 裝載Fragment的容器，我們的每一個界面都是一個Fragment
	 */
	private List<Fragment> mFragmentList;
	
	/**
	 * ActionBar對象的引用
	 */
	private ActionBar mActionBar;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//從資源檔案在擷取Tab的title
		mTabTitles = getResources().getStringArray(R.array.tab_title);
		mFragmentList =  new ArrayList<Fragment>();
		
		mViewPager = (ViewPager) findViewById(R.id.viewPager);
		//設定Adapter
		mViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(), mFragmentList));
		//設定監聽
		mViewPager.setOnPageChangeListener(this);
		
		
		//擷取Action執行個體我們使用getSupportActionBar()方法
		mActionBar = getSupportActionBar();
		
		//隐藏Title
		mActionBar.setDisplayShowTitleEnabled(false);
		//隐藏Home logo
		mActionBar.setDisplayShowHomeEnabled(false);
		//設定ActionBar的導航模式為Tab
		mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		
		
		//為ActionBar添加Tab并設定TabListener
		for(int i=0; i<mTabTitles.length; i++){
			 ActionBar.Tab tab = mActionBar.newTab();
			 tab.setText(mTabTitles[i]);
			 tab.setTabListener(this);
			 mActionBar.addTab(tab, i);
		}
		
		
		//将Fragment加入到List中，并将Tab的title傳遞給Fragment
		for(int i=0; i<mTabTitles.length; i++){
			Fragment fragment = new ItemFragment();
			Bundle args = new Bundle();
			args.putString("arg", mTabTitles[i]);
			fragment.setArguments(args);
			
			mFragmentList.add(fragment);
		}
		
	}
	
	

	@Override
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
		//點選ActionBar Tab的時候切換不同的Fragment界面
		mViewPager.setCurrentItem(tab.getPosition());
	}

	@Override
	public void onTabUnselected(Tab tab, FragmentTransaction ft) {

	}

	@Override
	public void onTabReselected(Tab tab, FragmentTransaction ft) {
		
	}
	
	
	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		
	}

	@Override
	public void onPageSelected(int arg0) {
		//滑動ViewPager的時候設定相對應的ActionBar Tab被選中
		mActionBar.setSelectedNavigationItem(arg0);
	}


}

3，style

注意，文本不居中，在tabview裡加上對旗下元素居中就好了<item name="android:gravity">center</item>

<resources xmlns:android="http://schemas.android.com/apk/res/android">

   

       <style name="Themes.ActionBarTab" parent="@style/Theme.Sherlock.Light">

        <!-- 去除ActionBar的Divider -->
        <item name="actionBarDivider">@null</item> 
		<item name="android:actionBarDivider">@null</item>
        
        <!-- 設定ActionBar Tab的高度 -->
        <item name="actionBarSize">45dip</item>
		<item name="android:actionBarSize">45dip</item>
        
        <!-- 設定ActionBar Tab字型的樣式 -->
        <item name="actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
		<item name="android:actionBarTabTextStyle">@style/Widget.Sherlock.ActionBar.TabText</item>
        
        <!-- 設定ActionBar Tab的樣式,例如下面的紅色指引，Tab之間的間隙等等 -->
        <item name="actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
		<item name="android:actionBarTabStyle">@style/Widget.Sherlock.ActionBar.TabView</item>
        
        <!-- 設定ActionBar的樣式，這裡簡單的設定了ActionBar的背景 -->
        <item name="actionBarStyle">@style/Widget.Slider.ActionBar</item>
		<item name="android:actionBarStyle">@style/Widget.Slider.ActionBar</item>
    </style>
    
    
     <style name="Widget.Slider.ActionBar" parent="@style/Widget.Sherlock.ActionBar">  
        <item name="backgroundStacked">@drawable/base_action_bar_bg</item>
		<item name="android:backgroundStacked">@drawable/base_action_bar_bg</item>
    </style>

    <style name="Widget.Sherlock.ActionBar.TabText" parent="android:Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@drawable/selector_tabtext</item>
        <item name="android:textSize">15sp</item>
        
    </style>

    <style name="Widget.Sherlock.ActionBar.TabView" parent="Widget">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:paddingLeft">8dip</item>
        <item name="android:paddingRight">8dip</item>
        <item name="android:gravity">center</item>
        
    </style> 
   
    
</resources>

關于ViewPageIndicator類庫的項目

此類庫的demo囊括了幾乎所有viewpager會用到的效果，專業

1，首頁面布局

除了viewpager，多了一個TabPageIndicator，在頁面類中需要把兩個關聯下就可以了

<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:background="@drawable/base_action_bar_bg"
        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>

2，首頁面

注意這裡的setOnPageChangeListener綁定的是TabPageIndicator，而TabPageIndicator和viewpager需要關聯好就行了

注意這裡不需要ActionBarSherlock類庫的項目中的兩處tab和viewpager的關聯設定了，類庫寫好了應該，友善

package com.example.viewpageindicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;

import com.viewpagerindicator.TabPageIndicator;

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的adapter
		FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(adapter);

        //執行個體化TabPageIndicator然後設定ViewPager與之關聯
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);
        
        //如果我們要對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擴充卡
	 * @author len
	 *
	 */
    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;
        }
    }

}

3，style

注意這裡隻在values中添加style就行，values-v11，values-v14不需要就能實作效果

<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>

總結：肯定選擇ViewPageIndicator了

github位址 ActionBarSherlock https://github.com/JakeWharton/ActionBarSherlock

ViewPagerIndicator https://github.com/JakeWharton/ViewPagerIndicator

demo位址 ActionBarSherlock http://download.csdn.net/detail/superjunjin/8580595

ViewPagerIndicator http://download.csdn.net/detail/superjunjin/8580609

Android 開源架構ViewPageIndicator或ActionBarSherlock實作tab滑動分頁效果

繼續閱讀

在ListView中修改EditText的值

android點選空白區域隐藏軟鍵盤

Android_ViewStub

adb 由于目标計算機積極拒絕，無法連接配接。 (10061)adb 由于目标計算機積極拒絕，無法連接配接。 (10061)

Android 判斷軟鍵盤的狀态（顯示，隐藏）

Android Dialog 設定圓角無效

Android，三級清單實作

android 中攔截home鍵

五幅圖學會Android Canvas的坐标系變換(rotate translate scale)

ImageLoader加載圓形圖檔

android AbsListView之ListView使用(2)-BaseAdapter

使用RadioButton需要注意的幾個地方

Android FrameLayout的:layout_marginTop屬性失效的問題

Android中設定字型不随系統字型大小而變化

Android使用ViewPager+Fragment的使用（一）

Android 複習筆記之圖解Activity的4種加載模式