实现图片下凹效果

最新推荐文章于 2025-05-27 21:41:06 发布

neabea2016

最新推荐文章于 2025-05-27 21:41:06 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/neabea2016/article/details/80727597

Android 专栏收录该内容

81 篇文章

订阅专栏

这里写图片描述

1新建自定义ImageView

package atyh.road;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

@SuppressLint("AppCompatCustomView")
public class ArcImageView extends ImageView{
    private int mArcHeight;
    private static final String TAG = "ArcImageView";
    public ArcImageView(Context context) {
        this(context, null);
    }
    public ArcImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ArcImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ArcImageView);
        mArcHeight = typedArray.getDimensionPixelSize(R.styleable.ArcImageView_arcHeight, 0);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        path.moveTo(0,0);
        path.lineTo(0, getHeight() - mArcHeight);  
        path.quadTo(getWidth() / 2, getHeight(), getWidth(), getHeight() - mArcHeight);
        path.lineTo(getWidth(), 0);
        path.close();
        canvas.clipPath(path);     
        super.onDraw(canvas);
    }
}

2.res->value->attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="arcHeight" format="dimension"/>

    <!--<declare-styleable name="ArcView">-->
        <!--<attr name="arcHeight"/>-->
        <!--<attr name="bgColor" format="color"/>-->
    <!--</declare-styleable>-->

    <declare-styleable name="ArcImageView">
        <attr name="arcHeight"/>
    </declare-styleable>

</resources>

3.在layout中导入布局，areHeight值越大，下凹的弧度越大

  <atyh.road.ArcImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:arcHeight="150dp"
        android:scaleType="center"
        android:src="@drawable/test3"
        />