android 自定义控件（二）

最新推荐文章于 2024-08-15 17:41:29 发布

哈哈哈哈哈哈_Y

最新推荐文章于 2024-08-15 17:41:29 发布

阅读量558

点赞数

分类专栏： Android自定义控件学习文章标签： android 控件

Android自定义控件学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

转自：鸿洋博客，正在学习，非常感谢！
之前已经初步了解了自定义，现在要做的是自定义View显示一张图片，下面包含图片的文本介绍。
1.自定义基本属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="textSize" format="dimension" />
    <attr name="textTitle" format="string" />
    <attr name="textColor" format="color" />
    <attr name="img" format="reference" />
    <attr name="imgScaleType">
        <enum name="fillXY" value="0" />
        <enum name="center" value="1" />
    </attr>

    <declare-styleable name="CustomeView2">
        <attr name="textSize" />
        <attr name="textTitle" />
        <attr name="textColor" />
        <attr name="img" />
        <attr name="imgScaleType" />

    </declare-styleable>
</resources>

2.自定义控件CustomeView：



    Paint mPaintText, mPaintDraw;

    Rect textRect, imgRect;
    //定义一些基本属性
    private String mTextTitle;
    private int mTextSize;
    private int mTextColor;
    private Bitmap img;
    private int mImgScaleType;


    //最终要显示的高和宽
    private int width;
    private int height;

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

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

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

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomeView2, defStyleAttr, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CustomeView2_textTitle:
                    mTextTitle = a.getString(R.styleable.CustomeView2_textTitle);
                    break;
                case R.styleable.CustomeView2_textColor:
                    mTextColor = a.getColor(attr, Color.BLACK);//默认黑色字体
                    break;
                case R.styleable.CustomeView2_textSize://这里用的是px
                    mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));//默认16sp
                    break;
                case R.styleable.CustomeView2_img:
                    img = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
                    break;
                case R.styleable.CustomeView2_imgScaleType:
                    mImgScaleType = a.getInt(attr, 0);
                    break;
            }
        }

        a.recycle();

        mPaintDraw = new Paint();
        mPaintText = new Paint();
        textRect = new Rect();
        imgRect = new Rect();
        mPaintText.setTextSize(mTextSize);
        mPaintText.getTextBounds(mTextTitle, 0, mTextTitle.length(), textRect);
    }

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

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制边框
        mPaintDraw.setStrokeWidth(1);//这个边框大小暂写死
        mPaintDraw.setAntiAlias(true);//消除锯齿
        mPaintDraw.setStyle(Paint.Style.STROKE);//空心
        mPaintDraw.setColor(mTextColor);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaintDraw);


        //此时绘制的text过于长让其显示”哈哈哈哈....“
        mPaintText.setColor(mTextColor);
        if (textRect.width() > width) {


            TextPaint paint = new TextPaint(mPaintText);

            String msg = TextUtils.ellipsize(mTextTitle, paint, width - getPaddingLeft() - getPaddingRight(), TextUtils.TruncateAt.END).toString();

            //绘制textView 放在图片的上面
            //绘制的时候用的是这个方法  canvas.drawRect(title,x,y,paint);
            canvas.drawText(msg, getPaddingLeft(), getPaddingTop() + textRect.height(), paint);

            //绘制textView  放在图片的下面
            //绘制的时候用的是这个方法  canvas.drawRect(title,x,y,paint);
            canvas.drawText(msg, getPaddingLeft(), height - getPaddingBottom(), paint);

        } else {
            //绘制textView 放在图片的上面
            //绘制的时候用的是这个方法  canvas.drawRect(title,x,y,paint);
            canvas.drawText(mTextTitle, getWidth() / 2 - textRect.width() / 2 - getPaddingLeft() + getPaddingRight(), getPaddingTop() + textRect.height(), mPaintText);

            //绘制textView  放在图片的下面
            //绘制的时候用的是这个方法  canvas.drawRect(title,x,y,paint);
            canvas.drawText(mTextTitle, getWidth() / 2 - textRect.width() / 2 - getPaddingLeft() + getPaddingRight(), height - getPaddingBottom(), mPaintText);
        }

        //绘制图片的绘制区域。放在textView的下面
        imgRect.left = getPaddingLeft();
        imgRect.right = width - getPaddingRight();
        imgRect.bottom = height - getPaddingBottom() - textRect.height();
        //这个地方由于还要绘制一个textVIew 所以他的高度应该要改变
        imgRect.top = getPaddingTop() + textRect.height();//绘制图在textView
            canvas.drawBitmap(img, null, imgRect, mPaintDraw);


    }

