定制各种形状的ImageView

最新推荐文章于 2021-05-26 07:10:41 发布
最新推荐文章于 2021-05-26 07:10:41 发布
阅读量560 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LUOXINJIE/article/details/45102405
版权
本文介绍如何在Android中实现类似QQ头像的圆形ImageView效果，提供了一个适用于此目的的解决方案，并附带了实际操作的效果图。
摘要由CSDN通过智能技术生成

  原文地址：http://www.androidhub4you.com/2014/10/android-custom-shape-imageview-rounded.html

   想仿QQ头像的那种圆形头像效果，找了很多资料，发现这个很适合自己使用。

  效果图：

   

MainActivity.java

package com.androidhub4you.crop;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {
      
       private ImageView imageViewRound;
       private ImageView imageViewOval;
       private ImageView imageViewTriangle;
       private ImageView imageViewHexaGon;

       @Override
       protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              imageViewRound=(ImageView)findViewById(R.id.imageView_round);
              imageViewOval=(ImageView)findViewById(R.id.imageView_oval);
              imageViewTriangle=(ImageView)findViewById(R.id.imageView_triangle);
              imageViewHexaGon=(ImageView)findViewById(R.id.imageView_hexagon);
             
              Bitmap icon = BitmapFactory.decodeResource(getResources(),R.drawable.pic1);
             
              imageViewRound.setImageBitmap(icon);
              imageViewOval.setImageBitmap(icon);
              imageViewTriangle.setImageBitmap(icon);
              imageViewHexaGon.setImageBitmap(icon);
             
             
       }


      
}

activity_main.xml 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <com.androidhub4you.crop.RoundedImageView
        android:id="@+id/imageView_round"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/ic_launcher" />

    <com.androidhub4you.crop.OvalImageView
        android:id="@+id/imageView_oval"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/ic_launcher" />

    <com.androidhub4you.crop.TriangleImageView
        android:id="@+id/imageView_triangle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/ic_launcher" />

    <com.androidhub4you.crop.HexagonImageView
        android:id="@+id/imageView_hexagon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Circle Shape(圆形): 

package com.androidhub4you.crop;

import android.content.Context;
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.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class RoundedImageView extends ImageView {

       public RoundedImageView(Context ctx, AttributeSet attrs) {
              super(ctx, attrs);
       }

       @Override
       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {
                     return;
              }

              if (getWidth() == 0 || getHeight() == 0) {
                     return;
              }
              Bitmap b = ((BitmapDrawable) drawable).getBitmap();
              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
              Bitmap finalBitmap;
              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                                  false);
              else
                     finalBitmap = bitmap;
              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                           finalBitmap.getHeight(), Config.ARGB_8888);
              Canvas canvas = new Canvas(output);

              final Paint paint = new Paint();
              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                           finalBitmap.getHeight());

              paint.setAntiAlias(true);
              paint.setFilterBitmap(true);
              paint.setDither(true);
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(Color.parseColor("#BAB399"));
              canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
                           finalBitmap.getHeight() / 2 + 0.7f,
                           finalBitmap.getWidth() / 2 + 0.1f, paint);
              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;
       }

}

Oval Shape(椭圆): 

package com.androidhub4you.crop;

import android.content.Context;
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.Mode;
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 OvalImageView extends ImageView {

       public OvalImageView(Context ctx, AttributeSet attrs) {
              super(ctx, attrs);
       }

       @Override
       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {
                     return;
              }

              if (getWidth() == 0 || getHeight() == 0) {
                     return;
              }
              Bitmap b = ((BitmapDrawable) drawable).getBitmap();
              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getOvalCroppedBitmap(bitmap, w);
              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getOvalCroppedBitmap(Bitmap bitmap, int radius) {
              Bitmap finalBitmap;
              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                                  false);
              else
                     finalBitmap = bitmap;
              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                           finalBitmap.getHeight(), Config.ARGB_8888);
              Canvas canvas = new Canvas(output);

              Paint paint = new Paint();
              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                           finalBitmap.getHeight());

              paint.setAntiAlias(true);
              paint.setFilterBitmap(true);
              paint.setDither(true);
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(Color.parseColor("#BAB399"));
              RectF oval = new RectF(0, 0, 130, 150);
              canvas.drawOval(oval, paint);
              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, oval, paint);

              return output;
       }

}

Triangle Shape(三角形): 

