AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Android】Android自定义带board的圆角控件

2016-05-12 2665
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 介绍 圆角控件常用于头像，按钮，图标等，用途十分广泛，而且常常配合board使用。 在IOS中，UIVIew的CALayer层已经提供了圆角和board的方法，所以圆角控件的制作非常简单，只需要类似以下简单代码即可实现： view.layer.cornerRadius = 20; view.layer.borderColor = [UIColor yellow

介绍

圆角控件常用于头像，按钮，图标等，用途十分广泛，而且常常配合board使用。


在IOS中，UIVIew的CALayer层已经提供了圆角和board的方法，所以圆角控件的制作非常简单，只需要类似以下简单代码即可实现：

    view.layer.cornerRadius = 20;
    view.layer.borderColor = [UIColor yellowColor].CGColor;
    view.layer.borderWidth = 10;
    view.clipsToBounds = YES;

而在Android中，系统并没有提供这么直接的方式，所以想要实现同样的效果需要费点心了。 本文将会 介绍一种在Android中实现带board属性的圆角控件的方法。该方法定义了一个RoundImageView重写了ImageView的onDraw方法，并加入了一些自定义的属性，最后实现以上同样效果的代码非常简洁： 

    <com.me.obo.circleboardimage.circleview.RoundImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/head"
        attr:border_width="3dp"
        attr:corner_y="40dp"
        attr:corner_x="40dp"
        attr:border_color="#FFFFFF"/>

下面就介绍如何实现这样一个RoundImageView

遮罩

在Android中，遮罩功能非常强大，可以用于生成两张图片相互截取的结果。


具体参数和遮罩的效果可以见链接： Android 实现遮罩

在RoundImageView中，遮罩用于清除控件外圈的内容，从而获取到圆角的效果。这里的思路是先获取到控件本身所绘制的图片，之后获取圆角矩形遮罩图片，然后两个图片采用DST_IN遮罩模式来截取中间的遮罩效果，即：


代码实现如下：


        // 获取imageview原先的图片
        super.onDraw(mDestCanvas);

        // 创建矩形，表示圆角矩形
        if (mRoundRectClip == null) {
            mRoundRectClip = new RectF(mBorderValue, mBorderValue, getWidth() - mBorderValue, getHeight() - mBorderValue);
        }
        // 绘制圆角矩形
        mSrcCanvas.drawRoundRect(mRoundRectClip,mCornerXValue,mCornerYValue,mNomalPaint);

        // 使用遮罩画笔扣除原图中的圆角矩形外面的部分
        mDestCanvas.drawBitmap(mSrcBitmap,0,0,mPaintClip);


在获取到遮罩处理的图片之后，为其添加board将会变得容易，也就是在外圈绘制出一个带有宽度的圆即可。


代码实现如下：


        // 创建board的矩形
        if (mRoundRectBorder == null) {
            mRoundRectBorder = new RectF(mBorderValue / 2, mBorderValue / 2, getWidth() - mBorderValue / 2, getHeight() - mBorderValue / 2);
        }
        // 绘制board
        mDestCanvas.drawRoundRect(mRoundRectBorder, mCornerXValue, mCornerYValue, mPaintBoard);


整个RoundImageView完整的代码如下：

package com.me.obo.circleboardimage.circleview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.me.obo.circleboardimage.R;


/**
 * Created by obo on 16/5/11.
 * Email:obo1993@gmail.com
 * Git:https://github.com/OboBear
 * Blog:http://blog.csdn.net/leilba
 */
public class RoundImageView extends ImageView {

    private float mCornerXValue ;
    private float mCornerYValue ;
    private float mBorderValue ;
    private int mBorderColor ;

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 获取自定义参数
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundImageView);
        // board颜色
        mBorderColor = typedArray.getColor(R.styleable.RoundImageView_border_color,Color.argb(0,0,0,0));
        // 获取X方向曲率
        mCornerXValue = typedArray.getDimension(R.styleable.RoundImageView_corner_x,0);
        // 获取Y方向曲率
        mCornerYValue = typedArray.getDimension(R.styleable.RoundImageView_corner_y,0);
        // board宽
        mBorderValue = typedArray.getDimension(R.styleable.RoundImageView_border_width,0);
        // 用完需要recycle
        typedArray.recycle();

        initPaints();
    }

    private void initPaints() {
        // 创建普通画笔
        if (mNomalPaint == null) {
            mNomalPaint = new Paint();
            mNomalPaint.setAntiAlias(true);
        }

        // 创建遮罩画笔
        if (mPaintClip == null) {
            mPaintClip = new Paint();
            mPaintClip.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
            mPaintClip.setAntiAlias(true);
        }

        // 创建board的画笔
        if (mPaintBoard == null) {
            mPaintBoard = new Paint();
            mPaintBoard.setColor(mBorderColor);
            mPaintBoard.setStyle(Paint.Style.STROKE);
            mPaintBoard.setStrokeWidth(mBorderValue);
            mPaintBoard.setAntiAlias(true);
        }
    }

    Bitmap mDestBitmap;
    Bitmap mSrcBitmap;
    Canvas mDestCanvas;
    Canvas mSrcCanvas;
    Paint mPaintClip;
    Paint mNomalPaint;
    Paint mPaintBoard;
    RectF mRoundRectClip;
    RectF mRoundRectBorder;

    @Override
    protected void onDraw(Canvas canvas) {
        // 创建遮罩图片和画布
        if (mDestBitmap == null) {
            mDestBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
            mSrcBitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
            mDestCanvas = new Canvas(mDestBitmap);
            mSrcCanvas = new Canvas(mSrcBitmap);
        }
        // 获取imageview原先的图片
        super.onDraw(mDestCanvas);

        // 创建矩形，表示圆角矩形
        if (mRoundRectClip == null) {
            mRoundRectClip = new RectF(mBorderValue, mBorderValue, getWidth() - mBorderValue, getHeight() - mBorderValue);
        }
        // 绘制圆角矩形
        mSrcCanvas.drawRoundRect(mRoundRectClip,mCornerXValue,mCornerYValue,mNomalPaint);

        // 使用遮罩画笔扣除原图中的圆角矩形外面的部分
        mDestCanvas.drawBitmap(mSrcBitmap,0,0,mPaintClip);

        // 创建board的矩形
        if (mRoundRectBorder == null) {
            mRoundRectBorder = new RectF(mBorderValue / 2, mBorderValue / 2, getWidth() - mBorderValue / 2, getHeight() - mBorderValue / 2);
        }
        // 绘制board
        mDestCanvas.drawRoundRect(mRoundRectBorder, mCornerXValue, mCornerYValue, mPaintBoard);

        // 绘制最终的圆角带有board的图
        canvas.drawBitmap(mDestBitmap,0,0,mNomalPaint);
    }

}


