【Android UI設(shè)計(jì)與開發(fā)】5.底部菜單欄（二）使用Fragment實(shí)現(xiàn)底部菜單欄既然 Fragment 取代了TabActivity，當(dāng)然 TabActivity 的能實(shí)現(xiàn)的菜單欄，F(xiàn)ragment 當(dāng)然也能實(shí)現(xiàn)。主要其實(shí)就是通過菜單欄的點(diǎn)擊事件切換 Fragment 的顯示和隱藏。 來看看栗子吧： 1.效果圖來了：
2.代碼具體實(shí)現(xiàn) 2.1 自定義底部菜單欄實(shí)現(xiàn)方式 (1)對(duì)應(yīng)的 Fragment 編輯代碼和布局實(shí)現(xiàn)在前面的 Fragment介紹和簡(jiǎn)單實(shí)現(xiàn) 中已經(jīng)有提及，代碼中沒復(fù)雜的地方，此處略過，具體可看實(shí)例代碼。 (2)菜單欄實(shí)現(xiàn)，這里使用代碼實(shí)現(xiàn)的，其實(shí)也可以用布局文件實(shí)現(xiàn)，代碼如下： 
ViewIndicator(3)最后就是主界面代碼，切換 Fragment 的顯示和隱藏以及菜單欄的選中狀態(tài)  package com.yanis.yc_ui_fragment_menu; import com.yanis.yc_ui_fragment_menu.ViewIndicator.OnIndicateListener; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.view.View; public class MainActivity extends FragmentActivity { public static Fragment[] mFragments; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setFragmentIndicator(0); } /** * 初始化fragment */ private void setFragmentIndicator(int whichIsDefault) { //實(shí)例化 Fragment 集合 mFragments = new Fragment[5]; mFragments[0] = getSupportFragmentManager().findFragmentById(R.id.fragment_home); mFragments[1] = getSupportFragmentManager().findFragmentById(R.id.fragment_category); mFragments[2] = getSupportFragmentManager().findFragmentById(R.id.fragment_down); mFragments[3] = getSupportFragmentManager().findFragmentById(R.id.fragment_user); mFragments[4] = getSupportFragmentManager().findFragmentById(R.id.fragment_setting); //顯示默認(rèn)的Fragment getSupportFragmentManager().beginTransaction().hide(mFragments[0]) .hide(mFragments[1]).hide(mFragments[2]).hide(mFragments[3]).hide(mFragments[4]).show(mFragments[whichIsDefault]).commit(); //綁定自定義的菜單欄組件 ViewIndicator mIndicator = (ViewIndicator) findViewById(R.id.indicator); ViewIndicator.setIndicator(whichIsDefault); mIndicator.setOnIndicateListener(new OnIndicateListener() { @Override public void onIndicate(View v, int which) { //顯示指定的Fragment getSupportFragmentManager().beginTransaction() .hide(mFragments[0]).hide(mFragments[1]) .hide(mFragments[2]).hide(mFragments[3]).hide(mFragments[4]).show(mFragments[which]).commit(); } }); } }
源代碼地址：https://github.com/YeXiaoChao/Yc_ui_fragment_menu
2.2 使用 Fragment+FragmentTabHost 來實(shí)現(xiàn)底部菜單欄方式 效果是一樣的，只是在上面的基礎(chǔ)上使用 FragmentTabHost 來實(shí)現(xiàn)底部菜單欄，直接通過 FragmentTabHost 來切換 Fragment 的顯示 ，而不是自定義的布局。 （1）修改主布局代碼，加入了FragmentTabHost 組件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas./apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <FrameLayout android:id="@+id/realtabcontent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" /> <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/main_tab_item_bg"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" /> </android.support.v4.app.FragmentTabHost> </LinearLayout> （2）單獨(dú)為Tab按鈕選項(xiàng)布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas./apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusable="false" android:padding="3dp" android:src="@drawable/main_tab_item_home"> </ImageView> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="12sp" android:textColor="#ffffff"> </TextView> </LinearLayout> (3) fragment布局界面和之前一樣，就不再贅述 (4) Tab選項(xiàng)的自定義按鈕中圖片資源文件，列出其中一個(gè)按鈕，指定了按鈕的選中狀態(tài)和不選中狀態(tài)不同的圖片顯示 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas./apk/res/android"> <item android:drawable="@drawable/main_tab_item_home_focus" android:state_selected="true"/> <item android:drawable="@drawable/main_tab_item_home_normal"/> </selector> (5) Tab選項(xiàng)按鈕背景資源文件，指定了點(diǎn)擊的效果  <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas./apk/res/android"> <!-- pressed --> <item android:drawable="@drawable/main_tab_item_bg_focus" android:state_enabled="true" android:state_pressed="true"/> <!-- focused --> <item android:drawable="@drawable/main_tab_item_bg_focus" android:state_enabled="true" android:state_focused="true"/> <!-- normal --> <item android:drawable="@drawable/main_tab_item_bg_normal" android:state_enabled="true"/> </selector> （6） 最后就是主界面代碼的改變 package com.yanis.yc_ui_fragment_tabhost; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TabHost.TabSpec; import android.widget.TextView; /** * * @author yechao * @功能說明 自定義TabHost * */ public class MainActivity extends FragmentActivity { // 定義FragmentTabHost對(duì)象 private FragmentTabHost mTabHost; // 定義一個(gè)布局 private LayoutInflater layoutInflater; // 定義數(shù)組來存放Fragment界面 private Class fragmentArray[] = { FragmentHome.class, FragmentCategory.class, FragmentDown.class, FragmentUser.class, FragmentSetting.class }; // 定義數(shù)組來存放按鈕圖片 private int mImageViewArray[] = { R.drawable.main_tab_item_home, R.drawable.main_tab_item_category, R.drawable.main_tab_item_down, R.drawable.main_tab_item_user, R.drawable.main_tab_item_setting }; // Tab選項(xiàng)卡的文字 private String mTextviewArray[] = { "主頁", "分類", "下載", "我的", "設(shè)置" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } /** * 初始化組件 */ private void initView() { // 實(shí)例化布局對(duì)象 layoutInflater = LayoutInflater.from(this); // 實(shí)例化TabHost對(duì)象，得到TabHost mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost); mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent); // 得到fragment的個(gè)數(shù) int count = fragmentArray.length; for (int i = 0; i < count; i++) { // 為每一個(gè)Tab按鈕設(shè)置圖標(biāo)、文字和內(nèi)容 TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]) .setIndicator(getTabItemView(i)); // 將Tab按鈕添加進(jìn)Tab選項(xiàng)卡中 mTabHost.addTab(tabSpec, fragmentArray[i], null); // 設(shè)置Tab按鈕的背景 mTabHost.getTabWidget().getChildAt(i) .setBackgroundResource(R.drawable.main_tab_item_bg); } } /** * 給Tab按鈕設(shè)置圖標(biāo)和文字 */ private View getTabItemView(int index) { View view = layoutInflater.inflate(R.layout.tab_item_view, null); ImageView imageView = (ImageView) view.findViewById(R.id.imageview); imageView.setImageResource(mImageViewArray[index]); TextView textView = (TextView) view.findViewById(R.id.textview); textView.setText(mTextviewArray[index]); return view; } }
分類: 【Android 開發(fā)】
標(biāo)簽: Android UI設(shè)計(jì)與開發(fā)
|
|
|
