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使用，下一节讲解这两个知识点

转载请附上本页链接：来自CSDN博客——MePlusPlus(Me++)的专栏 （http://blog.csdn.net/meplusplus）

欢迎留言交流。