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

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

1.效果图

 

2.布局代码中的使用

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lq.custombuttommenu.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <com.lq.custombuttommenu.view.ButtomMenu
        android:id="@+id/bm"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:background="@color/colorHui"
        app:imageScale="2dp"
        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/naturalLanColor"
        app:selectColor="@color/selectLuColor"
        app:titleSize="10sp"/>

</LinearLayout>

3.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);

4.源码分享

1）java代码

 

public class ButtomMenu extends LinearLayout {

    /**
     * 设置图片与标题资源
     */
    private Bitmap mFirstBitmap;
    private Bitmap mSecondBitmap;
    private Bitmap mThirdBitmap;
    private Bitmap mFourthBitmap;
    private Bitmap mFifthBitmap;
    private String mFirstTitle;
    private String mSecondTitle;
    private String mThirdTitle;
    private String mFourthTitle;
    private String mFifthTitle;
    //文本大小
    private int mTextSize;

    /**
     * 存放item集合
     */
    private List<LinearLayout> mVpItem;

    /**
     * 存放ImageView集合
     */
    private List<ImageView> mImageViews;

    /**
     * 存放TextView集合
     */
    private List<TextView> mTvItem;

    /**
     * 存放itme中文本内容的集合
     */
    private List<String> mTextContents;

    /**
     * 存放图片的集合
     */
    private List<Bitmap> mBitmaps;

    /**
     * 存放Fragment的集合
     */
    private List<Fragment> mFragmentList;

    /**
     * 文本最原始的颜色
     */
    private int mNaturalColor;

    /**
     * 文本选中后的颜色
     */
    private int mSelectColor;

    /**
     * 图片的缩放
     */
    private int mImageScale;

    private ViewPager mViewPager;

    private Context mContext;

    public ButtomMenu(Context context) {
        this(context, null);
    }