package com.androidhub4you.crop;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class TriangleImageView extends ImageView {

       public TriangleImageView(Context ctx, AttributeSet attrs) {
              super(ctx, attrs);
       }

       @Override
       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {
                     return;
              }

              if (getWidth() == 0 || getHeight() == 0) {
                     return;
              }
              Bitmap b = ((BitmapDrawable) drawable).getBitmap();
              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
              Bitmap finalBitmap;
              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                                  false);
              else
                     finalBitmap = bitmap;
              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                           finalBitmap.getHeight(), Config.ARGB_8888);
              Canvas canvas = new Canvas(output);

              Paint paint = new Paint();
              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                           finalBitmap.getHeight());

              Point point1_draw = new Point(75, 0);
              Point point2_draw = new Point(0, 180);
              Point point3_draw = new Point(180, 180);

              Path path = new Path();
              path.moveTo(point1_draw.x, point1_draw.y);
              path.lineTo(point2_draw.x, point2_draw.y);
              path.lineTo(point3_draw.x, point3_draw.y);
              path.lineTo(point1_draw.x, point1_draw.y);
              path.close();
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(Color.parseColor("#BAB399"));
              canvas.drawPath(path, paint);
              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;
       }

}

Hexagonal Shape（六边形）: 
package com.androidhub4you.crop;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class HexagonImageView extends ImageView {

       public HexagonImageView(Context ctx, AttributeSet attrs) {
              super(ctx, attrs);
       }

       @Override
       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {
                     return;
              }

              if (getWidth() == 0 || getHeight() == 0) {
                     return;
              }
              Bitmap b = ((BitmapDrawable) drawable).getBitmap();
              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
              Bitmap finalBitmap;
              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                                  false);
              else
                     finalBitmap = bitmap;
              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                           finalBitmap.getHeight(), Config.ARGB_8888);
              Canvas canvas = new Canvas(output);

              Paint paint = new Paint();
              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                           finalBitmap.getHeight());

              Point point1_draw = new Point(75, 0);
              Point point2_draw = new Point(0, 50);
              Point point3_draw = new Point(0, 100);
              Point point4_draw = new Point(75, 150);
              Point point5_draw = new Point(150, 100);
              Point point6_draw = new Point(150, 50);

              Path path = new Path();
              path.moveTo(point1_draw.x, point1_draw.y);
              path.lineTo(point2_draw.x, point2_draw.y);
              path.lineTo(point3_draw.x, point3_draw.y);
              path.lineTo(point4_draw.x, point4_draw.y);
              path.lineTo(point5_draw.x, point5_draw.y);
              path.lineTo(point6_draw.x, point6_draw.y);

              path.close();
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(Color.parseColor("#BAB399"));
              canvas.drawPath(path, paint);
              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;
       }

}