现在的效果：这里写图片描述

这里写图片描述

然后之前设置width 为warp_content的时候会出现平铺的效果，这个时候我们需要重写OnMeasure()方法：

 int specModeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int specSizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int specModeHeight = MeasureSpec.getMode(heightMeasureSpec);
        int specSizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        if (specModeWidth == MeasureSpec.EXACTLY) {//match
            width = specSizeWidth;
        } else {
            //这个时候要判断是图片太长还是文字太长
            int imgWidth = getPaddingLeft() + img.getWidth() + getPaddingRight();
            int textWidth = getPaddingLeft() + textRect.width() + getPaddingRight();

            //在其设置为wrap_content的时候
            if (specModeWidth == MeasureSpec.AT_MOST) {//会由子控件的宽度觉得
                int desireWidth = Math.max(imgWidth, textWidth);

                //这个时候,子控件设置的宽wrap_content，最终的宽会由父控件和自控件的宽的稍小值决定
                width = Math.min(desireWidth, specSizeWidth);
            }

        }

        if (specModeHeight == MeasureSpec.EXACTLY) {
            height = specSizeHeight;
        } else {
            int desireHeight = getPaddingBottom() + img.getHeight() + getPaddingTop() + textRect.height();
            if (specModeHeight == MeasureSpec.AT_MOST) {
                height = Math.min(desireHeight, specSizeHeight);
            }

        }
        setMeasuredDimension(width, height);
        Log.i("yqy", getMeasuredHeight() + "," + getMeasuredWidth());

这个时候的效果是：
这里写图片描述

然后我们发现之前定义的imgStyleType我们并没有使用，这个又是做什么的呢？这个是用来区分绘制的图片是否是平铺还是中心显示，这个我们在OnDraw方法里面实现：


        if (mImgScaleType == 0) {//平铺

            canvas.drawBitmap(img, null, imgRect, mPaintDraw);
        } else {//中心显示
            imgRect.left = width / 2 - imgRect.width() / 2;
            imgRect.right = width / 2 + imgRect.width() / 2;
            imgRect.top = height / 2 + (textRect.height() / 2) * 2 - imgRect.height() / 2;
            imgRect.bottom = height / 2 - (textRect.height() / 2) * 2 + imgRect.height() / 2;

            canvas.drawBitmap(img, null, imgRect, mPaintDraw);
        }

效果图：
这里写图片描述于上面一张图对比有没有发现图片的显示不一样？这就是imgStyleType的效果。

笔记总结：
1.代码编写的时候加上一个textView 让自己熟悉一下计算什么的
2.中间出现一个错误：

 Caused by: android.content.res.Resources$NotFoundException: File #009933 from drawable resource ID #0x0: .xml extension required

原因是属性styleable.xml中

<attr name="textColor" format="color" />

color属性我写成了string
3. ondraw中不要new 对象，耗内存这个要修改优化。
以上。

哈哈哈哈哈哈_Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android 自定义控件（二）

转自：鸿洋博客，正在学习，非常感谢！之前已经初步了解了自定义，现在要做的是自定义View显示一张图片，下面包含图片的文本介绍。 1.自定义基本属性：<?xml version="1.0" encoding="utf-8"?><resources> <attr name="textSize" format="dimension" /> <attr name="textTitle"
复制链接

扫一扫

专栏目录