模仿微信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