Drawable - 创建伸出聊天气泡的尖角

Question

我怎样才能让我的聊天框的一角向外延伸？我尝试更改左上半径，但它没有延伸出气泡。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorWhite" />
    <corners
        android:topLeftRadius="15dp"
      />
</shape>

我想要的样子：

Answer 1

您可以像这样创建一个非常简单的自定义视图：

public class MyCustomView extends LinearLayout {

    private Paint paint;
    private Path path;

    public MyCustomView(@NonNull Context context) {
        super(context);
        init();
    }

    public MyCustomView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public MyCustomView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(0xffffffff);
        setBackground(getResources().getDrawable(R.drawable.rect_r));
    }

    private Path getPath() {
        Path path = new Path();
        path.moveTo(-dpToPx(10), dpToPx(0));
        path.lineTo(dpToPx(4), dpToPx(0));
        path.lineTo(dpToPx(4), dpToPx(10));
        path.lineTo(-dpToPx(10), dpToPx(0));

        return path;
    }

    private float dpToPx(int dp) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getDisplay().getMetrics(displayMetrics);
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);
        super.onDraw(canvas);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        path = getPath();
    }
}

rect_r.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff"/>
    <corners android:radius="4dp"/>
</shape>

确保将 android:clipChildren="false" 添加到父布局。

示例：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E53935"
    android:clipChildren="false">

        <com.example.example.MyCustomView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerInParent="true">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:layout_margin="16dp"
                android:text="your text"/>

        </com.example.example.MyCustomView>

</RelativeLayout>

Answer 2

试试这个

- 接收聊天气泡

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Shadow Layers-->

    <item>
        <rotate
            android:fromDegrees="-35"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"/>
                <solid android:color="#01000000" />
            </shape>
        </rotate>
    </item>
    <item android:left="8dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#01000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <!--===============-->
    <item>
        <rotate
            android:fromDegrees="-35"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <padding
                    android:bottom="1px" />
                <solid android:color="#09000000" />
            </shape>
        </rotate>
    </item>
    <item android:left="8dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="1px" />
            <solid android:color="#09000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <!--===============-->

    <item>
        <rotate
            android:fromDegrees="-35"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"/>
                <solid android:color="#10000000" />
            </shape>
        </rotate>
    </item>
    <item android:left="8dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#10000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <!--ForeGround-->

    <item>
        <rotate
            android:fromDegrees="-35"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp"/>
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
    <item android:left="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="8dp" />
        </shape>
    </item>

</layer-list>

- 已发送聊天气泡

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--Shadow Layer-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp" />
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px" />
                <solid android:color="#01000000" />
            </shape>
        </rotate>
    </item>
    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#01000000" />
        </shape>
    </item>

    <!--===============-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp" />
                <padding android:bottom="1px" />
                <solid android:color="#09000000" />
            </shape>
        </rotate>
    </item>
    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </item>

    <!--===============-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <corners android:radius="4dp" />
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px" />
                <solid android:color="#10000000" />
            </shape>
        </rotate>
    </item>
    <item android:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#10000000" />
        </shape>
    </item>

    <!--===============-->


    <!--ForeGround-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
    <item android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="4dp" />
        </shape>
    </item>

</layer-list>

- 领取聊天泡泡九补丁

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <item
        android:bottom="5dp"
        android:left="15dp"
        android:right="10dp"
        tools:height="50dp"
        tools:width="50dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:bottom="15dp"
        android:gravity="left"
        android:left="5dp"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:bottom="15dp"
        android:gravity="right"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:bottom="5dp"
        android:gravity="bottom|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z" />
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z" />
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|left"
        android:left="5dp">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z" />
        </vector>
    </item>

    <item
        android:width="15dp"
        android:height="15dp"
        android:gravity="bottom|left">
        <vector
            android:width="15dp"
            android:height="15dp"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M150,100 L150,0 L50,0 C50,11.9054549 52.5180742,22.2130322 55.2200144,32.2289993 C59.25,47.1679688 65.7054859,60.8615415 68.15625,65.5820312 C55.2200144,107.207031 41.7460938,127.800781 0,151 C61.5311854,147.539062 101.691406,129.675781 124.615295,97.6602593 C132.823321,99.8389881 141.106342,100 150,100 Z" />
        </vector>
    </item>

</layer-list>

- 已发送聊天泡泡九补丁

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:left="10dp"
        android:right="15dp"
        android:bottom="5dp"
        tools:width="50dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="15dp"
        android:gravity="left"
        android:width="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="15dp"
        android:right="5dp"
        android:gravity="right"
        android:width="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:bottom="5dp"
        android:gravity="bottom|left">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M0,0 A10,10 0 0,0 10,10 L10,0 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:right="5dp"
        android:gravity="top|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|left">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="15dp"
        android:height="15dp"
        android:gravity="bottom|right">
        <vector
            android:width="15dp"
            android:height="15dp"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:pathData="M0,100 C7.67309143,100 14.1935201,100.346373 20.500756,99.0996492 C43.6628959,129.872031 94.1698247,146.306561 150.320843,150.792562 C113.168693,130.799632 87.2808993,98.5054948 81.0808824,68.6524321 C94.1277117,51.7595331 100,23.9957121 100,0 L0,0 L0,100 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

</layer-list>

希望对您有所帮助！

谢谢。

Drawable - 创建伸出聊天气泡的尖角

Drawable - Creating sharp corners that extend out of chat bubble

android

android-drawable