Question

如何实现这些类型的按钮？

选择器和形状可以实现这一点（按钮可点击区域应该具有按钮的形状）还是有任何库和自定义小部件？

Answer 1

我做了一个名为RoundButton的自定义视图，在项目中添加了这个类

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Jinesh Francis on 5/6/17.
 */

public class RoundButton extends View {
    private Paint firstCirclePaint,secondCirclePaint,secondCircleStrokePaint;
    private int firstCircleColor=0xFF006680,secondCircleColor=0xFF85A3BD,secondCircleStokeColor=0xFFFFFFFF;
    private int width,height;
    private PorterDuffXfermode porterDuffXfermode;
    public RoundButton(Context context) {
        super(context);
        init(context,null);
    }

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

    private void init(Context context, AttributeSet attrs) {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        firstCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        firstCirclePaint.setColor(firstCircleColor);

        secondCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        secondCirclePaint.setColor(secondCircleColor);

        secondCircleStrokePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        secondCircleStrokePaint.setColor(secondCircleStokeColor);

        porterDuffXfermode=new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        secondCircleStrokePaint.setXfermode(porterDuffXfermode);
        canvas.drawCircle(width/2,width/2,width/2,firstCirclePaint);
        canvas.drawCircle(width/2,(width/2)+(width/3),(width/3)+(width/(width/8)),secondCircleStrokePaint);
        canvas.drawCircle(width/2,(width/2)+(width/3),width/3,secondCirclePaint);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredWidth = 300;
        int desiredHeight = desiredWidth+((desiredWidth/3)/2)+(desiredWidth/(desiredWidth/8));

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;
        int height;

        //Measure Width
        if (widthMode == MeasureSpec.EXACTLY) {
            //Must be this size
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            //Can't be bigger than...
            width = Math.min(desiredWidth, widthSize);
        } else {
            //Be whatever you want
            width = desiredWidth;
        }

        //Measure Height
        if (heightMode == MeasureSpec.EXACTLY) {
            //Must be this size
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            //Can't be bigger than...
            height = Math.min(desiredHeight, heightSize);
        } else {
            //Be whatever you want
            height = desiredHeight;
        }

        //MUST CALL THIS
        setMeasuredDimension(width, height);
    }

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

    public int getFirstCircleColor() {
        return firstCircleColor;
    }

    public void setFirstCircleColor(int firstCircleColor) {
        this.firstCircleColor = firstCircleColor;
    }

    public int getSecondCircleColor() {
        return secondCircleColor;
    }

    public void setSecondCircleColor(int secondCircleColor) {
        this.secondCircleColor = secondCircleColor;
    }

    public int getSecondCircleStokeColor() {
        return secondCircleStokeColor;
    }

    public void setSecondCircleStokeColor(int secondCircleStokeColor) {
        this.secondCircleStokeColor = secondCircleStokeColor;
    }
}

用于在布局中添加按钮

 <"write_your_package_of_RoundButton_here".RoundButton
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/round"
        android:layout_height="wrap_content" />

在活动中为RoundButton设置Clicklistner

 RoundButton roundButton= (RoundButton) findViewById(R.id.round);
 roundButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
       Toast.makeText(MainActivity.this, "View Clicked!", Toast.LENGTH_SHORT).show();
    }
 });

截图：

Android布局中自定义形状的按钮

1 个答案: