Android 利用RectF画一个类似聊天框弹出样式

最新推荐文章于 2023-03-31 15:05:35 发布

原创最新推荐文章于 2023-03-31 15:05:35 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种自定义PopupWindow视图的方法，通过绘制矩形和三角形实现特定样式，包括设置颜色和角大小等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目的一个类似聊天样式的popupwindow测试小美女说里面的字体垂直间距不一样，设计切的图会有一个小三角号嘛，我们代码里没法弄成dp啊，所以自定义一个吧。这样就ok了。看下效果：

自定义view的时候，要用到RectF，它的四个属性left,top,right,bottom 用到x或者y轴会有些抽象。做一下图解笔记:

看懂了上图，ps我也不知道你能看懂不~

看代码：

1.自定义属性：这里不啰嗦，网上一大堆

<declare-styleable name="CustomPopupView">
        <attr name="pop_color" format="color" />
        <attr name="pop_horn" format="dimension" />
    </declare-styleable>

2.上面那个图拆开看是一个两个矩形，所以要画一个大矩形，也就是我们指定的大小

  //画外框
        RectF full = new RectF();
        full.set(0,0,getWidth(),getHeight());
        canvas.drawRect(full,mPaint);

3.画里面我们用到的矩形，ps其实就是那个黑框。距离顶部的间距我这里设置的为角的高度

  RectF rect = new RectF();
        rect.set(0,horn,getWidth(),getHeight());
        canvas.drawRect(rect,mPaint);

ps：不知道你有没有看到这里的top位置是从角的高度开始画的,预留的高度画那个三角

4.画三角形

 Path path = new Path();
        float start = rect.width()-horn-marginRight;//起始位置x
        float center = rect.width()-horn/2-marginRight;//拐弯的x

        path.moveTo(start,horn);//起始点
        path.lineTo(center,0);
        path.lineTo(rect.width()-marginRight,horn);
        path.close();//结束
        canvas.drawPath(path,mPaint);

贴一下全部的代码:

/**
 * 作者：lixiaopeng on 2017/7/25 0025.
 * 邮箱：lixiaopeng186@163.com
 * 描述：
 */

public class CustomPopupView extends LinearLayout {

    private Paint mPaint;
    private int color;//颜色
    private float horn;//角大小

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

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

    public CustomPopupView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomPopupView);
        color = array.getColor(R.styleable.CustomPopupView_pop_color,Color.BLACK);
        horn = array.getDimension(R.styleable.CustomPopupView_pop_horn,10);
        array.recycle();
        mPaint = new Paint();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float marginRight = horn/2;//距离左侧的间距
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.TRANSPARENT);
        //画外框
        RectF full = new RectF();
        full.set(0,0,getWidth(),getHeight());
        canvas.drawRect(full,mPaint);
        mPaint.reset();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(color);
        //画内框
        RectF rect = new RectF();
        rect.set(0,horn,getWidth(),getHeight());
        canvas.drawRect(rect,mPaint);
        //画三角形
        Path path = new Path();
        float start = rect.width()-horn-marginRight;//起始位置x
        float center = rect.width()-horn/2-marginRight;//拐弯的x

        path.moveTo(start,horn);//起始点
        path.lineTo(center,0);
        path.lineTo(rect.width()-marginRight,horn);
        path.close();//结束
        canvas.drawPath(path,mPaint);


    }

}

使用：

<com.test.demo.view.widget.CustomPopupView
        android:id="@+id/menu_popup_anima"
        android:layout_width="130dp"
        android:layout_height="140dp"
        android:orientation="vertical"
        app:pop_color="#48494b"
        app:pop_horn="20dp"
        android:background="@color/transparent"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_marginTop="20dp"
            android:orientation="horizontal" >
            </LinearLayout>
        <LinearLayout
            ....../>
        </com.test.demo.view.widget.CustomPopupView>