Android 一步步教你从ActionBar迁移到ToolBar

谷歌的材料设计也发布了有一段时间了，包括官方的support库 相信大家也熟悉了不少，今天就把actionbar 迁移到toolbar的 经验发出来。

这个地方要注意 我用的图标都是studio里的一个插件提供的，我随便选的图标，大家知道意思就行 不要在意图标的意义。。。。。。美术不好 见谅。。

先上一个actionbar的demo，里面基本上包括了actionbar的主要功能点。

比如 菜单，二级菜单，一键返回主界面，action provider，tab，和searchview的结合 等。



主界面的代码：

package com.example.administrator.actionbartest;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.Tab tab1 = getActionBar().newTab().setText("艺术家").setTabListener(new TabListener<AritistFragment>(this, "artist", AritistFragment.class));
ActionBar.Tab tab2 = getActionBar().newTab().setText("专辑名").setTabListener(new TabListener<AlbumFragment>(this, "album", AlbumFragment.class));
ActionBar.Tab tab3 = getActionBar().newTab().setText("公司名").setTabListener(new TabListener<CompanyFragment>(this, "company", CompanyFragment.class));
getActionBar().addTab(tab1);
getActionBar().addTab(tab2);
getActionBar().addTab(tab3);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);

return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
String msg = "";
switch (id) {
case R.id.action_search:
msg = "action_search";
break;
case R.id.action_intent:
msg = "action_intent";
break;
case R.id.action_settings:
msg = "action_settings";
break;
default:
break;

}
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

return super.onOptionsItemSelected(item);
}
}

manifest文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.administrator.actionbartest">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:logo="@drawable/ic_account_circle_red_300_18dp"
android:theme="@android:style/Theme.Holo.Light">
<activity
android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".Main2Activity"
android:label="@string/title_activity_main2"></activity>
<activity
android:name=".Main3Activity"
android:label="@string/title_activity_main3"
android:parentActivityName=".MainActivity">

</activity>
</application>

</manifest>

tablistener

package com.example.administrator.actionbartest;

import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;

/**
* Created by Administrator on 2015/8/14.
*/
public class TabListener<T extends Fragment> implements ActionBar.TabListener {

private Fragment fragment;
private final Activity mActivity;
private final String mTag;
private final Class<T> mClass;

public TabListener(Activity mActivity, String mTag, Class<T> mClass) {
this.mActivity = mActivity;
this.mTag = mTag;
this.mClass = mClass;
}

@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {

if (fragment == null) {
fragment = Fragment.instantiate(mActivity, mClass.getName());
ft.add(android.R.id.content, fragment, mTag);

} else {
ft.attach(fragment);
}

}

@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
if (fragment != null) {
ft.detach(fragment);
}
}

@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

}
}

自定义的actionprovider

package com.example.administrator.actionbartest;

import android.content.Context;
import android.view.ActionProvider;
import android.view.MenuItem;
import android.view.SubMenu;
import android.view.View;
import android.widget.Toast;

/**
* Created by Administrator on 2015/8/14.
*/
public class MyActionProvider extends ActionProvider {

private Context context;

public MyActionProvider(Context context) {
super(context);
this.context = context;

}

@Override
public View onCreateActionView() {
return null;
}

@Override
public boolean hasSubMenu() {
return true;
}

@Override
public void onPrepareSubMenu(SubMenu subMenu) {
subMenu.clear();
subMenu.add("sub item1").setIcon(R.drawable.ic_queue_black_18dp).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(context, "item1", Toast.LENGTH_SHORT).show();

return false;
}
}
);

subMenu.add("sub item2").setIcon(R.drawable.ic_account_circle_red_300_18dp).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(context, "item2", Toast.LENGTH_SHORT).show();

return false;
}
}
);

super.onPrepareSubMenu(subMenu);
}
}

最后是菜单布局

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/ic_queue_black_18dp"
android:showAsAction="ifRoom|collapseActionView"
android:title="search" />
<item
android:id="@+id/action_intent"
android:actionProviderClass="com.example.administrator.actionbartest.MyActionProvider"
android:icon="@drawable/ic_account_circle_red_300_18dp"
android:showAsAction="ifRoom"
android:title="share" />
<item
android:id="@+id/delete"
android:icon="@drawable/ic_picture_in_picture_black_18dp"
android:showAsAction="ifRoom"
android:title="delete" />

<!-- 永远显示在overflow中-->
<item
android:id="@+id/action_settings"
android:showAsAction="never"
android:title="@string/action_settings" />
</menu>

然后我们来看看toolbar 怎么做。以及他们之间的区别。实际上你仔细观察以后就能发现，toolbar 比actionbar 效果更好，尤其是增加了很多动画效果。

