ActionBar(5) ActionBar+ViewPager+PagerTitleStrip 實作可左右滑動的Tab頁布局

ActionBar除了可以本身定制效果外，還可以利用ActionBar+ViewPager+PagerTitleStrip實作一些好用的效果。

如本次要說的可左右滑動的Tab頁布局。

    可左右滑動的Tab頁布局的好處在于，用單手左右滑動操作即可，而無須去點選切換Tab頁。

 要實作可于

  PagerTitleStrip 用于顯示Tab頁标題 具體可查: http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html

  ViewPager用于裝載View組,使其能左右滑動.

效果如下:

1. XML布局檔案 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

 
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>
    
</LinearLayout>
           

在标簽ViewPager中，要包含PagerTitleStrip标簽，讓其顯示Tab标題。

2. 具體代碼:

工程中 ActionBarActivity 引用自android-support-v7-appcompat擴充包。

 具體引用方法可參考 http://blog.csdn.net/xcltapestry/article/details/13613265 

public class TabBar2Activity  extends ActionBarActivity{

	private ActionBar actionBar;
	private ViewPager mPager;
	private ArrayList<View> mViews = null;
	private ArrayList<String> mTitles= null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabbar2);
        //得到Bar
        actionBar = getSupportActionBar();
        
        //設定标題  ( PagerTitleStrip)
        actionBar.setTitle("ActionBar+ViewPager"); 
        actionBar.setSubtitle("努力！");
        
       //實作使用者點選ActionBar 圖示後傳回前一個activity
        actionBar.setDisplayHomeAsUpEnabled(true) ;
               
        //定義ActionBar模式為NAVIGATION_MODE_TABS
       // actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);    
        
        //每個頁面的Title資料
        mTitles = new ArrayList<String>();
        mTitles.add("PagerTitleStrip_tab1");
        mTitles.add("PagerTitleStrip_tab2");
        
        mPager = (ViewPager)findViewById(R.id.vPager);
        
        //将要分頁顯示的View裝入數組中
        LayoutInflater layFlater = LayoutInflater.from(this);
        View view1 = layFlater.inflate(R.layout.activity_tabbar_page1, null);
	    View view2 = layFlater.inflate(R.layout.activity_tabbar_page2, null);
	    
	    //每個頁面的Title資料
        mViews = new ArrayList<View>();
        mViews.add(view1);
        mViews.add(view2);
        mPager.setAdapter(MyPagerAdapter);
     
        mPager.setCurrentItem(0);
    }
    

    @SuppressLint("NewApi") @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
    	//添加菜單項  
        MenuItem findItem = menu.add(0,1,0,"查找");  
        MenuItem exitItem = menu.add(0,0,0,"退出"); 
        
        //綁定到ActionBar    
        findItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);  
        exitItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);  
        
        return true;
    }

    /**
     * 填充ViewPager的資料擴充卡
     */
    private final PagerAdapter MyPagerAdapter = new PagerAdapter() {
		
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
		
		@Override
		public int getCount() {
			return mViews.size();
		}

		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager)container).removeView(mViews.get(position));
		}

		@Override
		public CharSequence getPageTitle(int position) {
			//重要，用于讓PagerTitleStrip顯示相關标題
			return mTitles.get(position); 
		}

		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager)container).addView(mViews.get(position));
			return mViews.get(position);
		}
	};
	
	/**
     * 菜單事件響應
     */
    public boolean onOptionsItemSelected(MenuItem item) {  
        // TODO Auto-generated method stub  
        switch (item.getItemId()) {         
        case 0:  
        	//displayToast("退出菜單");
        	break;
        case 1:  
        	//displayToast("查找菜單");
        	break;
        case android.R.id.home:  

            Intent intent = new Intent(this, MainActivity.class);  
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP  
                    | Intent.FLAG_ACTIVITY_NEW_TASK);  
            startActivity(intent);  
            Toast.makeText(getApplicationContext(), "android.R.id.home", 0)  
                    .show();  
            break;  
        default:  //action_compose
            break;  
        }  
        return super.onOptionsItemSelected(item);  
    }  
}
           

在實作 PagerAdapter 時，記得要實作

@Override
		public CharSequence getPageTitle(int position) {
			//重要，用于讓PagerTitleStrip顯示相關标題
			return mTitles.get(position); 
		}
           

這樣，PagerTitleStrip才能顯示出ViewPager目前頁的布局。

MAIL：[email protected]

我的CSDN BLOG： http://blog.csdn.net/xcl168