自定义ImageView->圆角矩形+圆形头像

参考自:http://blog.csdn.net/lmj623565791/article/details/24555655

package com.example.customshapedemo;

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

public class CustomImgeView extends ImageView {
    public static final int circle = 0;
    public static final int round = 1;
    Paint paint = new Paint();
    private int radius = 0;
    private int type = 0;

    public CustomImgeView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public CustomImgeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        initParam(context, attrs);
    }

    public CustomImgeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        initParam(context, attrs);
    }

    void init() {
        paint.setAntiAlias(true);
        paint.setColor(Color.WHITE);
    }

//    解析参数
    void initParam(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.CustomImageView);
//        获取图片类型
        type = typedArray.getInt(0,0);
//        如果是圆角矩形的类型,就获取圆角的角度
        if (type==round) {
            radius = typedArray.getInt(1, 0);
        }
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            int w = bitmap.getWidth();
            int h = bitmap.getHeight();
            paint.reset();
            init();
            if (circle==type) {
                int r = 0;
                int left = 0, top = 0;
                if (w > h) {
                    r = h / 2;
                    left = (w - h) / 2;
                } else {
                    r = w / 2;
                    top = (h - w) / 2;
                }
                Bitmap b = getCircleBitmap(bitmap, r);
                canvas.drawBitmap(b, left, top, paint);
            }else if(round==type){
                Bitmap b=getRoundConerBitmap(bitmap, radius);
                canvas.drawBitmap(b, 0, 0, paint);
            }else{
                super.onDraw(canvas);
            }
        } else {
            super.onDraw(canvas);
        }
    }
//    将Bitmap合成为一个圆角的Bitmap
    public Bitmap getCircleBitmap(Bitmap bitmap, int r) {
        Bitmap b = Bitmap.createBitmap(2 * r, 2 * r, Config.ARGB_8888);
        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setColor(Color.WHITE);
        Canvas canvas = new Canvas(b);
//        在底层画一个半径为r的圆形
        canvas.drawCircle(r, r, r, p);
//        设置SRC_IN模式,这种模式取两层图片叠加的并集 展现上面的那一层
        p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, 0, 0, p);
        return b;
    }
//    将Bitmap合成为一个圆角的Bitmap
    public Bitmap getRoundConerBitmap(Bitmap bitmap, int round) {
        Bitmap b = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
                Config.ARGB_8888);
        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setColor(Color.WHITE);
        Canvas canvas = new Canvas(b);
//        在底层画一个矩形
        RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
        canvas.drawRoundRect(rect, round, round, p);
        p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//        设置SRC_IN模式,这种模式取两层图片叠加的并集 展现上面的那一层
        canvas.drawBitmap(bitmap, 0, 0, p);
        return b;
    }
}

在values/styles.xml中添加自定义属性:

 

<declare-styleable name="CustomImageView">
    <attr name="type">
            <enum name="circle" value="0" />
            <enum name="round" value="1" />
        </attr>
        <attr name="radius" format="integer" />
</declare-styleable>

xml文件中定义使用自定义类 引入namespace,以及用报名+类名的形式使用:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:customshape="http://schemas.android.com/apk/res/com.example.customshapedemo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <com.example.customshapedemo.CustomImgeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginLeft="28dp"
        android:layout_marginTop="44dp"
        customshape:type="round"
        customshape:radius="15"
        android:layout_toRightOf="@+id/textView1"
        android:src="@drawable/ddw1" >
    </com.example.customshapedemo.CustomImgeView>

    <com.example.customshapedemo.CustomImgeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="119dp"
        android:src="@drawable/ddw1"
        customshape:type="circle" />

</RelativeLayout>
时间: 2024-08-21 18:35:42

自定义ImageView->圆角矩形+圆形头像的相关文章

Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示

Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过Paint和onDraw()进行圆形图片显示. 效果图: 代码: 1 activity_image.xml 2 <?xml version="1.0" encoding="utf-8"?> 3 <LinearLayoutxmlns:android=&q

Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结

1.Bootstrap提供了四种用于<img>类的样式,分别是:.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形.img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框.img-responsive:图片响应式 (自适应各类大小的屏幕) 使用方法:(1)Bootstrap库的导入就不说啦,原

Android开发之自定义圆角矩形图片ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪对应的圆角矩形的bitmap,然后在onDraw()进行绘制圆角矩形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import and

【Android学习笔记】圆角矩形ImageView自定义控件的实现与使用

在做安卓项目的过程中,我们总会遇到需要以圆角矩形控件来显示图标.图片或者按钮的需求,解决办法有两种,一种是在drawable下创建shape布局xml文件,另一种是自定义一个继承于ImageView的自定义控件类来实现,下面是具体的实现办法. 首先我们命名一个XCRoundRectImageView类,并继承于ImageView.代码如下: 1 import android.content.Context; 2 import android.graphics.Bitmap; 3 import a

登录圆形头像之网络加载与缓存到本地

Android开发中常常有用户头像显示,似乎大多数都是圆形显示,如果每次加载网络头像,会频繁的请求网络,所以本文主要说的是登录时的头像网络加载和缓存到本地,以便于下次加载时直接从本地获取即可. 效果图 自定义控件实现圆形头像显示请看, Android自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示 这篇博客即可. 代码: public class MainActivity extends Activity implements OnClickListener { private Ima

圆形头像以及一些常见需求形状自定义ImageView组件

在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,lib和demo下载地址:https://github.com/mapleyuan/RoundImageView.效果如下,大家有兴趣的可以下下来使用,发现有什么问题也欢迎向我提出. 下面我大概讲下实现. 首先当然是继承ImageView,重写onDraw()方法.我们来看看onDraw的实现:     protected void onDraw(Canvas canv

几行实现圆形头像,以及一些常见需求形状自定义ImageView组件

在实际开发中,我们经常会遇到这样的需求,就是无论图片长啥样,我们都要其显示成圆形.圆形加一个边框.矩形加边框,带圆角的矩形等等,我已把自己平常用的组件和demo上传到了github(https://github.com/mapleyuan/RoundImageView)上,效果如下.大家有兴趣的可以下下来使用,发现有什么问题也欢迎向我提出. 下面我大概讲下实现. 首先当然是继承ImageView,重写onDraw()方法.我们来看看onDraw的实现: @Override     protect

Android 自定义ImageView实现圆角/圆形 附加OnTouchListener详细注释以及Button圆角

转载请注明出处:王亟亟的大牛之路 平时要用一些非方方正正的按钮之类的小伙伴们是如何实现的?RadioButton?ImageButton?还是其他? 今天亟亟上的是ImageView来实现的 先上下效果图(目录结构) 分析: shape.xml用于Button的"倒角"(做过机械类的都懂,哈哈) attr.xml用于自定义ImageView的标签的定义 ids.xml用于控件findbyid用,为什么补+id 等会我会来解释 效果图: 分析:一个Button 2个自定义ImageVie

【Android】自定义圆形ImageView(圆形头像 可指定大小)

最近在仿手Q的UI,这里面经常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这种头像的原理.不过里面提供的方法还有一个不足的地方就是不能根据实际需求改变图片的大小,也就是说提供的原图是大尺寸的,转换之后的图片也是大尺寸的,这显然不符合我们实际项目中的需求.于是我对里面介绍的第一种方法做了一番改进,使其能直接在XML中指定图片的大小. 大体步骤 将原图居中裁剪成正方形 根据指定的宽度对正方形进行缩放 裁剪成圆形 效果 代码实现 package com.de