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，主要代码：

@Overridepublic 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;}@Overridepublic 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，大功告成，来看运行效果吧。

至此，一个简易版的微信界面就算完成了。

源码下载链接：TestActionBarCompat.zip

如发现文字失误或程序Bug，欢迎留言反馈，万分感谢！！！

作者 小蚂蚁
于 2014 年 03月 26日
上海