效果图

BottomBar

步骤

1、初始化自定义属性
2、初始化View
3、事件绑定

BottomBar

<resources>
    <declare-styleable name="BottomBar">
        <attr name="textColorOn" format="color" />
        <attr name="textColorOff" format="color" />
        <attr name="imageWidth" format="dimension" />
        <attr name="textSize" format="dimension" />
    </declare-styleable>
</resources>

public class BottomBar extends LinearLayout {
    private Context context;
    private int textColorOn, textColorOff;
    private int textSize;
    private int imageWidth;
    private String[] tabNames = {"资讯", "任务", "视频", "我的"};
    private int[] tabImageOn = {R.drawable.menu_news_on, R.drawable.menu_money_on, R.drawable.menu_video_on, R.drawable.menu_me_on};
    private int[] tabImageOff = {R.drawable.menu_news_off, R.drawable.menu_money_off, R.drawable.menu_video_off, R.drawable.menu_me_off};
    private int lastTab = 0;
    private List<ImageView> imageViews;
    private List<TextView> textViews;
    private OnTabClickListener onTabClickListener;

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

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

    public BottomBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        initAttrs(attrs);
        initView();
    }

    private void initAttrs(AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BottomBar);
        textColorOn = typedArray.getColor(R.styleable.BottomBar_textColorOn, ContextCompat.getColor(context, R.color.colorPrimary));
        textColorOff = typedArray.getColor(R.styleable.BottomBar_textColorOff, Color.GRAY);
        textSize = typedArray.getDimensionPixelSize(R.styleable.BottomBar_textSize, 11);
        imageWidth = (int) typedArray.getDimension(R.styleable.BottomBar_imageWidth, UIUtil.dip2px(26));
        typedArray.recycle();
    }

    private void initView() {
        imageViews = new ArrayList<>();
        textViews = new ArrayList<>();
        for (int i = 0; i < tabNames.length; i++) {
            LinearLayout linearLayout = new LinearLayout(context);
            linearLayout.setOrientation(VERTICAL);
            linearLayout.setGravity(Gravity.CENTER);
            LinearLayout.LayoutParams layoutParams = new LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            linearLayout.setLayoutParams(layoutParams);
            ImageView imageView = new ImageView(context);
            LayoutParams imageParams = new LayoutParams(imageWidth, imageWidth);
            imageParams.topMargin = UIUtil.dip2px(6);
            imageParams.bottomMargin = UIUtil.dip2px(2);
            imageView.setImageResource(i == 0 ? tabImageOn[i] : tabImageOff[i]);
            imageView.setLayoutParams(imageParams);
            linearLayout.addView(imageView);
            TextView textView = new TextView(context);
            LayoutParams textParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            textParams.bottomMargin = UIUtil.dip2px(6);
            textView.setText(tabNames[i]);
            textView.setTextSize(textSize);
            textView.setTextColor(i == 0 ? textColorOn : textColorOff);
            textView.setLayoutParams(textParams);
            linearLayout.addView(textView);
            final int position = i;
            linearLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    tabClick(position);
                }
            });
            imageViews.add(imageView);
            textViews.add(textView);
            addView(linearLayout);
        }
    }

    private void tabClick(int position) {
        if (lastTab == position) {
            return;
        }
        imageViews.get(lastTab).setImageResource(tabImageOff[lastTab]);
        textViews.get(lastTab).setTextColor(textColorOff);
        imageViews.get(position).setImageResource(tabImageOn[position]);
        textViews.get(position).setTextColor(textColorOn);
        lastTab = position;
        if (onTabClickListener != null) {
            onTabClickListener.onTabClick(position);
        }
    }

    public void setOnTabClickListener(OnTabClickListener onTabClickListener) {
        this.onTabClickListener = onTabClickListener;
    }

    public interface OnTabClickListener {
        void onTabClick(int position);
    }

    public void setCurrentTab(int position) {
        tabClick(position);
    }
}

最后

这个自定义View还有很大优化空间，等我有了灵感继续优化它。