ActionBarCompat+ViewPager搭建微信架構(二)

上一篇文章我們已經學會了如何使用ActionCompat，這篇文章中我們開始正式模仿。

首先我們從官網下載一個APK檔案，解壓縮後找到我們需要的資源檔放到我們的項目相應目錄中。

標題列

先看下的標題列

從左至右依次是：

灰色表徵圖，標題，搜尋，添加，更多

修改Style（styles.xml）

    <style name="AppBaseTheme" parent="Theme.Example">    </style>

Theme.Exapmle為我們在Android Action Bar Style Generator中產生的樣式，可以在values目錄下的styles_example.xml查看詳細。

灰色表徵圖只需修改manifest檔案

     <activity            android:name="com.conn.estactionbar.MainActivity"            android:icon="@drawable/actionbar_icon"            android:label="@string/app_name"             android:uiOptions="none"            >

其中actionbar_icon是從apk解壓縮後得到的。

搜尋、添加功能表項目配置如下

    <menu xmlns:android="http://schemas.android.com/apk/res/android"          xmlns:test="http://schemas.android.com/apk/res-auto" >    <item        android:id="@+id/search"        android:icon="@drawable/abc_ic_search"        android:title="搜尋"        test:showAsAction="ifRoom"/>    <item        android:id="@+id/add"        android:icon="@drawable/app_panel_add_icon"        android:title="添加"        test:showAsAction="ifRoom"/>    </menu>

如果配置較多功能表項目，在3.0之後的系統中會顯示更多（中垂直方向的...圖片），showAsAction設為ifRoom的item會隱藏，點擊圖片或menu鍵會顯示。在3.0之前的系統中不會顯示更多，按menu鍵才會彈出（求高人指點，怎麼實現更多功能的相容性）。

運行一下，看看效果：

導覽列

1、先建立3個簡單的Fragment（ChatFragment、DiscoverFragment、ContactFragment），分別代表聊天、發現、通訊錄

2、然後修改activity_main.xml檔案，添加如下代碼：

    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />

3、設定ActionBar的導航模式

        viewPager = (ViewPager) this.findViewById(R.id.pager);        actionbar = getSupportActionBar();        actionbar.setDisplayShowTitleEnabled(true);        actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

4、建立ActionBar.TabListener對象，監聽Tab變化，建立Tab。

       ActionBar.TabListener tabListener = new TabListener() {            @Override            public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {                // TODO Auto-generated method stub            }            @Override            public void onTabSelected(Tab arg0, FragmentTransaction arg1) {                viewPager.setCurrentItem(arg0.getPosition());            }            @Override            public void onTabReselected(Tab arg0, FragmentTransaction arg1) {                // TODO Auto-generated method stub            }        };        Resources res = getResources();        Tab tab = actionbar.newTab().setText(res.getString(R.string.chat)).setTabListener(tabListener);        actionbar.addTab(tab);        tab = actionbar.newTab().setText(res.getString(R.string.discover)).setTabListener(tabListener);        actionbar.addTab(tab);        tab = actionbar.newTab().setText(res.getString(R.string.contact)).setTabListener(tabListener);        actionbar.addTab(tab);

5、建立ViewPager適配器 TabsPagerAdapter，主要代碼：

      @Override    public Fragment getItem(int arg0) {        switch (arg0) {        case 0:             DiscoverFragment fragment1 = new DiscoverFragment();             return fragment1;        case 1:             ChatFragment fragment2 = new ChatFragment();             return fragment2;        case 2:            ContactFragment fragment3 = new ContactFragment();            return fragment3;        default:            break;        }        return null;    }    @Override    public int getCount() {        return 3;    }

6、最後將ViewPager和ActionBar關聯起來

         FragmentManager fm = getSupportFragmentManager();        ViewPager.SimpleOnPageChangeListener pageChangeListener = new ViewPager.SimpleOnPageChangeListener(){            @Override            public void onPageSelected(int position) {                super.onPageSelected(position);                actionbar.setSelectedNavigationItem(position);            }        };        viewPager.setOnPageChangeListener(pageChangeListener);        TabsPagerAdapter pagerAdapter = new TabsPagerAdapter(fm);        viewPager.setAdapter(pagerAdapter);        viewPager.setCurrentItem(1);//預設選中發現Tab

OK，大功告成，來看運行效果吧。

至此，一個簡易版的介面就算完成了。

首發地址：ActionBarCompat+ViewPager搭建架構

源碼下載：TestActionBarCompat.zip

如發現文字失誤或程式Bug，歡迎留言反饋，萬分感謝！！！

作者 小螞蟻
於 2014 年 03月 26日
上海