    public ButtomMenu(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ButtomMenu(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.setOrientation(LinearLayout.HORIZONTAL);
        this.mContext = context;
        mVpItem = new ArrayList<>();
        mImageViews = new ArrayList<>();
        mTextContents = new ArrayList<>();
        mBitmaps = new ArrayList<>();
        mTvItem = new ArrayList<>();
        mFragmentList = new ArrayList<>();

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ButtomMenu);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int index = typedArray.getIndex(i);
            switch (index) {
                case R.styleable.ButtomMenu_image_a:
                    mFirstBitmap = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();
                    break;
                case R.styleable.ButtomMenu_image_b:
                    mSecondBitmap = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();
                    break;
                case R.styleable.ButtomMenu_image_c:
                    mThirdBitmap = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();
                    break;
                case R.styleable.ButtomMenu_image_d:
                    mFourthBitmap = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();
                    break;
                case R.styleable.ButtomMenu_image_e:
                    mFifthBitmap = ((BitmapDrawable) typedArray.getDrawable(index)).getBitmap();
                    break;
                case R.styleable.ButtomMenu_title_a:
                    mFirstTitle = typedArray.getString(index);
                    break;
                case R.styleable.ButtomMenu_title_b:
                    mSecondTitle = typedArray.getString(index);
                    break;
                case R.styleable.ButtomMenu_title_c:
                    mThirdTitle = typedArray.getString(index);
                    break;
                case R.styleable.ButtomMenu_title_d:
                    mFourthTitle = typedArray.getString(index);
                    break;
                case R.styleable.ButtomMenu_title_e:
                    mFifthTitle = typedArray.getString(index);
                    break;
                case R.styleable.ButtomMenu_titleSize:
                    mTextSize = typedArray.getDimensionPixelSize(index, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                            16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.ButtomMenu_naturalColor:
                    mNaturalColor = typedArray.getColor(index, Color.WHITE);
                    break;
                case R.styleable.ButtomMenu_selectColor:
                    mSelectColor = typedArray.getColor(index, Color.BLACK);
                    break;
                case R.styleable.ButtomMenu_imageScale:
                    mImageScale = typedArray.getDimensionPixelSize(index, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                            16, getResources().getDisplayMetrics()));
                    break;
                default:
                    break;
            }
        }
        typedArray.recycle();
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (mFirstBitmap != null)
            mBitmaps.add(mFirstBitmap);
        if (mSecondBitmap != null)
            mBitmaps.add(mSecondBitmap);
        if (mThirdBitmap != null)
            mBitmaps.add(mThirdBitmap);
        if (mFourthBitmap != null)
            mBitmaps.add(mFourthBitmap);
        if (mFifthBitmap != null)
            mBitmaps.add(mFifthBitmap);
        if (!TextUtils.isEmpty(mFirstTitle))
            mTextContents.add(mFirstTitle);
        if (!TextUtils.isEmpty(mSecondTitle))
            mTextContents.add(mSecondTitle);
        if (!TextUtils.isEmpty(mThirdTitle))
            mTextContents.add(mThirdTitle);
        if (!TextUtils.isEmpty(mFourthTitle))
            mTextContents.add(mFourthTitle);
        if (!TextUtils.isEmpty(mFifthTitle))
            mTextContents.add(mFifthTitle);
        if (mBitmaps.size() != mTextContents.size())
            throw new ArrayIndexOutOfBoundsException("The picture resource you set is not equal to the Title Resource");
        if (mBitmaps != null && mBitmaps.size() > 0) {
            for (int i = 0; i < mBitmaps.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(mBitmaps.get(i));
                imageView.setPadding(mImageScale, mImageScale, mImageScale, mImageScale);
                imageView.setLayoutParams(itemParams);
                TextView textView = new TextView(mContext);
                textView.setText(mTextContents.get(i));
                if (mTextSize != 0 && mTextSize > 14) {
                    textView.setTextSize(mTextSize);
                }
                textView.setGravity(Gravity.CENTER);
                textView.setLayoutParams(itemParams);
                mTvItem.add(textView);
                mImageViews.add(imageView);
                linearLayout.addView(imageView);
                linearLayout.addView(textView);
                mVpItem.add(linearLayout);
                this.addView(linearLayout);
            }
        } else {
            throw new NullPointerException("The picture resources and title resources that are set cannot be empty");
        }
    }

    /**
     * 设置碎片
     *
     * @param fragments Fragment页面的list集合
     */
    public void addFragments(Fragment... fragments) {
        for (int i = 0; i < fragments.length; i++) {
            mFragmentList.add(fragments[i]);
        }
    }

    /**
     * 提取图像透明度的位图位图
     *
     * @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
     * @param viewPager              ViewPager控件
     */
    public void bindViewPager(FragmentManager supportFragmentManager, final ViewPager viewPager) {
        if (mVpItem.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 < mVpItem.size(); i++) {
                final int finalI = i;
                mVpItem.get(i).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 < mVpItem.size(); i++) {
            if (i != position) {
                mTvItem.get(i).setTextColor(mNaturalColor);
                mImageViews.get(i).setImageBitmap(getAlphaBitmap(mBitmaps.get(i), mNaturalColor));
            }else {
                mTvItem.get(position).setTextColor(mSelectColor);
                mImageViews.get(position).setImageBitmap(getAlphaBitmap(mBitmaps.get(position), mSelectColor));
            }
        }
    }

    /**
     * Fragment适配器
     */
    private class FragmentAdapter extends FragmentPagerAdapter {

        private List<?> mFragment;

        public FragmentAdapter(FragmentManager fm, List<?> mFragment) {
            super(fm);
            this.mFragment = mFragment;
        }

        @Override
        public Fragment getItem(int position) {
            return (Fragment) mFragment.get(position);
        }

        @Override
        public int getCount() {
            return mFragment.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }
    }

}

 

2)属性

<declare-styleable name="ButtomMenu">

    <!--设置图片1-5张-->
    <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="titleSize" format="dimension"/>
    <!--设置Item默认颜色-->
    <attr name="naturalColor" format="color"/>
    <!--设置Item选中颜色-->
    <attr name="selectColor" format="color"/>
    <!--设置图片缩放多少sp-->
    <attr name="imageScale" format="dimension"/>
</declare-styleable>