自定义Attribute

可能有人要问，圆角弯曲度和board的参数是如何传递到RoundImageView里的。实际上，这里采用了自定义Attribute的方式，该操作需要到res/values 目录下创建 attr.xml 文件，在里面写上自定义的参数名称以及类型：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundImageView">
        <attr name="border_width" format="dimension"/>
        <attr name="border_color" format="color"/>
        <attr name="corner_x" format="dimension"/>
        <attr name="corner_y" format="dimension"/>
    </declare-styleable>
</resources>

有了这个，就可以在RoundImageView的构造方法里面，获取到自定义attri的值了 

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 获取自定义参数
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundImageView);
        // board颜色
        mBorderColor = typedArray.getColor(R.styleable.RoundImageView_border_color,Color.argb(0,0,0,0));
        // 获取X方向曲率
        mCornerXValue = typedArray.getDimension(R.styleable.RoundImageView_corner_x,0);
        // 获取Y方向曲率
        mCornerYValue = typedArray.getDimension(R.styleable.RoundImageView_corner_y,0);
        // board宽
        mBorderValue = typedArray.getDimension(R.styleable.RoundImageView_border_width,0);
        // 用完需要recycle
        typedArray.recycle();

        initPaints();
    }

在layout里使用的时候，需要在layout的xml开头里面申请自定义的参数即可 

