模仿微信6.0的界面效果

实现目标：

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

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

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

 

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

 

首先自定义属性：

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

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

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

http://schemas.android.com/apk/res/android" >

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

 
 
     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;

因为mAdapter的初始化用到了getSupportFragmentManager，所以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包关联，不然可能会报错。

http://download.csdn.net/detail/sll110223/8377063