两行代码搞定底部菜单栏的实现

【只需要有任意颜色(除了白色，透明色)的图片即可，点击与滑动为你自动实现】

1.效果图

2.设置属性 (设置的菜单最多只支持5个，选中的颜色与未选中的颜色自定义)

app:image_a="@drawable/buttom_collection" //设置第一张图片app:image_b="@drawable/buttom_notice"      //设置第二张图片

app:image_c="@drawable/buttom_tool"        //设置第三张图片app:image_d="@drawable/buttom_signoff"     //设置第四章图片app:title_a="收藏"                          //设置第一个标题app:title_b="通知"                           //设置第二个标题app:title_c="图表"                          //设置第三个标题app:title_d="签核"    //设置第四个标题app:naturalColor="@color/naturalBaiColor" //设置未选中的颜色app:selectColor="@color/selectLuColor"    //设置选中的颜色

3.布局代码中的使用

<android.support.v4.view.ViewPager    android:id="@+id/viewPager"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1"    />
<com.liuqiang.bm.BottomMenuView    android:id="@+id/bm"    android:background="@color/colorHui"    android:layout_width="match_parent"    android:padding="2dp"    android:layout_height="?attr/actionBarSize"    app:image_a="@drawable/stat_select"    app:image_b="@drawable/note_select"    app:image_c="@drawable/new_select"    app:image_d="@drawable/my_select"    app:title_a="统计"    app:title_b="笔记"    app:title_c="新闻"    app:title_d="我的"    app:naturalColor="@color/naturalLanColor"    app:selectColor="@color/selectLuColor"/>

4.MainActivity中的使用

//找到控件mViewPager = (ViewPager) findViewById(R.id.viewPager);mButtomMenu = (BottomMenuView) findViewById(R.id.bm);//1.设置fragment页面mButtomMenu.addFragments(new ContentFragment("统计"), new ContentFragment("笔记"),        new ContentFragment("新闻"), new ContentFragment("我的"));//2.与ViewPager控件绑定显示mButtomMenu.bindViewPager(getSupportFragmentManager(), mViewPager);

5.源码分享

