ViewOutlineProvider设置圆角矩形等形状

Quibbler 2月前 256

ViewOutlineProvider设置圆角矩形等形状


        在项目开发中,为了让图片显示得更加美观,通常 UI 会设计成圆角矩形或圆形效果。介绍一种简单的原生方法设置圆角。


        ViewOutlineProvider是Android 5.x引入的新特性(SDK_INT >= 21),它是View包中的类,用于实现View的阴影和轮廓。用ViewOutlineProvider可以快捷地实现控件的圆角(Kotlin实现),通过Outline中的setRoundRect/setOval方法来设置圆角矩形、椭圆等形状,还有其它API方法可以自行了解。

    val outlineProvider  = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            // 设置圆角率为
            outline.setRoundRect(0, 0, view.width, view.height, radius)
            
            //或者设置圆形
            outline?.setOval(0, 0, it.width, it.height)
        }
    }

        再通过ViewsetOutlineProvider(ViewOutlineProvider provider)方法将自定义的ViewOutlineProvider设置给View

    view.outlineProvider =  outlineProvider

        最后别忘了启用Outline

    //视图会根据outlineProvider提供的轮廓进行裁剪。任何超出轮廓的部分都会被裁剪掉
    view.clipToOutline = true



        ViewOutlineProvider内置三种默认的实现BACKGROUNDBOUNDSPADDED_BOUNDS

        BACKGROUND:使用视图的背景(Background)来确定轮廓边界(如果视图没有背景,则轮廓将不会生效)。视图的背景可以是一个 Drawable,例如 ShapeDrawable BitmapDrawable。轮廓会根据背景的形状进行调整。适用场景:当你需要根据视图的背景来设置轮廓时,例如背景是一个圆形或椭圆形的 Drawable

    /**
     * Default outline provider for Views, which queries the Outline from the View's background,
     * or generates a 0 alpha, rectangular Outline the size of the View if a background
     * isn't present.
     *
     * @see Drawable#getOutline(Outline)
     */
    public static final ViewOutlineProvider BACKGROUND = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            Drawable background = view.getBackground();
            if (background != null) {
                background.getOutline(outline);
            } else {
                outline.setRect(0, 0, view.getWidth(), view.getHeight());
                outline.setAlpha(0.0f);
            }
        }
    };

        BOUNDS:使用视图的边界(Bounds)来确定轮廓边界。轮廓会根据视图的宽高来设置,形成一个矩形轮廓。适用场景:当你需要一个简单的矩形轮廓时,例如给一个普通的View添加圆角效果。

    /**
     * Maintains the outline of the View to match its rectangular bounds,
     * at <code>1.0f</code> alpha.
     *
     * This can be used to enable Views that are opaque but lacking a background cast a shadow.
     */
    public static final ViewOutlineProvider BOUNDS = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setRect(0, 0, view.getWidth(), view.getHeight());
        }
    };

        PADDED_BOUNDS:使用视图的边界加上内边距(Padding)来确定轮廓边界。轮廓会根据视图的宽高和内边距来设置,形成一个矩形轮廓。适用场景:当你需要在视图的内边距之外添加轮廓时,例如给一个有内边距的View添加圆角效果。

    /**
     * Maintains the outline of the View to match its rectangular padded bounds,
     * at <code>1.0f</code> alpha.
     *
     * This can be used to enable Views that are opaque but lacking a background cast a shadow.
     */
    public static final ViewOutlineProvider PADDED_BOUNDS = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setRect(view.getPaddingLeft(),
                    view.getPaddingTop(),
                    view.getWidth() - view.getPaddingRight(),
                    view.getHeight() - view.getPaddingBottom());
        }
    };

        

不忘初心的阿甘
最新回复 (0)
    • 安卓笔记本
      2
        登录 注册 QQ
返回
仅供学习交流,切勿用于商业用途。如有错误欢迎指出:fluent0418@gmail.com