Android仿ios7TabBar

<p><strong><span style="font-size:18px;">
</span></strong></p><h2><strong><span style="font-size:18px;">最开始的时候是考虑用radioGroup来做,不过当时的要求不是这样,中间的切换的是一个斜的线,就改成继承view了
</span><span style="font-size:18px;">直接上代码</span></strong></h2>

package com.hxqc.mall.views.autopackage;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;

import com.hxqc.mall.R;

/**
 * Author:viosonlee
 * Date:2015-08-07
 * FIXME
 * Todo 一个tab切换控件
 */
public class TopBar extends View {
    private Paint mPaint;
    private float height;
    private float width;
    private int mColor = Color.parseColor("#F5f5f5");
    private int bColor = Color.parseColor("#f23435");

    private float textSize = converTextSize(14);
    private float radius = converTextSize(8);

    private int count = 3;//选项的数目
    private String[] texts = null;

    private float lineWidth = converTextSize(1);//线条的宽度
    private int checkedIndex = 0;//选中的角标

    private RectF midleRectF,//当只有一个选项的时候按钮的中间区域
            maxRectF, //当大于一个的时候按钮的最大区域
            startRoundRectF,//左边的画圆角区域
            endRoundRectF, //右边画圆角的区域
            startRectF, //当选择在第一项时填充区域
            endRectF;//当选择最后一项是填充区域

    public void setCheckedIndex(int checkedIndex) {
        this.checkedIndex = checkedIndex;
        invalidate();
    }

    public int getCheckedIndex() {
        return checkedIndex;
    }

    public void setTexts(String[] texts) {
        this.texts = texts;
        invalidate();
    }

    public void setmColor(int mColor) {
        this.mColor = mColor;
        invalidate();
    }


    public void setTextSize(float textSize) {
        this.textSize = converTextSize(textSize);
        invalidate();
    }

    public void setRadius(float radius) {
        this.radius = converTextSize(radius);
        invalidate();
    }

    private OnSelectListener selectListener;


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


    public TopBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        textSize = typedArray.getDimension(R.styleable.TopBar_textSize, textSize);
        mColor = typedArray.getColor(R.styleable.TopBar_selectedBackgroundColor, mColor);
        bColor = typedArray.getColor(R.styleable.TopBar_backgroundColor, bColor);
        checkedIndex = typedArray.getInteger(R.styleable.TopBar_checkedIndex, checkedIndex);
        count = typedArray.getInteger(R.styleable.TopBar_count, count);
        float dimension = typedArray.getDimension(R.styleable.TopBar_radius, 8);
        radius = converTextSize(dimension);
        float dimension1 = typedArray.getDimension(R.styleable.TopBar_lineWidth, 1);
        lineWidth = converTextSize(dimension1);

        initData(count);
        typedArray.recycle();
    }

    /**
     * 初始化数据
     *
     * @param size
     */
    private void initData(int size) {
        texts = new String[size];
        for (int i = 0; i < size; i++) {
            String title = "选项" + (i + 1);
            texts[i] = title;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        init();
    }

    /**
     * 基本初始化
     */
    private void init() {
        height = getMeasuredHeight();
        width = getMeasuredWidth();
        mPaint = new Paint();
        count = texts.length;
        midleRectF = new RectF(width / 3 - lineWidth, lineWidth, width * 2 / 3 - lineWidth, height - lineWidth);//当前为一个的时候
        maxRectF = new RectF(lineWidth, lineWidth, width - lineWidth, height - lineWidth);
        startRoundRectF = new RectF(lineWidth, lineWidth, 2 * radius - lineWidth, height - lineWidth);
        endRoundRectF = new RectF(width - 2 * radius + lineWidth, lineWidth, width - lineWidth, height - lineWidth);
        startRectF = new RectF(radius + lineWidth, lineWidth, width / count, height - lineWidth);
        endRectF = new RectF(width - width / count, lineWidth, width - radius - lineWidth, height - lineWidth);
    }

    @Override
    public void invalidate() {
        super.invalidate();
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (count == 0||checkedIndex > count)
            return;
//        if (checkedIndex > count) {
//            throw new IndexOutOfBoundsException();
//        }

        float itemWidth = width / count;//每一个的宽度

        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawColor(Color.TRANSPARENT);
        mPaint.setAntiAlias(true);
        mPaint.setColor(mColor);
        mPaint.setStrokeWidth(lineWidth);
        //只有一个选项的时候
        if (count == 1) {
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawRoundRect(midleRectF, radius, radius, mPaint);
            drawTextColor(canvas, mPaint, bColor, 0);
            return;
        }
        //大于一个选项的时候
        canvas.drawRoundRect(maxRectF, radius, radius, mPaint);

        for (int i = 0; i < count; i++) {
            if (i == checkedIndex) {
                //话选中状态
                if (i == 0) {
                    //选中最左边的时候
                    mPaint.setStyle(Paint.Style.FILL);
                    canvas.drawRoundRect(startRoundRectF, radius, radius, mPaint);
                    canvas.drawRect(startRectF, mPaint);
                } else if (i == count - 1) {
//                    选中最右边的时候
                    mPaint.setStyle(Paint.Style.FILL);
                    canvas.drawRoundRect(endRoundRectF, radius, radius, mPaint);
                    canvas.drawRect(endRectF, mPaint);
                } else {
//                    选中其他的地方
                    mPaint.setStyle(Paint.Style.FILL);
                    canvas.drawRect(i * itemWidth + lineWidth, lineWidth,
                            i * itemWidth + itemWidth + lineWidth, height - lineWidth, mPaint);
                }
//                写字
                drawTextColor(canvas, mPaint, bColor, i);
            } else {
//                写字(非选中状态的)
                drawTextColor(canvas, mPaint, mColor, i);
            }
            if (i != 0 && i != checkedIndex)
                canvas.drawLine(i * itemWidth, height - lineWidth, i * itemWidth, lineWidth, mPaint);
        }

    }

    public void setOnSelectListener(OnSelectListener selectListener) {
        this.selectListener = selectListener;
    }

    /**
     * 写字
     *
     * @param canvas
     * @param paint
     * @param color
     * @param position
     */
    private void drawTextColor(Canvas canvas, Paint paint, int color, int position) {
        paint.setTextSize(textSize);
        paint.setStyle(Paint.Style.FILL);
        String text = getText(position);
        float wordWidth = paint.measureText(text);
        float v = width / count;
        float v0 = v / 2 - wordWidth / 2;//文字的margin
        float v1 = height / 2 + textSize / 2 - converTextSize(1.6f);
        paint.setColor(color);
        canvas.drawText(text, v0 + position * v, v1, paint);
    }

    /**
     * 字符长度设置
     *
     * @param position
     * @return
     */
    private String getText(int position) {
        if (texts[position].length() <= 5)
            return texts[position];
        else {
            String substring = texts[position].substring(0, 5);
            return substring + "...";
        }


    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            float x = event.getX();
            int i = (int) (x / width * count);
            setCheckedIndex(i);
            if (selectListener != null)
                selectListener.onSelect(this, i);
        }
        return true;
    }

    /**
     * 将sp转化为像素
     *
     * @param textSize
     * @return
     */
    private float converTextSize(float textSize) {
        Context c = getContext();
        Resources r;
        if (c == null)
            r = Resources.getSystem();
        else
            r = c.getResources();
        float size = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, textSize, r.getDisplayMetrics());
        return size;
    }

    public interface OnSelectListener {
        void onSelect(View view, int position);
    }
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值