zoukankan      html  css  js  c++  java
  • Android 完美实现图片圆角和圆形(对实现进行分析)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24555655

    本来想在网上找个圆角的样例看一看,不尽人意啊,基本都是官方的Demo的那张原理图。稍后会贴出。

    于是自己自己定义了个View,实现图片的圆角以及圆形效果。效果图:


    第一个是原图,第二个是圆形效果。第三第四设置了不同的圆角大小。

    准备改变一个博客的风格,首先给大家讲一下原理,让大家明确了,然后再贴代码,不然能够直接看那么长的代码也比較痛苦。核心代码事实上就那么几行:

    核心代码分析:

    /**
    	 * 依据原图和变长绘制圆形图片
    	 * 
    	 * @param source
    	 * @param min
    	 * @return
    	 */
    	private Bitmap createCircleImage(Bitmap source, int min)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
    		/**
    		 * 产生一个相同大小的画布
    		 */
    		Canvas canvas = new Canvas(target);
    		/**
    		 * 首先绘制圆形
    		 */
    		canvas.drawCircle(min / 2, min / 2, min / 2, paint);
    		/**
    		 * 使用SRC_IN
    		 */
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		/**
    		 * 绘制图片
    		 */
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}

    事实上主要靠:paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));这行代码,为什么呢,我给大家解释下,SRC_IN这样的模式,两个绘制的效果叠加后取交集展现后图,怎么说呢,咱们第一个绘制的是个圆形,第二个绘制的是个Bitmap,于是交集为圆形,展现的是BItmap,就实现了圆形图片效果。

    圆角,事实上就是先绘制圆角矩形,是不是非常easy,以后别人再说实现圆角。你就把这一行代码给他即可了。

    从Android的演示样例中,给大家证明一下:

    以下有一张PorterDuff.Mode的16中效果图,咱们的仅仅是其一:


    源代码咱们仅仅关心谁先谁后绘制的:

      canvas.translate(x, y);
                    canvas.drawBitmap(mDstB, 0, 0, paint);
                    paint.setXfermode(sModes[i]);
                    canvas.drawBitmap(mSrcB, 0, 0, paint);
                    paint.setXfermode(null);
                    canvas.restoreToCount(sc);
    能够看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集。展示的是Src(后者)。和咱们前面结论一致。

    效果16种,大家能够自由组合展示不同的效果。


    好了,原理和核心代码解释完毕。以下開始写自己定义View。

    1、自己定义属性:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <attr name="borderRadius" format="dimension" />
        <attr name="type">
            <enum name="circle" value="0" />
            <enum name="round" value="1" />
        </attr>
        <attr name="src" format="reference"></attr>
    
        <declare-styleable name="CustomImageView">
            <attr name="borderRadius" />
            <attr name="type" />
            <attr name="src" />
        </declare-styleable>
    
    </resources>

    2、构造中获取自己定义的属性:
    	/**
    	 * TYPE_CIRCLE / TYPE_ROUND
    	 */
    	private int type;
    	private static final int TYPE_CIRCLE = 0;
    	private static final int TYPE_ROUND = 1;
    
    	/**
    	 * 图片
    	 */
    	private Bitmap mSrc;
    
    	/**
    	 * 圆角的大小
    	 */
    	private int mRadius;
    
    	/**
    	 * 控件的宽度
    	 */
    	private int mWidth;
    	/**
    	 * 控件的高度
    	 */
    	private int mHeight;
    
    	public CustomImageView(Context context, AttributeSet attrs)
    	{
    		this(context, attrs, 0);
    	}
    
    	public CustomImageView(Context context)
    	{
    		this(context, null);
    	}
    
    	/**
    	 * 初始化一些自己定义的參数
    	 * 
    	 * @param context
    	 * @param attrs
    	 * @param defStyle
    	 */
    	public CustomImageView(Context context, AttributeSet attrs, int defStyle)
    	{
    		super(context, attrs, defStyle);
    
    		TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);
    
    		int n = a.getIndexCount();
    		for (int i = 0; i < n; i++)
    		{
    			int attr = a.getIndex(i);
    			switch (attr)
    			{
    			case R.styleable.CustomImageView_src:
    				mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
    				break;
    			case R.styleable.CustomImageView_type:
    				type = a.getInt(attr, 0);// 默觉得Circle
    				break;
    			case R.styleable.CustomImageView_borderRadius:
    				mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
    						getResources().getDisplayMetrics()));// 默觉得10DP
    				break;
    			}
    		}
    		a.recycle();
    	}
    

    3、onMeasure中获取控件宽高:

    /**
    	 * 计算控件的高度和宽度
    	 */
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    	{
    		// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    		/**
    		 * 设置宽度
    		 */
    		int specMode = MeasureSpec.getMode(widthMeasureSpec);
    		int specSize = MeasureSpec.getSize(widthMeasureSpec);
    
    		if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
    		{
    			mWidth = specSize;
    		} else
    		{
    			// 由图片决定的宽
    			int desireByImg = getPaddingLeft() + getPaddingRight()
    					+ mSrc.getWidth();
    			if (specMode == MeasureSpec.AT_MOST)// wrap_content
    			{
    				mWidth = Math.min(desireByImg, specSize);
    			} else
    
    				mWidth = desireByImg;
    		}
    
    		/***
    		 * 设置高度
    		 */
    
    		specMode = MeasureSpec.getMode(heightMeasureSpec);
    		specSize = MeasureSpec.getSize(heightMeasureSpec);
    		if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
    		{
    			mHeight = specSize;
    		} else
    		{
    			int desire = getPaddingTop() + getPaddingBottom()
    					+ mSrc.getHeight();
    
    			if (specMode == MeasureSpec.AT_MOST)// wrap_content
    			{
    				mHeight = Math.min(desire, specSize);
    			} else
    				mHeight = desire;
    		}
    
    		setMeasuredDimension(mWidth, mHeight);
    
    	}



    4、依据Type绘制:

    /**
    	 * 绘制
    	 */
    	@Override
    	protected void onDraw(Canvas canvas)
    	{
    
    		switch (type)
    		{
    		// 假设是TYPE_CIRCLE绘制圆形
    		case TYPE_CIRCLE:
    
    			int min = Math.min(mWidth, mHeight);
    			/**
    			 * 长度假设不一致。按小的值进行压缩
    			 */
    			mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
    
    			canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
    			break;
    		case TYPE_ROUND:
    			canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
    			break;
    
    		}
    
    	}
    
    	/**
    	 * 依据原图和变长绘制圆形图片
    	 * 
    	 * @param source
    	 * @param min
    	 * @return
    	 */
    	private Bitmap createCircleImage(Bitmap source, int min)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
    		/**
    		 * 产生一个相同大小的画布
    		 */
    		Canvas canvas = new Canvas(target);
    		/**
    		 * 首先绘制圆形
    		 */
    		canvas.drawCircle(min / 2, min / 2, min / 2, paint);
    		/**
    		 * 使用SRC_IN。參考上面的说明
    		 */
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		/**
    		 * 绘制图片
    		 */
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}
    
    	/**
    	 * 依据原图加入圆角
    	 * 
    	 * @param source
    	 * @return
    	 */
    	private Bitmap createRoundConerImage(Bitmap source)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
    		Canvas canvas = new Canvas(target);
    		RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
    		canvas.drawRoundRect(rect, mRadius, mRadius, paint);
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}

    好了,我就不解析代码了,自己定义View这是第五篇了。。,。写得好恶心,,,。


    各位赞一个或者留个言。算是对我的支持~


    源代码点击下载



    =========================================简单修复了一下,在ScrollView以及AdapterView中的headview的显示异常的bug============

    修复后代码下载:

    源代码点击下载


    相关博文,同一时候也推荐使用:

    Android Xfermode 实战 实现圆形、圆角图片

    Android BitmapShader 实战 实现圆形、圆角图片


  • 相关阅读:
    JavaScript与C# Windows应用程序交互
    用DateTime.ToString(string format)输出不同格式的日期
    时间间隔与暂停
    C#中比较两个时间的时间差
    lambda函数的用法
    Tornado笔记
    DjangoWeb应用开发实战笔记
    再看装饰器
    描述符
    flask简单代码回顾
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5223462.html
Copyright © 2011-2022 走看看