android 顶部圆角搜索栏安卓圆角图标

转载

imking 2023-09-05 21:28:36

文章标签 android 顶部圆角搜索栏 android 圆形图片圆角图片绘制 文章分类 Android 移动开发

android图片的圆形圆角图片的设计有多种方式

1、使用框架

2、自定义组件

3、图片剪切

下面从最简单的框架开始介绍

1、使用框架，

Fresco是Facebook提供的开源图片加载库，Fresco中实现了各种加载过程以及加载后的图片绘制，整体都很强大。

下面简单介绍Fresco的使用。（当然你也可以使用其他框架）

https://www.fresco-cn.org/docs/getting-started.html

1.1 添加依赖

compile 'com.facebook.fresco:fresco:0.14.1'

1.2 自定义一个application初始化

public class MyApplication extends Application{
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

//新建好MyApplication后在 AndroidManifest.xml的Application标签中添加
android:name=".MyApplication"
//记得申请号网络权限
<uses-permission android:name="android.permission.INTERNET"/>

1.3在布局中添加一个组件，该组件就是用来处理后的图片的

<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/img1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundedCornerRadius="20dp" />

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/img2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="20dp" />

圆角，圆形图片的实现很简单，img1为圆角图片圆角大小20dp。img2为圆形图片。

在MainActivity中加载网络上的图片。over

SimpleDraweeView img1= (SimpleDraweeView) findViewById(R.id.id_main_sdv);
        Uri uri = Uri.parse("http://www.pptok.com/wp-content/uploads/2012/08/xunguang-9.jpg");
        //draweeView.setImageURI(uri);
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setAutoPlayAnimations(true)
                .build();
        img1.setController(controller);

        SimpleDraweeView img2= (SimpleDraweeView) findViewById(R.id.drawee_img);
        uri = Uri.parse("http://www.pptok.com/wp-content/uploads/2012/08/xunguang-9.jpg");
        //draweeView.setImageURI(uri);
        controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setAutoPlayAnimations(true)
                .build();
        img2.setController(controller);

2、自定义组件圆形圆角组件

2.1首先自定义一个组件类CircleImageView

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by 林亮 on 2019/1/13
 */

public class CircleImageView extends AppCompatImageView {
    private float width;
    private float height;
    private float radius;
    private Paint paint;
    private Matrix matrix;

    public CircleImageView(Context context) {
        this(context, null);
    }

    public CircleImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setAntiAlias(true);   //设置抗锯齿
        matrix = new Matrix();      //初始化缩放矩阵
    }

    /**
     * 测量控件的宽高，并获取其内切圆的半径
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
        radius = Math.min(width, height) / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            super.onDraw(canvas);
            return;
        }
        if (drawable instanceof BitmapDrawable) {
            paint.setShader(initBitmapShader((BitmapDrawable) drawable));//将着色器设置给画笔
            canvas.drawCircle(width / 2, height / 2, radius, paint);//使用画笔在画布上画圆
            return;
        }
        super.onDraw(canvas);
    }

    /**
     * 获取ImageView中资源图片的Bitmap，利用Bitmap初始化图片着色器,通过缩放矩阵将原资源图片缩放到铺满整个绘制区域，避免边界填充
     */
    private BitmapShader initBitmapShader(BitmapDrawable drawable) {
        Bitmap bitmap = drawable.getBitmap();
        BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = Math.max(width / bitmap.getWidth(), height / bitmap.getHeight());
        matrix.setScale(scale, scale);//将图片宽高等比例缩放，避免拉伸
        bitmapShader.setLocalMatrix(matrix);
        return bitmapShader;
    }
}

在布局文件中直接使用改组件即可

<com.zhengyuan.imageload.CircleImageView
        android:id="@+id/image1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />

2.2实现了自定义圆形图片组件，接下来自定义圆角图片组件

package com.zhengyuan.imageload;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
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.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by 林亮 on 2019/1/13
 */

public class RoundRectImageView extends AppCompatImageView {
    private Paint paint;

    public RoundRectImageView(Context context) {
        this(context,null);
    }

    public RoundRectImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RoundRectImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        paint  = new Paint();
    }

    /**
     * 绘制圆角矩形图片
     * @author caizhiming
     */
    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            Bitmap b = getRoundBitmap(bitmap, 20);
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());
            final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);

        } else {
            super.onDraw(canvas);
        }
    }

    /**
     * 获取圆角矩形图片方法
     * @param bitmap
     * @param roundPx,圆角的弧度
     * @return Bitmap
     * @author caizhiming
     */
    private Bitmap getRoundBitmap(Bitmap bitmap, int roundPx) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;

        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        int x = bitmap.getWidth();

        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }
}

直接在布局文件中使用该组件即可，

<com.zhengyuan.imageload.RoundRectImageView
        android:id="@+id/roundRectImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/image" />

注意测试过程中尽量使用小图，我就遇到了OOM的问题

3、图片剪切实现圆形图片

通过裁剪实现图片的圆角化，

public static Bitmap createCircleImage(Bitmap source) {
        int length = source.getWidth() < source.getHeight() ? source.getWidth() : source.getHeight();


        Paint paint = new Paint();//画笔
        paint.setAntiAlias(true);//抗锯齿方法
        Bitmap target = Bitmap.createBitmap(length, length, Bitmap.Config.ARGB_8888);//ARGB_8888 : 4bytes 每个像素占据4 个字节
        Canvas canvas = new Canvas(target);//画布

        canvas.drawCircle(length / 2, length / 2, length / 2, paint);//绘制圆
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
    }

    /**
     * 根据原图添加圆角
     *
     * @param source
     * @return
     */
    public static Bitmap createRoundConerImage(Bitmap source) {
        int mWidth = source.getWidth();
        int mHeight = source.getHeight();
        int mRadius = 50;


        Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Bitmap.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;
    }

这两个函数是一样的，只是将圆角设置成length/2就显示成了圆形图片。

将返回的bitmap直接在imageview中显示即可。其实裁剪还有其他的擦裁剪方式，下面是我从网上找的图片。

android 顶部圆角搜索栏安卓圆角图标_android 顶部圆角搜索栏