罗新杰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义形状的ImageView制作
sinat_29696083的博客
08-06 2697
最近公司让我做个头像的显示功能，这个头像有点但疼痛，形状竟然像个盾牌！呵呵哒？！各种曲线，贝塞尔线，Android能不能搞啊？果断去问度娘啊！一搜，卧槽，还不少呢！参考了一个github上的一个项目，结合自己的努力终于马马虎虎完成了。这里和我一样的小菜鸟分享一下经验。 一、工具：Android Studio， Microsoft Expression Design。 大家可以在这里参考
android 布局圆变椭圆,Android实现自定义圆形、圆角和椭圆ImageView（使用Xfermode图形渲染方法）...
weixin_40007668的博客
05-27 469
一：简介：在上一篇这样可以省很多事情，比如测量步骤，以及不需要自己去写设置图片的方法，本文使用Xfermode模式中的DST_IN模式来实现要达到的效果，当然大家也可以采用其他的模式，比如SRC_IN等都可以实现该效果。(照例完整源代码在文章的最后给出下载地址哈)二：效果图： 三、Xfermode渲染模式简介：xfermode影响在Canvas已经有的图像上绘制新的颜色的方式* 正常的情况下,在图...
ovalimageview:适用于 Android 棒棒糖之前设备的椭圆形 ImageView
06-25
椭圆形图像视图 适用于 Android 棒棒糖之前设备的椭圆形 ImageView 版本 1.0.0 描述 适用于 Android 棒棒糖之前设备的椭圆形 ImageView 执照 在 Apache V2.0 许可下发布 作者 杜桑·
一个比较强大的提供各种形状的ImageView
gundumw100的专栏
04-10 1629
github上比较老的项目了，但是还是比较好用的。 各种形状总有一个满足你。 在自己的项目中使用，最好不要将所有的类都导入进来，取自己需要的就可以了。 <com.github.siyamed.shapeimageview.BubbleImageView android:id="@+id/image" android:layout_width="
Android自定义控件-不同形状的ImageView
杨长文的博客
06-28 811
实现分析： 依然是用到Paint的图层混合模式， 1、画一个你想要的形状 || 图片 2、修改Paint的图层混合模式，画图片。 3、然后就能得到你想要的形状的ImageViewpaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));设置模式 这2种模式都可以很简单的实现 SRC_IN: 在两者相交的地方绘制源图像，并且绘制的效果
android 菱形布局,Android 设计一个菱形形状的Imageview组件.
weixin_39683021的博客
05-26 89
使用PorterDuffXfermode, 可以看看图像合成Xfermode和任意形状ImageViewpublic class RectImageView extends ImageView {private Paint mPaint;private Xfermode mXfermode;private Bitmap mRectMask;public RectImageView(Context ...
可定制形状的ImageView
05-07
CustomShapeImageView 是一个可以自己定制ImageView形状的开源库，它通过使用 PorterDuffXfermode API，将图片及可缩放矢量图形(SVGs)结合实现多种可定制形状的ImageView。该库可用于自制像册或图片美化处理等类型的...
多种形状的图像视图效果ImageView
04-03
源码CustomShapeImageView，CustomShapeImageView是一个可以自己定制ImageView形状的开源库，它通过使用 PorterDuffXfermode API，将图片及可缩放矢量图形(SVGs)结合实现多种可定制形状的ImageView。该库可用于自制...
Android自定义聊天气泡形状ImageView.rar
07-10
这个“Android自定义聊天气泡形状ImageView”项目就是一个很好的例子，它允许开发者创建具有聊天气泡样式的ImageView，可以设置箭头的位置（左或右）以及图片的圆角大小。下面我们将深入探讨这一技术。 1. **自定义...
自定义ImageView
08-21
本文将深入探讨如何在Android中自定义`ImageView`以实现这些特殊形状。 首先，自定义`ImageView`通常涉及到继承`android.widget.ImageView`类，并重写其关键方法，如`onDraw()`。`onDraw()`方法是Android绘图的核心...
贝岭的matlab的代码-HexagonImageView:六角形显示头像图片
06-16
贝岭的matlab的代码 自定义六角形头像图片控件 ##效果图 最近笔者的一个朋友又委托我帮忙写一个六角形展示，公司给出的效果图，朋友在网上找不到相应的Demo，于是向笔者求助，笔者最近又不是太忙，所以就欣然答应。于是笔者就随便在网上找了一个圆形头像显示图片随意改了一下，下面是效果图 Demo下载地址 参考项目的地址 其实该起来也是非常的简单，下面就由笔者交单介绍一下项目的关键代码 ##项目的关键代码 ###声明一个画笔并设置BitmapShader 首先声明一个画图片的画笔，再给画笔设置shader //用于画图片的画笔 private BitmapShader mBitmapShader; //创建一个BitmapShader对象，并从布局文件的src中获取图片对象，即mBitmap，并传递给BitmapShader mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mBitmapPaint.setAntiAlias(true); //把BitmapSha
自定义六边形ImageView-源计划
10-09
有过后真得好用，并且有清晰的xml布局，属于你的蜂窝布局。
Android 自定义 RoundImageView 实现圆角矩形或圆形图片
云舒
08-19 1128
1、首先自定义一个RoundImageView，如下 package com.example.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.grap
自定义的形状ImageView
donghui_的博客
11-18 261
import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Colo
Android - 实现各种形状的ImageView
张亚运的专栏
09-08 5948
实现各种形状的ImageView要用到BitmapShader类，这个类的介绍如下：BitmapShader是Shader的子类，可以通过Paint.setShader（Shader shader）进行设置、这里我们只关注BitmapShader，构造方法：mBitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP
安卓imageview实现上面两个圆角下面两个直角的效果
热门推荐
编程小石头
11-16 1万+
安卓imageview实现上面两个圆角下面两个直接的效果
android六边形imageview
楠之枫雪的博客
08-22 2642
最近有个蜂巢布局的需求，需求实现android六边形imageview，实现了正：1.六边形图片截取显示。2.截取居中内容。效果如下：
Android自定义View之自定义每个角形状的ImageView
qq_34942689的博客
03-30 1472
前言： 在平常的项目中也许会遇见很多对页面展示有很多固定要求的控件View，各种美轮美奂的效果很是吸引人们的眼球！当然如果仅仅只是使用原生的一些控件来进行日常开发，一些基本的需求是完全可以满足的，可是针对一些拥有特殊属性的控件效果就远远不够了，这个时候就需要我们开发者来自己定义相应的View. 引入： 话不多说，先来看看效果图： 可以看到图中这个ImageView的四个角的显示是不
Android自定义六边形控件
Mhui
05-06 4764
Android自定义六边形控件一.效果图 二.核心算法 平面内一个坐标点是否在多边形内判断，使用射线法判断。从目标点出发引一条射线，看这条射线和多边形所有边的交点数目。如果是奇数个交点，则说明点在多边形内部；如果是偶数个交点，则说明在外部。 算法图解： 参考代码：int pnpoly(int nvert, float *vertx, float *verty, float testx, fl
Android ImageView与ImageButton深度解析
“Android高级控件开发课件，主要讲解了Android中的高级图片控件，包括ImageView和ImageButton的使用。” 在Android应用开发中，高级图片控件对于创建视觉丰富的用户界面至关重要。这门课程重点关注了两个核心组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值