帶弧度的圖片,三種實(shí)現(xiàn)方法(RoundImageView灵临,ShapeableImageView(推薦)截型,Glide加載(推薦))

方法1:

a.自定義RoundImageView

package app.downloadall.helptool.utils;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import androidx.appcompat.widget.AppCompatImageView;

public class RoundImageView extends AppCompatImageView {
    float width, height;
    private int defaultRadius = 20;
    private int radius;
    private int leftTopRadius;
    private int rightTopRadius;
    private int rightBottomRadius;
    private int leftBottomRadius;

    public RoundImageView(Context context) {
        this(context, null);
        init(context, null);
    }

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

    public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        // 讀取配置
        @SuppressLint("CustomViewStyleable")
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        radius = array.getDimensionPixelOffset(R.styleable.RoundImageView_radius, defaultRadius);
        leftTopRadius = array.getDimensionPixelOffset(R.styleable.RoundImageView_left_top_radius, defaultRadius);
        rightTopRadius = array.getDimensionPixelOffset(R.styleable.RoundImageView_right_top_radius, defaultRadius);
        rightBottomRadius = array.getDimensionPixelOffset(R.styleable.RoundImageView_right_bottom_radius, defaultRadius);
        leftBottomRadius = array.getDimensionPixelOffset(R.styleable.RoundImageView_left_bottom_radius, defaultRadius);


        //如果四個角的值沒有設(shè)置,那么就使用通用的radius的值儒溉。
        if (defaultRadius == leftTopRadius) {
            leftTopRadius = radius;
        }
        if (defaultRadius == rightTopRadius) {
            rightTopRadius = radius;
        }
        if (defaultRadius == rightBottomRadius) {
            rightBottomRadius = radius;
        }
        if (defaultRadius == leftBottomRadius) {
            leftBottomRadius = radius;
        }
        array.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = getWidth();
        height = getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //這里做下判斷宦焦,只有圖片的寬高大于設(shè)置的圓角距離的時候才進(jìn)行裁剪
        int maxLeft = Math.max(leftTopRadius, leftBottomRadius);
        int maxRight = Math.max(rightTopRadius, rightBottomRadius);
        int minWidth = maxLeft + maxRight;
        int maxTop = Math.max(leftTopRadius, rightTopRadius);
        int maxBottom = Math.max(leftBottomRadius, rightBottomRadius);
        int minHeight = maxTop + maxBottom;
        if (width >= minWidth && height > minHeight) {
            @SuppressLint("DrawAllocation")
            Path path = new Path();
            //四個角:右上,右下顿涣,左下波闹,左上
            path.moveTo(leftTopRadius, 0);
            path.lineTo(width - rightTopRadius, 0);
            path.quadTo(width, 0, width, rightTopRadius);

            path.lineTo(width, height - rightBottomRadius);
            path.quadTo(width, height, width - rightBottomRadius, height);

            path.lineTo(leftBottomRadius, height);
            path.quadTo(0, height, 0, height - leftBottomRadius);

            path.lineTo(0, leftTopRadius);
            path.quadTo(0, 0, leftTopRadius, 0);

            canvas.clipPath(path);
        }
        super.onDraw(canvas);
    }
}

b.添加styles

    <declare-styleable name="RoundImageView">
        <attr name="radius" format="dimension" />
        <attr name="left_top_radius" format="dimension" />
        <attr name="right_top_radius" format="dimension" />
        <attr name="right_bottom_radius" format="dimension" />
        <attr name="left_bottom_radius" format="dimension" />
    </declare-styleable>

方法2:(推薦)

使用ShapeableImageView,這個目前google封裝的涛碑,還是很好用的

a.添加依賴

    implementation 'com.google.android.material:material:1.3.0'

b.xml直接引用

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/im_shapeable"
        app:shapeAppearanceOverlay="@style/ShapeableCircleImageStyle"
        android:layout_width="100dp"
        android:layout_height="126dp"
        android:src="@mipmap/img"/>

c.常用style添加(可根據(jù)情況自由添加切角和弧度)

<!-- 帶有弧度的圖片 -->
<style name="ShapeableCircleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">10%</item>
</style>

<!-- 圓形圖片(特殊的弧度圖片) -->
<style name="ShapeableCircleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 右上角90度扇形圖片(特殊的弧度圖片) -->
<style name="ShapeableTopLeftRoundImageStyle">
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopRight">100%</item>
</style>

<!-- 葉子圖片(特殊的弧度圖片) -->
<style name="ShapeableLeafImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>

<!-- 八邊形(切角圖片) -->
<style name="ShapeableCutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">10dp</item>
</style>

<!-- 菱形圖片(切角圖片) -->
<style name="ShapeablePrismaticImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

d.邊框添加(需要添加padding精堕,否則會有一部分看不到)

<com.google.android.material.imageview.ShapeableImageView
        ...
        app:strokeWidth="2dp"
        android:padding="1dp"
        app:strokeColor="@color/colorPrimaryDark"
        />

方法3:(推薦)

//帶弧度
Glide.with(mContext)
                .load(...)
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(20)))
                .into(holder.wImageiew);
//圓
Glide.with(mContext)
                .load(...)
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(holder.wImageiew);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蒲障,隨后出現(xiàn)的幾起案子歹篓,更是在濱河造成了極大的恐慌,老刑警劉巖揉阎,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件庄撮,死亡現(xiàn)場離奇詭異,居然都是意外死亡毙籽,警方通過查閱死者的電腦和手機(jī)洞斯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坑赡,“玉大人巡扇,你說我怎么就攤上這事】逯裕” “怎么了厅翔?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長搀突。 經(jīng)常有香客問我刀闷,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任甸昏,我火速辦了婚禮顽分,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘施蜜。我一直安慰自己卒蘸,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布翻默。 她就那樣靜靜地躺著缸沃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪修械。 梳的紋絲不亂的頭發(fā)上趾牧,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天,我揣著相機(jī)與錄音肯污,去河邊找鬼翘单。 笑死,一個胖子當(dāng)著我的面吹牛蹦渣,可吹牛的內(nèi)容都是我干的哄芜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼柬唯,長吁一口氣:“原來是場噩夢啊……” “哼认臊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起权逗,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤美尸,失蹤者是張志新(化名)和其女友劉穎冤议,沒想到半個月后斟薇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡恕酸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年堪滨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蕊温。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡袱箱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出义矛,到底是詐尸還是另有隱情发笔,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布凉翻,位于F島的核電站了讨,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜前计,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一胞谭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧男杈,春花似錦丈屹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至苞冯,卻和暖如春袖牙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舅锄。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工鞭达, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人皇忿。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓畴蹭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鳍烁。 傳聞我的和親對象是個殘疾皇子叨襟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容