实现目标：

1、使用ActionBar实现微信头部的布局，包括：搜索和添加，只显示微信名字，不显示图标。难点：取消系统自带的“更多”标记，添加自己的+图片。

2、使用v4包中的ViewPage+fragment实现微信的中间内容部分。

3、底栏随着ViewPage的滑动也会滑动。难点：字体颜色和图片的颜色变化。


注意：由于图片的缺少，本人使用的图片基本上就是系统自带的ic_launcher,可以更换图片取得更好的效果。


首先自定义属性：

1、在resource文件夹的values目录下的strings中编辑如下：


   微信
    Hello world!
    Settings
   
    查找
    添加
    发起群聊
    添加朋友
    扫一扫
    意见反馈
   
    通讯录
    发现
   

2、然后定义目录，在resource/menu目录下自定义main.xml,编辑如下：



       

android:id="@+id/action_search"
        android:icon="@drawable/ic_launcher"
        android:actionViewClass="android.widget.SearchView"
        android:showAsAction="ifRoom|collapseActionView"
         
      android:id="@+id/menu_group_chat"
      android:icon="@drawable/ic_launcher"
      android:title="@string/menu_group_chat"/>
  
  
      android:id="@+id/menu_add_friends"
      android:icon="@drawable/ic_launcher"
      android:title="@string/menu_add_friends"/>
  
  
      android:id="@+id/menu_scans"
      android:icon="@drawable/ic_launcher"
      android:title="@string/menu_scans"/>
  
  
      android:id="@+id/menu_feedback"
      android:icon="@drawable/ic_launcher"
      android:title="@string/menu_feedback"/>



注意：应该有六个目录，分别是搜索、添加、然后是添加的子目录：群聊、添加朋友、扫描、意见反馈。但是在这里不需要“添加”目录。

而在“搜索”目录下则用到了

android:actionViewClass="android.widget.SearchView"
 android:showAsAction="ifRoom|collapseActionView"

这一点需要用到比较新的sdk,本人用的是android-19

3、下一步则是需要把目录添加到布局上，在MainActivity中编辑如下：

在onCreate中实现该方法：

@Override
  public boolean onCreateOptionsMenu(Menu menu) {
   getMenuInflater().inflate(R.menu.main, menu);
   return true;
  }
private void setOverflowButtonAlways() {
   try {
    ViewConfiguration config = ViewConfiguration.get(this);
    Field menuKey = ViewConfiguration.class
      .getDeclaredField("sHasPermanentMenuKey");
    menuKey.setAccessible(true);
    menuKey.setBoolean(config, false);
   } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  }

该步骤是为了把目录添加到actionBar,而为了把“+”替换系统默认的“更多”图标，则需要用到自定义style。

进入AndroidManifest.xml文件，进入到android:theme="@style/AppTheme"，然后在原有的style下自定义一个item，如下所示：

 

而其中的@drawable/article_share_icon_qq便是自己想要显示的图片，代替添加按钮。

此时，目录基本实现，但是“更多”的子目录没有图标显示，这是因为系统自带的就是不显示图片，为了显示，我们需要用到反射！代码如下：

@Override
  public boolean onMenuOpened(int featureId, Menu menu) {
   // TODO Auto-generated method stub
   if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
    if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
     try {
      Method m = menu.getClass().getDeclaredMethod(
        "setOptionalIconsVisible", Boolean.TYPE);
      m.setAccessible(true);
      m.invoke(menu, true);
     } catch (Exception e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
     }
    }
   }
   return super.onMenuOpened(featureId, menu);
  }

在OnCreate中实现：

setOverflowButtonAlways();
 getActionBar().setDisplayShowHomeEnabled(false);

最后一句是为了让actionBar的图片不显示，只显示名字。

4、实现ViewPage+fragment

在MainActivity对应的布局中编辑如下，该处使用V4中的ViewPage：

       

android:id="@+id/id_viewpage"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1">


        

ViewPage相对比较容易，

mViewPager = (ViewPager) findViewById(R.id.id_viewpage);
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(this);

该处为了方便，使用了

private FragmentPagerAdapter mAdapter;

r，所以Activity是继承FragmentActivity,注意是V4的，不要混淆。

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
  @Override
    public int getCount() {   return mTabs.size();
    }  @Override
    public Fragment getItem(int position) {   return mTabs.get(position);
    }
   };


5、自定义底栏

具有颜色变化的特点：

……



资源代码如下：

因为用的是android-19版本开发，所以会自带v7包，大家导入项目的时候注意，一定要导入v7包关联，不然可能会报错。