以编程方式创建一个带有包含图像的锐边的按钮

Question

我想创建一个自定义按钮或使用简单的图像和文本以编程方式查看，如图所示，其中边缘是按钮而不是图像。

请不要使用xml。

如有任何帮助，我们将不胜感激。我想用 canvas 学习和创建自定义视图，但由于我是 canvas 的新手，我无法创建它。

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

以编程方式创建一个带有包含图像的锐边的按钮

create a button programatically with sharp edge containing image

android

android-canvas

android-view

android-custom-view

android-button