自定义ActionBar+fragment实现页面切换



之前我们使用ViewPager+Fragment区域内头部导航，在Android 3.0之后Google增加了新的ActionBar，可方便的实现屏幕Head部区域的 设计如返回键、标题、ICON、Logo、自定义View以及菜单等，并可实现Tab导航，下面我们就使用ActionBar实现下图所示界面设计：

二、案例主要组件

　　1、编写TBActivity

public class TBActivity extends Activity {
    private ActionBar actionBar;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tb);
        initActionBar();
        initTab();
    }
    @SuppressLint("NewApi")
    private void initActionBar(){
        actionBar=super.getActionBar();//获得ActionBar
        actionBar.setDisplayShowHomeEnabled(true);//显示home区域
        actionBar.setDisplayHomeAsUpEnabled(true);//显示返回图片
        actionBar.setHomeAsUpIndicator(R.drawable.back);//设置返回图标
        //去除默认的ICON图标
         Drawable colorDrawable=new
                 ColorDrawable(android.R.color.transparent);
         actionBar.setIcon(colorDrawable);
         //设置自定义View
         actionBar.setDisplayShowCustomEnabled(true);
         actionBar.setCustomView(R.layout.head_logo);
         //设置导航模式为Tabs方式
         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    }
    private void initTab(){
        Bundle bundle1=new Bundle();
        bundle1.putString("title", "挖掘机区块信息");
        Tab tab1= actionBar.newTab().setText("挖掘机").setTabListener(
           new TabListener(this, "挖掘机", FirstFragment.class,bundle1));
         actionBar.addTab(tab1);

         Bundle bundle2=new Bundle();
         bundle2.putString("title", "装载机区块信息");
         Tab tab2=actionBar.newTab().setText("装载机").setTabListener(
                  new TabListener(this, "装载机",
 SecondFragment.class,bundle2));
         actionBar.addTab(tab2);

         Bundle bundle3=new Bundle();
         bundle3.putString("title", "平地机区块信息");
         Tab tab3=actionBar.newTab().setText("平地机").setTabListener(
                new TabListener(this,
"平地机",ThirdFragment.class,bundle3));
         actionBar.addTab(tab3);
         Bundle bundle4=new Bundle();
         bundle4.putString("title", "更多区块信息");
         Tab tab4=actionBar.newTab().setText("更多").setTabListener(
                    new TabListener(this,
"更多", FourFragment.class,bundle4));
         actionBar.addTab(tab4);
    }
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.tb, menu);
        return true;
    }

}

public class TBActivity extends Activity {
    private ActionBar actionBar;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tb);
        initActionBar();
        initTab();
    }
    @SuppressLint("NewApi")
    private void initActionBar(){
        actionBar=super.getActionBar();//获得ActionBar
        actionBar.setDisplayShowHomeEnabled(true);//显示home区域
        actionBar.setDisplayHomeAsUpEnabled(true);//显示返回图片
        actionBar.setHomeAsUpIndicator(R.drawable.back);//设置返回图标
        //去除默认的ICON图标
         Drawable colorDrawable=new 
                 ColorDrawable(android.R.color.transparent);
         actionBar.setIcon(colorDrawable);
         //设置自定义View
         actionBar.setDisplayShowCustomEnabled(true);
         actionBar.setCustomView(R.layout.head_logo);
         //设置导航模式为Tabs方式
         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    }
    private void initTab(){
        Bundle bundle1=new Bundle();
        bundle1.putString("title", "挖掘机区块信息");
        Tab tab1= actionBar.newTab().setText("挖掘机").setTabListener(
           new TabListener(this, "挖掘机", FirstFragment.class,bundle1));
         actionBar.addTab(tab1);
         
         Bundle bundle2=new Bundle();
         bundle2.putString("title", "装载机区块信息");
         Tab tab2=actionBar.newTab().setText("装载机").setTabListener(
                  new TabListener(this, "装载机",
 SecondFragment.class,bundle2));
         actionBar.addTab(tab2);
         
         Bundle bundle3=new Bundle();
         bundle3.putString("title", "平地机区块信息");
         Tab tab3=actionBar.newTab().setText("平地机").setTabListener(
                new TabListener(this, 
"平地机",ThirdFragment.class,bundle3));
         actionBar.addTab(tab3);
         Bundle bundle4=new Bundle();
         bundle4.putString("title", "更多区块信息");
         Tab tab4=actionBar.newTab().setText("更多").setTabListener(
                    new TabListener(this, 
"更多", FourFragment.class,bundle4));
         actionBar.addTab(tab4);            
    }
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.tb, menu);
        return true;
    }

}