1）java代码

  
/** * Created by 刘强lq on 2017/10/7. * <p> * 底部菜单栏 --> 最多只支持五个栏 */public class BottomMenuView extends LinearLayout {    //设置的菜单图片    private Bitmap mImageA, mImageB, mImageC, mImageD, mImageE;    //设置的菜单标题    private String mTitleA, mTitleB, mTitleC, mTitleD, mTitleE;    //默认颜色与选择的颜色    private int mNaturalColor, mSelectColor;    private final Context mContext;    //菜单数据的集合    private List<MenuEntry> mMenuEntries = new ArrayList<>();    //菜单视图控件集合    private List<ViewList> mViewLists = new ArrayList<>();    //关联Fragment界面的集合    private List<Fragment> mFragmentList = new ArrayList<>();    //关联的ViewPager控件    private ViewPager mViewPager;    public BottomMenuView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        this.mContext = context;        this.setOrientation(LinearLayout.HORIZONTAL);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BottomMenuView);        for (int i = 0; i < typedArray.getIndexCount(); i++) {            int index = typedArray.getIndex(i);            switch (index) {                case R.styleable.BottomMenuView_image_a:                    mImageA = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();                    break;                case R.styleable.BottomMenuView_image_b:                    mImageB = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();                    break;                case R.styleable.BottomMenuView_image_c:                    mImageC = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();                    break;                case R.styleable.BottomMenuView_image_d:                    mImageD = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();                    break;                case R.styleable.BottomMenuView_image_e:                    mImageE = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();                    break;                case R.styleable.BottomMenuView_title_a:                    mTitleA = typedArray.getString(index);                    break;                case R.styleable.BottomMenuView_title_b:                    mTitleB = typedArray.getString(index);                    break;                case R.styleable.BottomMenuView_title_c:                    mTitleC = typedArray.getString(index);                    break;                case R.styleable.BottomMenuView_title_d:                    mTitleD = typedArray.getString(index);                    break;                case R.styleable.BottomMenuView_title_e:                    mTitleE = typedArray.getString(index);                    break;                case R.styleable.BottomMenuView_naturalColor:                    mNaturalColor = typedArray.getColor(index, Color.WHITE);                    break;                case R.styleable.BottomMenuView_selectColor:                    mSelectColor = typedArray.getColor(index, Color.BLACK);                    break;                default:                    break;            }        }        typedArray.recycle();    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        MenuEntry menuEntryA = new MenuEntry(mImageA, mTitleA);        if (checkMenuEntryNull(menuEntryA)) mMenuEntries.add(menuEntryA);        MenuEntry menuEntryB = new MenuEntry(mImageB, mTitleB);        if (checkMenuEntryNull(menuEntryB)) mMenuEntries.add(menuEntryB);        MenuEntry menuEntryC = new MenuEntry(mImageC, mTitleC);        if (checkMenuEntryNull(menuEntryC)) mMenuEntries.add(menuEntryC);        MenuEntry menuEntryD = new MenuEntry(mImageD, mTitleD);        if (checkMenuEntryNull(menuEntryD)) mMenuEntries.add(menuEntryD);        MenuEntry menuEntryE = new MenuEntry(mImageE, mTitleE);        if (checkMenuEntryNull(menuEntryE)) mMenuEntries.add(menuEntryE);        for (int i = 0; i < mMenuEntries.size(); i++) {            LinearLayout linearLayout = new LinearLayout(mContext);            linearLayout.setOrientation(LinearLayout.VERTICAL);            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1);            params.gravity = Gravity.CENTER;            linearLayout.setLayoutParams(params);            LinearLayout.LayoutParams itemParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1);            ImageView imageView = new ImageView(mContext);            imageView.setImageBitmap(mMenuEntries.get(i).getIcon());            imageView.setLayoutParams(itemParams);            TextView textView = new TextView(mContext);            textView.setText(mMenuEntries.get(i).getTitle());            textView.setGravity(Gravity.CENTER);            textView.setLayoutParams(itemParams);            linearLayout.addView(imageView);            linearLayout.addView(textView);            mViewLists.add(new ViewList(imageView, textView, linearLayout));            this.addView(linearLayout);        }    }    //菜单栏图片与标题的实体类    private final class MenuEntry {        private Bitmap mIcon;        private String mTitle;        MenuEntry(Bitmap icon, String title) {            mIcon = icon;            mTitle = title;        }        Bitmap getIcon() {            return mIcon;        }        String getTitle() {            return mTitle;        }    }    //菜单栏控件的实体类    private final class ViewList {        private ImageView mIcon;        private TextView mTitle;        private LinearLayout mLinearLayout;        ViewList(ImageView icon, TextView title, LinearLayout linearLayout) {            mIcon = icon;            mTitle = title;            mLinearLayout = linearLayout;        }        ImageView getIcon() {            return mIcon;        }        TextView getTitle() {            return mTitle;        }        LinearLayout getLinearLayout() {            return mLinearLayout;        }    }    //检查数据是否为空    private boolean checkMenuEntryNull(MenuEntry menuEntry) {        if (menuEntry.getIcon() == null || menuEntry.getTitle().isEmpty()) return false;        else return true;    }    /**     * 设置碎片     *     * @param fragments Fragment页面的数组     */    public void addFragments(Fragment... fragments) {        for (Fragment fragment : fragments) mFragmentList.add(fragment);    }    /**     * 提取图像透明度的位图位图     *     * @param bitmap 要改变的图片     * @param color  要改变的颜色     * @return 改变之后的图片     */    private Bitmap getAlphaBitmap(Bitmap bitmap, int color) {        Bitmap alterBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(alterBitmap);        Paint paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(color);        Bitmap alphaBitmap = bitmap.extractAlpha();        canvas.drawBitmap(alphaBitmap, new Matrix(), paint);        return alterBitmap;    }    /**     * 与显示viewPager绑定且显示     *     * @param supportFragmentManager getSupportFragmentManager()     * @param viewPager              ViewPager控件     */    public void bindViewPager(FragmentManager supportFragmentManager, final ViewPager viewPager) {        if (mMenuEntries.size() != mFragmentList.size())            throw new ArrayIndexOutOfBoundsException("The Fragment resource you set is not equal to the Title Resource");        if (mFragmentList != null && mFragmentList.size() > 0) {            //设置viewPager的数据            viewPager.setAdapter(new FragmentAdapter(supportFragmentManager, mFragmentList));            // viewPager的监听            viewPager.addOnPageChangeListener(mOnViewPagerListener);            //初始化选择            selectPager(0);            //底部的监听时间            for (int i = 0; i < mViewLists.size(); i++) {                final int finalI = i;                mViewLists.get(i).getLinearLayout().setOnClickListener(new OnClickListener() {                    @Override                    public void onClick(View v) {                        viewPager.setCurrentItem(finalI);                    }                });            }            this.mViewPager = viewPager;        } else {            throw new NullPointerException("The Fragment resource you set up cannot be empty");        }    }    // 菜单栏与ViewPager的绑定监听    private ViewPager.OnPageChangeListener mOnViewPagerListener = new ViewPager.OnPageChangeListener() {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            selectPager(position);        }        @Override        public void onPageScrollStateChanged(int state) {        }    };    /**     * 选中的底部菜单栏     *     * @param position 选择的第几个下标     */    public void selectPager(int position) {        if (mViewPager != null) mViewPager.setCurrentItem(position);        for (int i = 0; i < mViewLists.size(); i++) {            if (i != position) selectPager(i, mNaturalColor);            else selectPager(position, mSelectColor);        }    }    /**     * 选中的底部菜单栏     *     * @param index 选择的下标     * @param color 选择图标及字体的颜色     */    private void selectPager(int index, int color) {        mViewLists.get(index).getTitle().setTextColor(color);        mViewLists.get(index).getIcon().setImageBitmap(getAlphaBitmap(mMenuEntries.get(index).getIcon(), color));    }    //Fragment适配器    private class FragmentAdapter extends FragmentPagerAdapter {        private List<Fragment> mFragment;        FragmentAdapter(FragmentManager fm, List<Fragment> mFragment) {            super(fm);            this.mFragment = mFragment;        }        @Override        public Fragment getItem(int position) {            return mFragment.get(position);        }        @Override        public int getCount() {            return mFragment.size();        }    }}

2)属性

 
<declare-styleable name="BottomMenuView">    <attr name="image_a" format="reference"/>    <attr name="image_b" format="reference"/>    <attr name="image_c" format="reference"/>    <attr name="image_d" format="reference"/>    <attr name="image_e" format="reference"/>    <attr name="title_a" format="string"/>    <attr name="title_b" format="string"/>    <attr name="title_c" format="string"/>    <attr name="title_d" format="string"/>    <attr name="title_e" format="string"/>    <attr name="naturalColor" format="color"/>    <attr name="selectColor" format="color"/></declare-styleable>