模仿微信6.0的界面效果

来源：互联网发布：ios看书软件免费编辑：程序博客网时间：2024/04/29 12:56

实现目标：

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

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

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

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

首先自定义属性：

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

    微信
    Helloworld!
   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 {
   ViewConfigurationconfig = ViewConfiguration.get(this);
   Field menuKey= ViewConfiguration.class
     .getDeclaredField("sHasPermanentMenuKey");
   menuKey.setAccessible(true);
   menuKey.setBoolean(config,false);
  } catch (Exception e) {
   // TODOAuto-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, Menumenu) {
  // TODO Auto-generated methodstub
  if (featureId ==Window.FEATURE_ACTION_BAR && menu != null) {
   if(menu.getClass().getSimpleName().equals("MenuBuilder")) {
    try{
     Methodm = menu.getClass().getDeclaredMethod(
       "setOptionalIconsVisible",Boolean.TYPE);
     m.setAccessible(true);
     m.invoke(menu,true);
    }catch (Exception e) {
     //TODO Auto-generated catch block
     e.printStackTrace();
    }
   }
  }
  returnsuper.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 intgetCount() {

returnmTabs.size();
}

@Override
publicFragment getItem(int position) {

    returnmTabs.get(position);
   }
  };

5、自定义底栏

具有颜色变化的特点：

……

资源代码如下：

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

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

0 0