| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
Aly08K
8年前发布

Android圆形图片不求人,自定义View实现(BitmapShader使用)

   <p>在很多APP当中,圆形的图片是必不可少的元素,美观大方。本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情。</p>    <h3><strong>一、先上效果图</strong></h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f5b8963c8152e28a198696ba394d640a.png"></p>    <h3><strong>二、实现思路</strong></h3>    <ul>     <li>在定义View 的onMeasure()方法里设置View的宽高相等,应该取宽高中的最小值。</li>     <li>在自定义View的onDraw()里面使用画笔paint结合BitmapShaper画出一个圆形区域。</li>     <li>上述两步已经可以实现一个圆形图片,但是如果图片大于View的设定的宽高,则只会绘制左上角的局域,内容显示不完全(如下图)。因此,还应该做好图片的缩放。</li>    </ul>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a4ac23bbb8d2991ecac0084df42a9d37.png"></p>    <h3><strong>三、具体实现</strong></h3>    <p>1.新建一个java类 CircleImageView继承 ImageView,这个是完整的代码。</p>    <pre>  <code class="language-java">public class CircleImageView extends ImageView {        private Paint mPaint; //画笔        private int mRadius; //圆形图片的半径        private float mScale; //图片的缩放比例        public CircleImageView(Context context) {          super(context);      }        public CircleImageView(Context context, AttributeSet attrs) {          super(context, attrs);      }        public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {          super(context, attrs, defStyleAttr);      }        @Override      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {          super.onMeasure(widthMeasureSpec, heightMeasureSpec);          //因为是圆形图片,所以应该让宽高保持一致          int size = Math.min(getMeasuredWidth(), getMeasuredHeight());          mRadius = size / 2;            setMeasuredDimension(size, size);      }        @Override      protected void onDraw(Canvas canvas) {            mPaint = new Paint();          Bitmap bitmap = drawableToBitmap(getDrawable());            //初始化BitmapShader,传入bitmap对象          BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);            //计算缩放比例          mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());            Matrix matrix = new Matrix();          matrix.setScale(mScale, mScale);          bitmapShader.setLocalMatrix(matrix);              mPaint.setShader(bitmapShader);            //画圆形,指定好中心点坐标、半径、画笔          canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);      }        //写一个drawble转BitMap的方法      private Bitmap drawableToBitmap(Drawable drawable) {          if (drawable instanceof BitmapDrawable) {              BitmapDrawable bd = (BitmapDrawable) drawable;              return bd.getBitmap();          }          int w = drawable.getIntrinsicWidth();          int h = drawable.getIntrinsicHeight();          Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);          Canvas canvas = new Canvas(bitmap);          drawable.setBounds(0, 0, w, h);          drawable.draw(canvas);          return bitmap;      }  }</code></pre>    <p>2. onMeasure()方法里面,计算好宽高</p>    <p>因为是圆形图片,所以应该让宽高保持一致,取测量尺寸宽高中的最小值最为最终结果。</p>    <pre>  <code class="language-java">@Override      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {          super.onMeasure(widthMeasureSpec, heightMeasureSpec);          //因为是圆形图片,所以应该让宽高保持一致          int size = Math.min(getMeasuredWidth(), getMeasuredHeight());          mRadius = size / 2;            setMeasuredDimension(size, size);      }</code></pre>    <p>3. onDraw()方法里面画出圆形图片,注意看注释,很详细。</p>    <pre>  <code class="language-java">@Override      protected void onDraw(Canvas canvas) {            mPaint = new Paint();          Bitmap bitmap = drawableToBitmap(getDrawable());            //初始化BitmapShader,传入bitmap对象          BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);            //计算缩放比例          mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());            Matrix matrix = new Matrix();          matrix.setScale(mScale, mScale);          bitmapShader.setLocalMatrix(matrix);              mPaint.setShader(bitmapShader);            //画圆形,指定好中心点坐标、半径、画笔          canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);      }</code></pre>    <p>4. 上一步中的将drwable转换为bitmap的方法。</p>    <pre>  <code class="language-java">//写一个drawble转BitMap的方法      private Bitmap drawableToBitmap(Drawable drawable) {          if (drawable instanceof BitmapDrawable) {              BitmapDrawable bd = (BitmapDrawable) drawable;              return bd.getBitmap();          }          int w = drawable.getIntrinsicWidth();          int h = drawable.getIntrinsicHeight();          Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);          Canvas canvas = new Canvas(bitmap);          drawable.setBounds(0, 0, w, h);          drawable.draw(canvas);          return bitmap;      }</code></pre>    <h3><strong>四、使用该自定义View</strong></h3>    <p>1. 布局文件里面使用,此处使用了斯嘉丽的美图</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/75d02d69169d19530db597cba6e9405e.jpg"></p>    <p> </p>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>  <RelativeLayout      xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/activity_main"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context="com.roundimage.MainActivity"      >        <com.roundimage.CircleImageView          android:id="@+id/image1"          android:layout_width="200dp"          android:layout_height="200dp"          android:layout_centerInParent="true"          android:scaleType="centerCrop"          android:src="@drawable/beauty"          />      <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_below="@+id/image1"          android:layout_centerHorizontal="true"          android:layout_marginTop="10dp"          android:text="斯嘉丽·约翰逊"          android:textColor="#333333"          android:textSize="17sp"          />  </RelativeLayout></code></pre>    <p>2. 各种效果图,用于验证适应性</p>    <ul>     <li>尺寸都指定为200dp</li>    </ul>    <pre>  <code class="language-java">android:layout_width="200dp"     android:layout_height="200dp"</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f5b8963c8152e28a198696ba394d640a.png"></p>    <ul>     <li>尺寸都指定为100dp</li>    </ul>    <pre>  <code class="language-java">android:layout_width="100dp"     android:layout_height="100dp"</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6a27c45e9dca540fc5db36edcd9529a5.png"></p>    <ul>     <li>尺寸都指定不一样,一个150,一个400</li>    </ul>    <pre>  <code class="language-java">android:layout_width="100dp"     android:layout_height="200dp"</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3f7b23cfcf5dd75bd089e954bb61520b.png"></p>    <ul>     <li>尺寸设定为wrap_content</li>    </ul>    <pre>  <code class="language-java">android:layout_width="wrap_content"    android:layout_height="wrap_content"</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f5921a5bf509b829e9d6b30088b6b2d7.png"></p>    <h3><strong>五、总结</strong></h3>    <p>实现圆形图片有很多种方法:</p>    <ul>     <li> <p>可以使用一些开源框架如Fresco,这个可以参考本人的另一篇博客 Fresco图片框架简介及使用</p> </li>     <li> <p>笨办法,让视觉给到一张圆形图片(如果每张图都需要处理,可能她会打死你)</p> </li>     <li> <p>笨办法,用一个view在上面挡住(这个我写的自己都笑了)</p> </li>     <li> <p>自定义View,就如本文介绍的。</p> </li>     <li> <p>自定义Drawble,这个和自定义view可以相互补充。</p> </li>    </ul>    <p>总之,通过以上各个不同属性验证,可以发现本文的自定义View完美的实现了圆形图片。如果读者有需要圆形图的,可以把这个copy一下自己用,就一个类,简单精巧。</p>    <p>如果觉得本文对你有帮助,请关注、留言、点赞我,谢谢!</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/6b5eef0f6f3d</p>    <p> </p>    
 本文由用户 Aly08K 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1479367170755.html
Bitmap 安卓开发 Android开发 移动开发