gpt4 book ai didi

java - 如何在android中创建形状并在形状上添加文本和图像?

转载 作者:行者123 更新时间:2023-12-01 19:46:58 25 4
gpt4 key购买 nike

我正在尝试创建绿色形状并在绿色形状顶部添加文本和图像。就像这个例子: enter image description here

我在 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>

谢谢

最佳答案

您有多种选择,但如果我理解正确的话,您希望有一个 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>

然后,Activity布局:

<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>

我测试用的图片: enter image description here

它是什么样子的(我确信文本需要一些微调,但这是另一个问题)

enter image description here

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);
}
}

关于java - 如何在android中创建形状并在形状上添加文本和图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52878345/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com