xmlns:attr="http://schemas.android.com/apk/res-auto"
最后，在layout里面调用RoundImageView的代码非常简洁： 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:attr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:orientation="vertical">

    <com.me.obo.circleboardimage.circleview.RoundImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/head"
        attr:border_width="3dp"
        attr:corner_y="40dp"
        attr:corner_x="40dp"
        attr:border_color="#FFFFFF"/>

    <com.me.obo.circleboardimage.circleview.RoundImageView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/head"
        attr:border_width="2dp"
        attr:corner_y="40dp"
        attr:corner_x="40dp"
        attr:border_color="#FF0000"
        android:scaleType="fitXY"/>
    
</LinearLayout>
效果如下：



资源下载

RoundImageView


文章标签：
Android开发
前端开发
数据格式
XML
iOS开发
开发工具
git
关键词：
Android自定义
Android圆角
Android控件
Android自定义圆角
林深
目录
相关文章
阿迷创客
|
17天前
|
存储 Shell Android开发
基于Android P，自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤，包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
阿迷创客
41 2
基于Android P，自定义Android开机动画的方法
请看我回答~
|
15天前
|
供应链 物联网 区块链
未来触手可及：探索新兴技术的趋势与应用安卓开发中的自定义视图：从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展，新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景，带你领略未来的可能性。
请看我回答~
32 6
请看我回答~
|
16天前
|
测试技术 Android开发 Python
探索软件测试的艺术：从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中，测试是不可或缺的一环。它如同艺术一般，需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言，引领读者从软件测试的基础出发，逐步深入到更复杂的测试策略和工具的使用，最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能，就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
请看我回答~
33 1
请看我回答~
|
3天前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域，自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例，展示如何在安卓项目中创建和使用自定义View组件，包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例，还深入探讨了自定义View的性能优化技巧，旨在帮助开发者更好地掌握这一技能。
请看我回答~
17 7
请看我回答~
|
15天前
|
XML 搜索推荐 Android开发
安卓开发中的自定义View组件实践
【8月更文挑战第30天】探索Android世界，自定义View是提升应用界面的关键。本文以简洁的语言带你了解如何创建自定义View，从基础到高级技巧，一步步打造个性化的UI组件。
请看我回答~
47 2
阿迷创客
|
17天前
|
Android开发
Android在rootdir根目录创建自定义目录和挂载点的方法
本文介绍了在Android高通平台的根目录下创建自定义目录和挂载点的方法，通过修改Android.mk文件并使用`LOCAL_POST_INSTALL_CMD`变量在编译过程中添加目录，最终在ramdisk.img的系统根路径下成功创建了`/factory/bin`目录。
阿迷创客
38 1
请看我回答~
|
7天前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里，自定义视图如同绘画艺术中的色彩，它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧，开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图，包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗？让我们开始吧！ ##
请看我回答~
17 0
请看我回答~
|
19天前
|
前端开发 Android开发 开发者
安卓开发中的自定义视图：构建你的第一个控件
【8月更文挑战第26天】在安卓开发的浩瀚海洋中，自定义视图是一块充满魔力的乐土。它不仅是开发者展示创造力的舞台，更是实现独特用户体验的关键。本文将带你步入自定义视图的世界，从基础概念到实战应用，一步步教你如何打造自己的第一个控件。无论你是初学者还是有经验的开发者，这篇文章都将为你的开发之旅增添新的风景。
请看我回答~
40 0
Ant.Dream
|
1月前
|
XML 前端开发 Android开发
Android经典实战之Kotlin中实现圆角图片和圆形图片
本文介绍两种实现圆角图像视图的方法。第一种是通过自定义Kotlin `AppCompatImageView`，重写`onDraw`方法使用`Canvas`和`Path`进行圆角剪裁。第二种利用Android Material库中的`ShapeableImageView`，简单配置即可实现圆角效果。两种方法均易于实现且提供动态调整圆角半径的功能。
Ant.Dream
28 0
Ant.Dream
|
2月前
|
Android开发
Android面试题之自定义View注意事项
在Android开发中，自定义View主要分为四类：直接继承View重写onDraw，继承ViewGroup创建布局，扩展特定View如TextView，以及继承特定ViewGroup。实现时需注意：支持wrap_content通过onMeasure处理，支持padding需在onDraw或onMeasure/onLayout中处理。避免在View中使用Handler，使用post系列方法代替。记得在onDetachedFromWindow时停止线程和动画以防止内存泄漏。处理滑动嵌套时解决滑动冲突，并避免在onDraw中大量创建临时对象。
Ant.Dream
38 4