[Android]AndroidDesign中ActionBar探究2

標籤：android   des   style   class   code   java   

上一節我們只是簡單了介紹了Android Design風格中的ActionBar的簡單實用，如添加MenuItem，這節我們會進一步瞭解ActionBar的其他功能。

在Android Develop的文檔（http://developer.android.com/training/implementing-navigation/index.html）詳細地介紹了Navigation的實用（我們為了更好的理解就不把這個翻譯為中文）：

通過tabs來建立可以滑動的視圖

常見的我們可以通過v4包中的ViewPager來建立可以左右滑動的視圖，Viewpager可以通過FragmentStatePagerAdapte來填充Viewpager，它的每一項Item都是一個Fragment這樣就顯得很靈活。

那我們就通過一個簡單的ViewPager來做一個執行個體。

先通過ViewPager來設一個Layout：

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

再建立一個FragmentStatePagerAdapter對象來設定ViewPager內容：

public class CollectionDemoActivity extends FragmentActivity {    // When requested, this adapter returns a DemoObjectFragment,    // representing an object in the collection.    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;    ViewPager mViewPager;    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_collection_demo);        // ViewPager and its adapters use support library        // fragments, so use getSupportFragmentManager.        mDemoCollectionPagerAdapter =                new DemoCollectionPagerAdapter(                        getSupportFragmentManager());        mViewPager = (ViewPager) findViewById(R.id.pager);        mViewPager.setAdapter(mDemoCollectionPagerAdapter);    }}// Since this is an object collection, use a FragmentStatePagerAdapter,// and NOT a FragmentPagerAdapter.public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {    public DemoCollectionPagerAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int i) {        Fragment fragment = new DemoObjectFragment();        Bundle args = new Bundle();        // Our object is just an integer :-P        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);        fragment.setArguments(args);        return fragment;    }    @Override    public int getCount() {        return 100;    }    @Override    public CharSequence getPageTitle(int position) {        return "OBJECT " + (position + 1);    }}// Instances of this class are fragments representing a single// object in our collection.public static class DemoObjectFragment extends Fragment {    public static final String ARG_OBJECT = "object";    @Override    public View onCreateView(LayoutInflater inflater,            ViewGroup container, Bundle savedInstanceState) {        // The last two arguments ensure LayoutParams are inflated        // properly.        View rootView = inflater.inflate(                R.layout.fragment_collection_object, container, false);        Bundle args = getArguments();        ((TextView) rootView.findViewById(android.R.id.text1)).setText(                Integer.toString(args.getInt(ARG_OBJECT)));        return rootView;    }}

 

這樣ViewPager中的每一項都可以通過FragmentStateViewPagerAdapter來設定，是不是覺得生活又回複了美好，Fragment是一個靈活的、縮減版的Activity，我們可以很自由輕鬆而快樂的開發。

對了這節不是講ActionBar跟這個ViewPager有關係麼，不知道你用用戶端是不是發現首頁也是採用ActionBar的，其中聊天、發現、通訊錄這三項就是一個Tabs組，那麼Tab就是我們接下來要將的重點.

添加Tabs到ActionBar

為了能告訴Activity我們使用了Tabs，我們需要在Activity中為ActionBar設定NAVIGATION_MODE_TABS屬性:

 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

我們可以通過ViewPager的滑動事件來讓頂部的Tabs根據ViewPager的變化而變化，同理我們也可以通過點擊Tabs來這是ViewPager。

對於Tabs可以通過TabListener來監聽Tabs點擊位置變化：

@Overridepublic void onCreate(Bundle savedInstanceState) {    final ActionBar actionBar = getActionBar();    ...    // Specify that tabs should be displayed in the action bar.    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);    // Create a tab listener that is called when the user changes tabs.    ActionBar.TabListener tabListener = new ActionBar.TabListener() {        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {            // show the given tab        }        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {            // hide the given tab        }        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {            // probably ignore this event        }    };    // Add 3 tabs, specifying the tab‘s text and TabListener    for (int i = 0; i < 3; i++) {        actionBar.addTab(                actionBar.newTab()                        .setText("Tab " + (i + 1))                        .setTabListener(tabListener));    }}

當我們可以通過Tabs是的位置讓ViewPager的位置也發生變化：

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {            // When the tab is selected, switch to the            // corresponding page in the ViewPager.            mViewPager.setCurrentItem(tab.getPosition());        }

ViewPager可以滑動，當滑動到ViewPager的哪一項時，Tabs的選中項也要變化：

 

 

@Overridepublic void onCreate(Bundle savedInstanceState) {    ...    mViewPager = (ViewPager) findViewById(R.id.pager);    mViewPager.setOnPageChangeListener(            new ViewPager.SimpleOnPageChangeListener() {                @Override                public void onPageSelected(int position) {                    // When swiping between pages, select the                    // corresponding tab.                    getActionBar().setSelectedNavigationItem(position);                }            });    ...}

 

這個Tabs可能不能達到的那個左右滑動過程中，Tabs選中的變化，我們也可以使用新的V4包中Tabs的替代者那就是PagerTitleStrip，這個以前也是個開源項目，Android後來也把這個放到了V4支援包中。

這個很像Tabs，不過在ViewPager在滑動過程中，Tabs的Tile下面的選中項是有滑動過程，而不是Tabs那樣只有一個結果

<android.support.v4.view.ViewPager    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/pager"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.PagerTitleStrip        android:id="@+id/pager_title_strip"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="top"        android:background="#33b5e5"        android:textColor="#fff"        android:paddingTop="4dp"        android:paddingBottom="4dp" /></android.support.v4.view.ViewPager>

。