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

最新推荐文章于 2022-11-07 18:11:35 发布

名字要长一点

最新推荐文章于 2022-11-07 18:11:35 发布

阅读量1.3k

点赞数

分类专栏： android 文章标签： android viewpager textview tabhost

本文链接：https://blog.csdn.net/lanfei1027/article/details/48195167

版权

android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

现在市场上大部分的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
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
Android五分钟让你集成底部菜单栏(fragment或者fragment+viewpager)

现在市场上大部分的App都有底部菜单栏，每个项目也都需要底部菜单栏的，而现在大部分底部菜单栏都是使用Fragment碎片来实现的，TabHost和TabActivity相比现在用的人非常少了吧！然而我们用fragment的话，使用过的人都应该知道还是有点麻烦的。每次显示fragment时，要显示点击的页卡fragment，要把显示的fragment隐藏，然后还要选中的底部textview变颜色，未选
复制链接

扫一扫

专栏目录