Android典型介面設計(4)——使用ActionBar+Fragment實現tab切換，androidactionbar

Android典型介面設計(4)——使用ActionBar+Fragment實現tab切換，androidactionbar

一、問題描述

　　之前我們使用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<FirstFragment>(this, "挖掘機", FirstFragment.class,bundle1));         actionBar.addTab(tab1);                  Bundle bundle2=new Bundle();         bundle2.putString("title", "裝載機區塊資訊");         Tab tab2=actionBar.newTab().setText("裝載機").setTabListener(                  new TabListener<SecondFragment>(this, "裝載機", SecondFragment.class,bundle2));         actionBar.addTab(tab2);                  Bundle bundle3=new Bundle();         bundle3.putString("title", "平地機區塊資訊");         Tab tab3=actionBar.newTab().setText("平地機").setTabListener(                new TabListener<ThirdFragment>(this, "平地機",ThirdFragment.class,bundle3));         actionBar.addTab(tab3);         Bundle bundle4=new Bundle();         bundle4.putString("title", "更多區塊資訊");         Tab tab4=actionBar.newTab().setText("更多").setTabListener(                    new TabListener<FourFragment>(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 TabListener<T extends Fragment> implements android.app.ActionBar.TabListener{    private Fragment mFragment;    private final Activity mActivity;    private final String mTag;    private final Class<T> mClass;    private Bundle bundle;    public TabListener(Activity activity, String tag, Class<T> 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;        }}

　　4、定義ActionBar的樣式

   <style name="MyActionBar" parent="@android:style/Theme.Holo.Light">          <item name="android:actionBarStyle">@style/actionbar_style</item>         <!--  給操作欄中的選項標籤定義樣式資源 -->          <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>          <!-- 給導航選項標籤中的文本定義樣式資源。 -->          <item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyle</item>         </style>         <!-- actionbar樣式 -->      <style name="actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">        <item name="android:background">#EA4609</item>    <item name="android:titleTextStyle">@style/ActionBar_titleStyle</item>    <item name="android:icon">@android:color/transparent</item>     <item name="android:itemPadding">20dip</item>     </style><!-- Tab選項標籤的樣式 -->   <style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">       <item name="android:background">@drawable/tab_selector</item>     <item name="android:paddingLeft">0dp</item>       <item name="android:paddingRight">0dp</item>        <item name="android:height">100dp</item>  </style>         <!-- Tab選項標籤字型的樣式 -->   <style name="MyActionBarTabTextStyle"         parent="@android:style/Widget.Holo.Light.ActionBar.TabText">                  <item name="android:textColor">#666666</item>          <item name="android:textSize">18sp</item>     </style>

在TBActivity上設定樣式android:theme=” @style/MyActionBar

 

　　想要瞭解更多內容的小夥伴，可以點擊查看源碼，親自運行測試。

　　疑問諮詢或技術交流，請加入官方QQ群： （452379712）

 

作者：傑瑞教育
出處：http://www.cnblogs.com/jerehedu/ 
本文著作權歸煙台傑瑞教育科技有限公司和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。