Android五分钟让你集成底部菜单栏(fragment或者fragment+viewpager)

来源：互联网发布：ubuntu win10启动项编辑：程序博客网时间：2024/05/01 14:45

现在市场上大部分的App都有底部菜单栏，每个项目也都需要底部菜单栏的，而现在大部分底部菜单栏都是使用Fragment碎片来实现的，TabHost和TabActivity相比现在用的人非常少了吧！然而我们用fragment的话，使用过的人都应该知道还是有点麻烦的。每次显示fragment时，要显示点击的页卡fragment，要把显示的fragment隐藏，然后还要选中的底部textview变颜色，未选中的textview要变回默认的颜色，还是有点麻烦得。当然我这么说不是说明我们不需要这一步，只是相对来说集成非常简单了。还有fragment+viewpager的实现效果。废话不多说，效果图就不要看了，大家伙都知道的，直接上代码：

布局代码非常简单，把底部菜单的选项写成了一个自定义控件：

<LinearLayout 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"    android:orientation="vertical" >    <FrameLayout        android:id="@+id/fragment_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </FrameLayout>    <View        android:layout_width="match_parent"        android:layout_height="0.5dp"        android:background="@android:color/darker_gray" />    <include layout="@layout/layout_menu_bottom" /></LinearLayout>

layout_menu_bottom：

<com.example.android_xw_menu.view.MainBottomBar xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/bottom_tab_bar"    android:layout_width="match_parent"    android:layout_height="50dp"    android:gravity="center_vertical"    android:orientation="horizontal" >    <TextView        style="@style/main_bar_item"        android:drawableTop="@drawable/menu_item_home"        android:text="微信" />    <TextView        style="@style/main_bar_item"        android:drawableTop="@drawable/menu_item_contacts"        android:text="通讯录" />    <TextView        style="@style/main_bar_item"        android:drawableTop="@drawable/menu_item_find"        android:text="发现" />    <TextView        style="@style/main_bar_item"        android:drawableTop="@drawable/menu_item_setting"        android:text="设置" /></com.example.android_xw_menu.view.MainBottomBar>

我们的textview选中变色和图片选中变色都写成了Selector，这样我们在设置选中时，就直接把TextView.setSelected(true)就行了。

MainBottomBar代码，也是非常简单：

public class MainBottomBar extends LinearLayout implements OnClickListener {    private CallBack mCallBack;    public int prevIndex;    public MainBottomBar(Context context, AttributeSet attrs) {        super(context, attrs);        // TODO Auto-generated constructor stub    }    @Override    protected void onFinishInflate() {        // TODO Auto-generated method stub        super.onFinishInflate();        initAction();    }    /**     * 对每个子控件进行点击事件设置     */    private void initAction() {        for (int i = 0, len = getChildCount(); i < len; i++) {            getChildAt(i).setOnClickListener(this);        }    }    @Override    public void onClick(View v) {        // TODO Auto-generated method stub        View childView = null;        if (!v.isSelected()) {            for (int i = 0, len = getChildCount(); i < len; i++) {                childView = getChildAt(i);                if (v == childView) { // 当前view和点击的view相同时设置为选中，并回调mCallBack。                    childView.setSelected(true);                    if (mCallBack != null) {                        mCallBack.call(prevIndex, i);                    }                    prevIndex = i;                } else {                    childView.setSelected(false);                }            }        }    }    /**     * 给外部调用，设置点击哪个button     *      * @param index     */    public void setSelected(int index) {        if (index < getChildCount()) {            getChildAt(index).performClick(); // 主动出发点击事件            prevIndex = index;        }    }    public void setCallBack(CallBack mCallBack) {        this.mCallBack = mCallBack;    }    /**     * prevIndex：当前fragment下标 currentIndex：要切换到的fragment的下标     *      * @author 巍     *      */    public interface CallBack {        public void call(int prevIndex, int currentIndex);    }}

我们的底部菜单定义控件后，代码就是通用的了，然后通过回调的方式，进行切换fragment。非常方便，不要每个TextView都写一个点击事件，然后去监听，去还原。这样就非常简单，快捷了。

最后MainActivity：

public class FragmentMainActivity extends FragmentActivity {    private MainBottomBar mMainBottomBar;    private FragmentManager mFragmentManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_fragment_main);        initMainButtom();    }    private void initMainButtom() {        mFragmentManager = getSupportFragmentManager();        mMainBottomBar = (MainBottomBar) findViewById(R.id.bottom_tab_bar);        mMainBottomBar.setCallBack(new MainBottomBar.CallBack() {            @Override            public void call(int prevIndex, int currentIndex) {                // TODO Auto-generated method stub                // 获取当前fragment和切换到的fragment                Fragment perFragment = mFragmentManager.findFragmentByTag("tag" + prevIndex);                Fragment currentFragment = mFragmentManager.findFragmentByTag("tag" + currentIndex);                FragmentTransaction ft = mFragmentManager.beginTransaction();                if (perFragment != null) {                    ft.hide(perFragment);                }                if (currentFragment == null) {                    currentFragment = getBottomTabFragment(currentIndex);                    ft.add(R.id.fragment_content, currentFragment, "tag" + currentIndex);                } else {                    ft.show(currentFragment);                }                ft.commitAllowingStateLoss();            }        });        mMainBottomBar.setSelected(0);    }    /**     * 返回bottomTabFragment     *      * @param index     * @return     */    private Fragment getBottomTabFragment(int index) {        Fragment mFragment = null;        switch (index) {        case 0:            mFragment = new HomeFragment();            break;        case 1:            mFragment = new ContactsFragment();            break;        case 2:            mFragment = new FindFragment();            break;        case 3:            mFragment = new SettingFragment();            break;        }        return mFragment;    }}

以上就是fragment底部菜单栏的全部代码，非常简单哦。既然有了fragment的切换，还有一些项目是可以进行滑动切换的，那么我们也引入viewpager+fragment的使用，用法也是非常简单，用到FragmentPagerAdapter这个适配器，同时，集成也也是非常简单和快速的。代码如下：

首先看Adapter：

public class FragmentPagerAdapter extends android.support.v4.app.FragmentPagerAdapter {    private Class<?>[] fragmentClass;    private Bundle[] mBundles;    private int currentIndex;    public FragmentPagerAdapter(FragmentManager fm, Class<?>[] fragmentClass) {        super(fm);        this.fragmentClass = fragmentClass;    }    public FragmentPagerAdapter(FragmentManager fm, Class<?>[] fragmentClass, Bundle[] mBundles) {        super(fm);        this.fragmentClass = fragmentClass;        this.mBundles = mBundles;    }    @Override    public Fragment getItem(int arg0) {        // TODO Auto-generated method stub        try {            Class<?> c = fragmentClass[arg0];            Fragment mFragment = (Fragment) (c.newInstance());            if (mBundles != null && arg0 < mBundles.length) {                mFragment.setArguments(mBundles[arg0]);            }            return mFragment;        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();        }        return null;    }    @Override    public int getCount() {        // TODO Auto-generated method stub        return fragmentClass == null ? 0 : fragmentClass.length;    }    /**     * 保存当前viewpager的下标     *      * @param index     */    public void saveCurrentIndex(int index) {        currentIndex = index;    }    /**     * 读取保存的viewpager的下标     *      * @return     */    public int getSaveCurrentIndex() {        return currentIndex;    }}

Activity：

public class FragmentViewPagerMainActivity extends FragmentActivity {    private MainBottomBar mMainBottomBar;    FragmentPagerAdapter fragmnetpageradapter;    private ViewPager viewPager;// 页卡内容    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_fragment_viewpager_main);        initViewPager();    }    private void initViewPager() {        viewPager = (ViewPager) findViewById(R.id.packpage_vPager);        // new Class<?>[]{}用来传递fragment到adapter里面。        // new Bundle[]{}对应fragment，传递到fragment的数据。        fragmnetpageradapter = new FragmentPagerAdapter(getSupportFragmentManager(), new Class<?>[] { HomeFragment.class, ContactsFragment.class, FindFragment.class, SettingFragment.class, }, new Bundle[] {});        viewPager.setAdapter(fragmnetpageradapter);        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());        viewPager.setCurrentItem(0);        mMainBottomBar = (MainBottomBar) findViewById(R.id.bottom_tab_bar);        mMainBottomBar.setCallBack(new MainBottomBar.CallBack() {            @Override            public void call(int prevIndex, int currentIndex) {                viewPager.setCurrentItem(currentIndex);            }        });        mMainBottomBar.setSelected(0);    }    /**     * 当viewpager切换完成时     *      * @author 巍     *      */    public class MyOnPageChangeListener implements OnPageChangeListener {        public void onPageScrollStateChanged(int position) {        }        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        public void onPageSelected(int arg0) {            mMainBottomBar.setSelected(arg0);        }    }}

布局很简单，就是把FrameLayout换成viewpager就行了。大家伙应该可以看到其实fragment+viewpager的方式比单纯的fragment集成方式还要简单一些。以上就是fragment和fragment+viewpager简单的集成方式的全部内容了，如有错误之处，欢迎大家在下面评论留言，欢迎大神指导...

附上DEMO下载地址

0 0