Question

我想用图像所示的简单图像和文本以编程方式创建自定义按钮或视图，其中edge是按钮而不是图像。

请不要使用xml。

非常感谢任何帮助。我想用帆布学习和创建自定义视图，但由于我是画布的新视图，我无法创建它。

Answer 1

复制并粘贴下面的代码，希望这能为您提供所需的输出.. 以下是我使用此代码Screenshot

所获得的内容

XML代码：

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black_alpha_30"
    android:padding="15dp">

    <RelativeLayout
        android:id="@+id/relative_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/relative_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">

        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Java代码：

private RelativeLayout mRelativeLayout, mRelativeParent;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mRelativeLayout = (RelativeLayout) findViewById(R.id.relative_main);
    mRelativeParent = (RelativeLayout) findViewById(R.id.relative_parent);

    Button btnMain = new Button(MainActivity.this);
    btnMain.setBackgroundColor(getResources().getColor(R.color.teal_600));
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 80);
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
    layoutParams.setMargins(15,15,15,15);
    btnMain.setLayoutParams(layoutParams);
    mRelativeLayout.addView(btnMain);

    Button btnImage = new Button(MainActivity.this);
    btnImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.teal_bg));
    RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(150, 150);
    layoutParams1.addRule(mRelativeParent.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
    btnImage.setLayoutParams(layoutParams1);
    mRelativeParent.addView(btnImage);
}

Answer 2

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;

import android.util.AttributeSet;
import android.view.View;

public class ContainerBox extends View {
    private Paint textPaint;
    private String mainText="Vikram Singh";
    private String backgroundColour = "#FF8514";
    private String textColour = "#1896bb";

private Bitmap leftIcon;
private Paint paintBackGround;
private Rect recBackGround;

private Paint paintImage ;
private Rect recImage;

public ContainerBox(Context context) {
    super(context);
    initializePaints(context);
}

public ContainerBox(Context context, AttributeSet attrs) {
    super(context, attrs);
    initializePaints(context);
}

public ContainerBox(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initializePaints(context);
}

private void initializePaints(Context context) {
    leftIcon = BitmapFactory.decodeResource(getResources(), R.drawable.icon_done);

    paintImage = new Paint();
    paintImage.setColor(Color.parseColor(backgroundColour));
    paintImage.setStrokeWidth(3);
    paintImage.setAntiAlias(true);
    paintImage.setStyle(Paint.Style.FILL);

    paintBackGround = new Paint();
    paintBackGround.setColor(Color.parseColor(backgroundColour));
    paintBackGround.setStrokeWidth(3);
    paintBackGround.setAntiAlias(true);
    paintBackGround.setStyle(Paint.Style.FILL);

    textPaint = new Paint();
    textPaint.setColor(Color.parseColor(textColour));
    textPaint.setAntiAlias(true);
    textPaint.setTextSize(4);
    textPaint.setStyle(Paint.Style.STROKE);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(),leftIcon.getHeight()+40);
}

@Override
protected void onDraw(Canvas canvas) {
    int width = getWidth();
    int height = leftIcon.getHeight()+40;

    int differenceHeight=height-25;
    int differenceWidth=width-leftIcon.getWidth()+15;
    recBackGround=new Rect(0,25,differenceWidth,differenceHeight);

    canvas.drawRect(recBackGround,paintBackGround);

    textPaint.setTextSize(15f);
    float textWidth = textPaint.measureText(mainText);
    int x = (int) ((recBackGround.width() - textWidth) / 2);
    int y = (int) ((recBackGround.centerY() - (textPaint.descent() + textPaint.ascent())/2));
    // draw text
    canvas.drawText(mainText, x, y, textPaint);


    recImage=new Rect(recBackGround.right,0,width,height);
    canvas.drawRect(recImage,paintImage);

    int left=recImage.width()/2-leftIcon.getWidth()/2;
    int top=recImage.height()/2-leftIcon.getHeight()/2;
    canvas.drawBitmap(leftIcon,recImage.left,top,paintImage);
    super.onDraw(canvas);
}

以编程方式创建一个包含锐利边缘的图像

2 个答案: