02.实例篇：微信主页面模仿——ActionBar的应用（上篇）

一.写在前面

什么是ActionBar，ActionBar的作用，ActionBar其实就是页面上方的"工具栏"。在说明理论知识之前，先来看个例子吧，本例子主要是模仿实现微信Android5.2.1的主页面的实现。

二.界面特点分析：

页面上部是一个带标签（Tab）的ActionBar，ActionBar上面左边是Logo，右边是三个ActionView 按钮（依次是SeacherView，自定义的子菜单按钮，最后一个按钮比较特殊，是OverFlow Menu，就是ActionBar没有空间显示的ActionView按钮，都会在这里显示，但是微信界面本身定制了该按钮，实现了不同的MenuItem菜单项的定制效果【请见微信应用】）

三.实现效果如下：

     

     

四.具体怎么实现：主要代码

ps：图片等资源请解压缩微信5.2获取，部分资源，系统里面有，一并复制到drawable-hdpi目录下

1.新一个包com.wlj.example.apidemo.actionbar

2.在该包下新建空的QQWeiXinActivity.java和MyFragment.java，为支持API7以上版本，使用Support库，Activity继承ActionBarActivity

package com.wlj.example.apidemo.actionbar;
import java.util.ArrayList;
import com.wlj.example.apidemo.R;
import com.wlj.example.apidemo.R.layout;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.text.Html;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class QQWeiXinActivity extends ActionBarActivity {
 ViewPager mViewPager;
 TabsAdapter mTabsAdapter;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  mViewPager = new ViewPager(this);
  mViewPager.setId(R.id.pager);  //对于使用FragmentPagerAdapter，当前的ViewPager对象必须有一个合法的id
  setContentView(mViewPager);
   
  final ActionBar bar = this.getSupportActionBar();
  bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  bar.setIcon(R.drawable.actionbar_icon);
  bar.setTitle("微信");
   
  mTabsAdapter = new TabsAdapter(this,bar,this.getSupportFragmentManager(), mViewPager);
 
  Bundle args1 = new Bundle();
  args1.putString("content", "聊天列表");
  mTabsAdapter.addTab(bar.newTab().setText("聊天"), MyFragment.class,
     args1);
 
  Bundle args2 = new Bundle();
  args2.putString("content", "发现列表");
  mTabsAdapter.addTab(bar.newTab().setText("发现"), MyFragment.class,
     args2);
 
  Bundle args3 = new Bundle();
  args3.putString("content", "通讯录列表");
  mTabsAdapter.addTab(bar.newTab().setText("通讯录"), MyFragment.class,
     args3);
 }
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  this.getMenuInflater().inflate(R.menu.action_bar_qq_weixin, menu);  //ActionBar机制实际上利用了选项菜单功能
  return super.onCreateOptionsMenu(menu);
 }
 @Override
 public boolean onPrepareOptionsMenu(Menu menu) {
  return super.onPrepareOptionsMenu(menu);
 }
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  return super.onOptionsItemSelected(item);
 }
 
 public static class TabsAdapter extends FragmentPagerAdapter implements ActionBar.TabListener,
   ViewPager.OnPageChangeListener
 {
  private final Context mContext;
  private final ActionBar mActionBar;
  private final ViewPager mViewPager;
  private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();
  public TabsAdapter(Context context, ActionBar actionbar,FragmentManager fm, ViewPager vp) {
   super(fm);
   mContext = context;
   mActionBar = actionbar;
   mViewPager = vp;
   mViewPager.setAdapter(this);
   mViewPager.setOnPageChangeListener(this);
   
  }
 
  public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args)
  {
   TabInfo info = new TabInfo(clss, args);
   tab.setTag(info);
   tab.setTabListener(this);
   mTabs.add(info);
   mActionBar.addTab(tab);
   this.notifyDataSetChanged();
  }
 
  public static final class TabInfo
  {
   private final Class<?> clss;
   private final Bundle args;
   
   TabInfo(Class<?> _class, Bundle _args)
   {
    clss = _class;
    args = _args;
   }
   
  }
  @Override
  public void onPageScrollStateChanged(int arg0) {
   // TODO Auto-generated method stub
   
  }
  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
   // TODO Auto-generated method stub
   
  }
  @Override
  public void onPageSelected(int position) {
   
   mActionBar.setSelectedNavigationItem(position);
  }
  @Override
  public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
   // TODO Auto-generated method stub
   
  }
  @Override
  public void onTabSelected(Tab tab, FragmentTransaction ft) {
   Object tag = tab.getTag();
   for(int i=0; i<mTabs.size(); i++)
   {
    if(mTabs.get(i) == tag)
     mViewPager.setCurrentItem(i);
   }
   
  }
  @Override
  public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
   // TODO Auto-generated method stub
   
  }
  @Override
  public Fragment getItem(int position) {
   TabInfo info = mTabs.get(position);
   return Fragment.instantiate(mContext, info.clss.getName(), info.args);
  }
  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return mTabs.size();
  }
   
 }
}

