如何在android中創建形狀並在該形狀上添加文本和圖像？

Question

我正在嘗試創建綠色形狀，並在綠色形狀之上添加文本和圖像。 像這個例子：

我在photoshop中創建了此示例，並嘗試將其用作<ImageView>但圖像始終顯得模糊，因此，我決定使用.xml重新創建它。

我知道如何創建一個圓，像這樣：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />

<stroke
    android:width="10dp"
    android:color="@android:color/white" />
</shape>

謝謝，

Answer 1

您有幾種選擇，但是如果我對您的理解正確，那么您希望擁有一個可以覆蓋整個屏幕的View ，除了顯示圖片之外還顯示一些文本，最后還要具有彎曲的背景。

為此，可以創建一個自定義View ，該自定義View從ImageView擴展（或者如Android Studio推薦的那樣，從android.support.v7.widget.AppCompatImageView擴展）。 從ImageView擴展意味着我們必須照顧好背景和文本，處理圖片不會有問題。

IMO最好給自定義View一組參數，並使用Path繪制背景，而不是使用ShapeDrawable因為這樣可以先評估View的邊界，然后確定應該在哪里繪制曲線。

首先，讓我們在res / values / dimens.xml中引入一些維度值

<dimen name="clipped_circle_deviation">100dp</dimen>
<dimen name="clipped_circle_padding_top">60dp</dimen>

然后，活動布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    <com.example.customviews.views.ClippedCircleView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/test"
        android:paddingTop="@dimen/clipped_circle_padding_top"
        android:scaleType="center"/>
</RelativeLayout>

我用於測試的圖片：

以及它的外觀（我確定文本需要一些微調，但這是另一個問題）

ClippedCircleView.java

public class ClippedCircleView extends android.support.v7.widget.AppCompatImageView {

    public static final String TAG = "ClippedCircle";
    private static final int INNER_EDGE_WEIGHT = 2;
    private static final int OUTER_EDGE_WEIGHT = 3;

    private int measuredWidth;
    private int measuredHeight;
    private Paint innerPaint;
    private Paint outerPaint,;
    private Paint textPaint;
    private Path path;

    public ClippedCircleView(Context context) {
        super(context);
        init();
    }

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

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

    private void init(){
        setWillNotDraw(false);

        path = new Path();

        innerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        innerPaint.setColor(Color.GREEN);
        innerPaint.setStyle(Paint.Style.FILL);
        outerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        outerPaint.setColor(Color.WHITE);
        outerPaint.setStyle(Paint.Style.FILL);
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(Color.WHITE);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.clipped_circle_textsize));

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        measuredWidth = right - left;
        measuredHeight = bottom - top;
        float innerEdgeLength = INNER_EDGE_WEIGHT/ (OUTER_EDGE_WEIGHT * 1.0f) * measuredHeight;
        path.moveTo(0,0);
        path.lineTo(0, innerEdgeLength);
        float deviation = getResources().getDimensionPixelSize(R.dimen.clipped_circle_deviation);
        path.quadTo(measuredWidth*0.5f, innerEdgeLength + deviation, measuredWidth, innerEdgeLength);
        path.lineTo(measuredWidth, 0);
        path.lineTo(0,0);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(0, 0, measuredWidth, measuredHeight, outerPaint);
        canvas.drawPath(path, innerPaint);
        canvas.drawText("Hello!", 32, 80, textPaint);
        canvas.drawText("Welcome to", 32, 160, textPaint);
        canvas.drawText("My App", 32, 240, textPaint);
        super.onDraw(canvas);
    }
}

Answer 2

除了將其轉換為bitmap然后寫入文本外，無法直接在可繪制形狀中寫入文本。 如果您確實想使用Drawable創建它，則應該使用Adobe Illustrator進行創建並將其導出為svg 。 然后可以將svg導入為Android Vector Drawable （文件->新建->矢量資產->本地文件-> ...）。