　　2、TabListener组件

public class TabListenerextends Fragment>
implements android.app.ActionBar.TabListener{
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class mClass;
    private Bundle bundle;
    public TabListener(Activity activity, String tag, Class clz,Bundle bundle) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
        this.bundle=bundle;
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub
        if(mFragment==null){
            mFragment=Fragment.instantiate(mActivity, mClass.getName());
            mFragment.setArguments(bundle);//向Fragment传递参数
            ft.add(android.R.id.content,mFragment, mTag);
        }else{
            ft.attach(mFragment);
        }
    }
    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if(mFragment!=null){
            ft.detach(mFragment);
        }
    }
    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {

    }

}

public class TabListener 
implements android.app.ActionBar.TabListener{
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class mClass;
    private Bundle bundle;
    public TabListener(Activity activity, String tag, Class clz,Bundle bundle) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
        this.bundle=bundle;
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub
        if(mFragment==null){
            mFragment=Fragment.instantiate(mActivity, mClass.getName());
            mFragment.setArguments(bundle);//向Fragment传递参数
            ft.add(android.R.id.content,mFragment, mTag);
        }else{
            ft.attach(mFragment);
        }    
    }
    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if(mFragment!=null){
            ft.detach(mFragment);
        }
    }
    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {

    }

}

　　3、设计四个tab区域的Fragment

　　分别为：（FirstFragment、SecondFragment、ThirdFragment、FourFragment），这里以FirstFragment为例（其他在这里无差别）

public class FirstFragment extends Fragment {
    private String title;
     @Override
    public void setArguments(Bundle bundle) {
        // TODO Auto-generated method stub
        title=bundle.getString("title");
    }

    @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setText(title);
            textView.setTextSize(20);
            textView.setTextColor(Color.RED);
            textView.setGravity(Gravity.CENTER);
            LinearLayout layout = new LinearLayout(getActivity());
            LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            layout.addView(textView, params);
            return layout;
        }
}

public class FirstFragment extends Fragment {
    private String title;
     @Override
    public void setArguments(Bundle bundle) {
        // TODO Auto-generated method stub
        title=bundle.getString("title");
    }

    @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            TextView textView = new TextView(getActivity());
            textView.setText(title);
            textView.setTextSize(20);
            textView.setTextColor(Color.RED);
            textView.setGravity(Gravity.CENTER);
            LinearLayout layout = new LinearLayout(getActivity());
            LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            layout.addView(textView, params);
            return layout;
        }
}

　　4、定义ActionBar的样式

   <style name="MyActionBar" parent="@android:style/Theme.Holo.Light">
          <item name="android:actionBarStyle">@style/actionbar_styleitem>

          <item name="android:actionBarTabStyle">@style/MyActionBarTabStyleitem>

          <item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyleitem>
    style>


    <style name="actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#EA4609item>
    <item name="android:titleTextStyle">@style/ActionBar_titleStyleitem>
    <item name="android:icon">@android:color/transparentitem>
    <item name="android:itemPadding">20dipitem>
    style>

 <style name="MyActionBarTabStyle"
parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
     <item name="android:background">@drawable/tab_selectoritem>
     <item name="android:paddingLeft">0dpitem>
     <item name="android:paddingRight">0dpitem>
        <item name="android:height">100dpitem>
  style>

 <style name="MyActionBarTabTextStyle"
        parent="@android:style/Widget.Holo.Light.ActionBar.TabText">
        <item name="android:textColor">#666666item>
        <item name="android:textSize">18spitem>
style>

在TBActivity上设置样式android:theme=” @style/MyActionBar