MyFragment.java: 这里是个简单的Fragment，Fragment是界面片段，用作Activity的一部分。

package com.wlj.example.apidemo.actionbar;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MyFragment extends Fragment
{
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  if(container == null)
   return null;
  //super.onCreateView(inflater, container, savedInstanceState);
  LinearLayout linearLayout = new LinearLayout(this.getActivity());
  TextView tv = new TextView(this.getActivity());
  tv.setText(this.getArguments().getString("content"));
 
  linearLayout.addView(tv, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  return linearLayout;
  // return super.onCreateView(inflater, container, savedInstanceState);
 }
}

3.在layout目录下新建布局文件activity_qqwei_xin.xml, 该布局文件主要提供一个id：pager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:padding="4dip"
        android:gravity="center_horizontal"
        android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1">
    </android.support.v4.view.ViewPager>
</LinearLayout>

4.在menu目录下，建立ActionBar的菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.wlj.example.apidemo.actionbar.QQWeiXinActivity"
     >
    <item
        android:id="@+id/action_search"
        android:title="search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
   <item
        android:id="@+id/action_add"
        android:title="add"
        android:icon="@drawable/app_panel_add_icon"
        app:showAsAction="always"
       >
        <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="com.wlj.example.apidemo.actionbar.QQWeiXinActivity">
                <item
           android:id="@+id/action_group_chat"
           android:title="发起群组"
           android:icon="@drawable/ic_menu_allfriends"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_add_friend"
           android:title="添加朋友"
           android:icon="@drawable/ic_menu_invite"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_video_chat"
           android:title="视频聊天"
           android:icon="@drawable/app_panel_voice_icon"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_sao_yisao"
           android:title="扫一扫"
           android:icon="@drawable/app_panel_voice_icon"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_camera_share"
           android:title="拍照分享"
           android:icon="@drawable/ic_menu_camera"
           app:showAsAction="ifRoom|withText"
          />
        </menu>
   </item>
      <item
        android:id="@+id/action_my_info"
        android:icon="@drawable/abc_ic_menu_moreoverflow_normal_holo_dark"
        android:title="more"
        app:showAsAction="always"
        >
        <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="com.wlj.example.apidemo.actionbar.QQWeiXinActivity">
                <item
           android:id="@+id/action_my_name"
           android:title="MePlusPlus"
           android:icon="@drawable/ic_launcher"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_my_photo"
           android:title="我的相册"
           android:icon="@drawable/app_panel_pic_icon"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_my_collection"
           android:title="我的收藏"
           android:icon="@drawable/app_panel_fav_icon"
           app:showAsAction="ifRoom|withText"
          />
                <item
           android:id="@+id/action_my_settings"
           android:title="设置"
           android:icon="@drawable/app_panel_setting_icon"
           app:showAsAction="ifRoom|withText"
          />
        </menu>
     </item>
 
</menu>

五、实现过程中的问题以及总结

遇到的一个错误：

05-15 07:08:39.305: E/AndroidRuntime(1440): android.content.res.Resources$NotFoundException: Unable to find resource ID #0xffffffff

此类由于找不到资源Id造成，后查证是因为， When using FragmentPagerAdapter the host ViewPager must have a valid ID set.

也就是说你必须得给ViewPager设置一个有效的Id，该id在布局文件里面，（该布局文件在当前Activity中使用或未使用，都不影响结果）

该实例所用的知识点：ActionBar（多Tab页面布局，使用ViewPager支持手势滑动操作）、ViewPager使用，下一节讲解这两个知识点

转载请附上本页链接：来自优快云博客——MePlusPlus(Me++)的专栏 （http://blog.youkuaiyun.com/meplusplus）

欢迎留言交流。