Android 自定义ImageView实现圆角/圆形附加OnTouchListener详细注释以及Button圆角

最新推荐文章于 2024-05-17 17:32:28 发布

王亟亟

最新推荐文章于 2024-05-17 17:32:28 发布

阅读量5.4k

点赞数 3

分类专栏： android资源文章标签： android imageview 控件

本文链接：https://blog.csdn.net/ddwhan0123/article/details/47421593

版权

本文介绍如何使用ImageView实现圆角和圆形效果，包括Button的圆角设置。通过shape.xml定义Button的倒角，attr.xml定义自定义ImageView的标签。详细解析了CycleImageView的实现，以及在XML和Activity中的应用。还讨论了ids.xml的必要性和OnTouchListener的使用。此方法适用于特殊形状需求和交互操作，如加速球功能。

摘要由CSDN通过智能技术生成

转载请注明出处：王亟亟的大牛之路

平时要用一些非方方正正的按钮之类的小伙伴们是如何实现的？RadioButton?ImageButton?还是其他？
今天亟亟上的是ImageView来实现的
先上下效果图（目录结构）
这里写图片描述

分析：

shape.xml用于Button的”倒角”（做过机械类的都懂，哈哈）
attr.xml用于自定义ImageView的标签的定义
ids.xml用于控件findbyid用，为什么补+id 等会我会来解释

效果图：

这里写图片描述
分析：一个Button 2个自定义ImageView然后这 3个东西都可以拖拽啊，点击啊等操作，我们来分析下代码。

先从圆角Button开始：

 <Button
        android:id="@+id/touch_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="快来按我" 
        android:background="@drawable/shape"/>

没什么特别的区别，只是因为@drawable/shape使得他的样式产生了变化
shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid android:color="#00FF00" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="25dip" />

<!-- padding：Button里面的文字与Button边界的间隔 -->
<padding
   android:left="10dp"
   android:top="10dp"
   android:right="10dp"
   android:bottom="10dp"
/>
</shape>

Button就简单的实现了

CycleImageView

public class CycleImageView extends ImageView
{
   

    private Paint mPaint;
    private Xfermode mXfermode = new PorterDuffXfermode(Mode.DST_IN);
    private Bitmap mMaskBitmap;

    private WeakReference<Bitmap> mWeakBitmap;

    /**
     * 图片的类型，圆形or圆角
     */
    private int type;
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;
    /**
     * 圆角大小的默认值
     */
    private static final int BODER_RADIUS_DEFAULT = 10;
    /**
     * 圆角的大小
     */
    private int mBorderRadius;

    public CycleImageView(Context context)
    {
        this(context,null);
        this.setOnTouchListener(new CustomOnTouchOnGesture());
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    public CycleImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        this.setOnTouchListener(new CustomOnTouchOnGesture());
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CycleImageView);

        mBorderRadius = a.getDimensionPixelSize(
                R.styleable.CycleImageView_borderRadius, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                BODER_RADIUS_DEFAULT, getResources()
                                        .getDisplayMetrics()));// 默认为10dp
        Log.e("TAG", mBorderRadius+"");
        type = a.getInt(R.styleable.CycleImageView_type, TYPE_CIRCLE);// 默认为Circle

        a.recycle();
    }

    @Override