【只需要有任意颜色(除了白色,透明色)的图片即可,点击与滑动为你自动实现】
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>