此外toolbar 是没有tab的，他需要结合support库里的tablayout来完成原来actionbar里的tab功能。除此之外，你在使用toolbar的时候要先屏蔽掉

actionbar否则会报错。另外就是toolbar实际上放在哪都是可以的，actionbar 则固定在顶端位置。另外就是一些xml文件的参数在写的时候要多注意

前缀。最后就是同样一个类 不要用4.x自带的，要用v4 或者v7的，不然会有很多错。



主界面代码

package com.example.administrator.toolbartest;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;

private TabLayout tabLayout;

private ViewPager viewPager;

private PagerAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) this.findViewById(R.id.toolBar);
tabLayout = (TabLayout) this.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) findViewById(R.id.viewpager);
adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
toolbar.setTitle("ToolBar");

setSupportActionBar(toolbar);
//有些语句得写在setSupportActionBar 之后才有效果

toolbar.setNavigationIcon(R.drawable.ic_account_circle_red_500_18dp);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override
public boolean onMenuItemClick(MenuItem menuItem) {
int id = menuItem.getItemId();
String msg = "";
switch (id) {
case R.id.action_search:
msg = "action_search";
break;
case R.id.action_intent:
msg = "action_intent";
//这个地方要注意使用这种方式增加actionprovider不然会报错
MenuItemCompat.setActionProvider(menuItem, new MyActionProvider(MainActivity.this));
break;
default:
break;

}
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();

return false;
}
});
}

class PagerAdapter extends FragmentStatePagerAdapter {

int numOfTabs;

public PagerAdapter(FragmentManager fm, int numOfTabs) {
super(fm);
this.numOfTabs = numOfTabs;
}

@Override
public Fragment getItem(int position) {

switch (position) {
case 0:
TabFragment1 tab1 = new TabFragment1();
return tab1;
case 1:
TabFragment2 tab2 = new TabFragment2();
return tab2;
case 2:
TabFragment3 tab3 = new TabFragment3();
return tab3;
default:
return null;
}
}

@Override
public int getCount() {
return numOfTabs;
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.

return super.onOptionsItemSelected(item);
}
}

主界面布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/toolBar"
android:background="?attr/colorPrimary"></android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tabLayout" />

</RelativeLayout>

manifest配置文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.administrator.toolbartest" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

用于屏蔽actionbar的style文件

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>

<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Actionbar color -->
<item name="colorPrimary">@color/material_blue_grey_800</item>
<!--Status bar color-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--Window color-->
<item name="android:windowBackground">@color/dim_foreground_material_dark</item>

</style>

</resources>

自定义的actionprovider 其实这个和actionbar的那个相比 只是引用的actionprovider不一样罢了。这个是用的v4包里的

package com.example.administrator.toolbartest;

import android.content.Context;
import android.support.v4.view.ActionProvider;
import android.util.Log;
import android.view.MenuItem;
import android.view.SubMenu;
import android.view.View;
import android.widget.Toast;

/**
* Created by Administrator on 2015/8/14.
*/
public class MyActionProvider extends ActionProvider {

private Context context;

public MyActionProvider(Context context) {
super(context);
this.context = context;

}

@Override
public View onCreateActionView() {
return null;
}

@Override
public boolean hasSubMenu() {
return true;
}

@Override
public void onPrepareSubMenu(SubMenu subMenu) {
Log.v("burning","onPrepareSubMenu");
subMenu.clear();
subMenu.add("sub item1").setIcon(R.drawable.ic_add_shopping_cart_red_500_18dp).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(context, "item1", Toast.LENGTH_SHORT).show();

return false;
}
}
);

subMenu.add("sub item2").setIcon(R.drawable.ic_assignment_ind_red_500_18dp).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(context, "item2", Toast.LENGTH_SHORT).show();

return false;
}
}
);

super.onPrepareSubMenu(subMenu);
}
}

然后看一下 菜单文件

<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=".MainActivity">

<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />

<!-- 注意这个地方searchview的写法和actionbar的不同 如果用actionbar的写法会有很多错误-->
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_redeem_red_500_18dp"
android:title="search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView" />

<item
android:id="@+id/action_intent"
android:actionProviderClass="com.example.administrator.toolbartest.MyActionProvider"
android:icon="@drawable/ic_account_balance_red_500_18dp"
app:showAsAction="ifRoom"
android:title="share" />
<!--
<item
android:id="@+id/delete"
android:icon="@drawable/ic_picture_in_picture_black_18dp"
android:showAsAction="ifRoom"
android:title="delete" />
-->

</menu>

基本上就是这些异同了。注释写的不多，因为比较简单。最后如果你要更改一些自定义效果 一定要多看源码里的style文件

那个里面包含一切，只是谷歌的话很多你会查不到 因为这东西刚出来不久。