自定义控件之简易Tab结构

来源：互联网发布：csol大刀优化软件编辑：程序博客网时间：2024/06/05 20:55

自定义简易Tab结构控件，仅设置文本与指示器

本文目的加深对自定义控件的理解，掌握自定义控件，everything can draw
- 自定义控件继承View
- 重写两个参数的构造方法具体看代码部分public TabCustomsView(Context context, AttributeSet attrs)
- 难点一在于解决drawText文本Y方向居中问题
- *X方向用paint.setTextAlign(Align.CENTER)

代码

package myview;import java.util.ArrayList;import com.example.lib_myactivity.R;import android.annotation.SuppressLint;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Align;import android.graphics.Paint.FontMetrics;import android.graphics.Paint.Style;import android.graphics.Rect;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class TabCustomsView extends View {    @SuppressLint("Recycle")    public TabCustomsView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Tab);        textSize = (int) typedArray.getDimension(R.styleable.Tab_textSize, 26);        indicatorHeight = typedArray.getInteger(R.styleable.Tab_indicatorHeight, 4);        SelColor = typedArray.getInteger(R.styleable.Tab_indicatorColor, Color.GREEN);        initpaint();    }    private int indicatorHeight;    private int textSize;    private ArrayList<String> list = new ArrayList<String>();    private int defColor = Color.BLACK;    private int SelColor = Color.parseColor("#00ff00");    private int count = 4;    private Paint paint;    private Paint paint2;    private int selectPosition;    private int width;    private Paint paint3;    //提供设置属性的方法    public void setTabCustomsVew(int count,int indicatorHeight,int textSize,int defColor,int SelColor)    {        this.count = count;        this.indicatorHeight = indicatorHeight;        this.textSize = textSize;        this.defColor = defColor;        this.SelColor = SelColor;        initpaint();        invalidate();    }    //构思中，外部提供String容器共控件初始化    public void setTablist(ArrayList<String> s)    {        list = s;        invalidate();    }    //初始化画笔    private void initpaint() {        paint = new Paint();        paint2 = new Paint();        paint.setStyle(Style.FILL);        paint.setTextSize(textSize);        paint.setTextAlign(Align.CENTER);        paint.setColor(defColor);        paint2.setStyle(Style.FILL);        paint2.setTextSize(textSize);        paint2.setTextAlign(Align.CENTER);        paint2.setColor(SelColor);        paint3 = new Paint();        paint3.setStyle(Style.STROKE);        paint3.setStrokeWidth(indicatorHeight);        paint3.setColor(SelColor);        paint4 = new Paint();        paint4.setColor(Color.TRANSPARENT);        paint4.setTextSize(textSize);    }    //自定义控件中常见的触碰监听    @SuppressLint("ClickableViewAccessibility")    @Override    public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        float x = event.getX();        switch (action) {        case MotionEvent.ACTION_DOWN://手指按下触发            selectPosition = (int) (x/(width/4));            listener.onSelect(selectPosition);            invalidate();            break;        case MotionEvent.ACTION_MOVE://手指移动触发            selectPosition = (int) (x/(width/4));            listener.onSelect(selectPosition);            invalidate();            break;    //手指离开屏幕触发 为 MotionEvent.ACTION_UP            default:            break;        }        return true;    }//回调监听事件    public interface OnSelectListener    {        void onSelect(int Selectposition);    }    private OnSelectListener listener;    private Paint paint4;    public void setOnSelectListener(OnSelectListener l)    {        this.listener = l;    }    @SuppressLint("DrawAllocation")    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int height = canvas.getHeight()/2;        width = canvas.getWidth();        //解决text y方向无法居中问题        Rect rect = new Rect( 0, 0, width, 2*height);        canvas.drawRect(rect, paint4);        FontMetrics fontMetrics = paint4.getFontMetrics();        int baseline = (int) ((rect.bottom+rect.top-fontMetrics.bottom-fontMetrics.top)/2);        //外部容器传入非空，避免空指针        if(list.size() != 0)        {            for (int i = 0; i < count; i++) {//画文本               canvas.drawText(list.get(i),width/4/2+i*width/4,baseline, paint);            }            //画选中文本            canvas.drawText(list.get(selectPosition), selectPosition*width/4+width/4/2,baseline, paint2);            //indicator画指示器            canvas.drawLine(selectPosition*width/4, 2*height-indicatorHeight, selectPosition*width/4+width/4, 2*height-indicatorHeight, paint3);        }    }}... prompt'''

使用xml

 <myview.TabCustomsView        android:id="@+id/tabCustomsView1"        android:layout_width="wrap_content"        android:layout_height="40dp"        android:background="#ffffff"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true" />... prompt'''

自定义属性在xml中使用需要给命名空间，res-auto

使用代码中与其他控件一样

TabCustomsView tab = (TabCustomsView) findViewById(R.id.tabCustomsView1);        //自定义控件 设置自定义属性        tab.setTablist(tablist);        tab.setTabCustomsVew(tablist.size(), 4, 26, Color.BLACK, Color.parseColor("#00C37E"));... prompt'''

截图

csdn截图有点难搞，如果需要简单复制下代码运行即可

1 0