一.写在前面
什么是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使用,下一节讲解这两个知识点