اغلب در هنگام طراحی یک برنامه اندرویدی لازم داریم تا ویجتهای اندروید را شخصی سازی کنیم تا به صورت دلخواه ما برای برنامه درآید. در این مطلب با ساخت یک ویجت پرکاربد آشنا میشوید. شاید در برنامه تان دوست داشته باشید که برخی متن ها و یا دکمه ها را به شکل فوق نمایش دهید. اگر پنین است پس ادامه مطلب را مطالعه کنید.

در پروژه خود یک کلاس جدید به صورت زیر ایجاد کنید:

public class CircularTextView extends AppCompatTextView {
    private boolean isBorderOn;
    private int borderColor;
    private int solidColor;
    private int borderSize;

    public CircularTextView(Context context) {
        this(context, null);
    }

    public CircularTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray styledAttributes = context.obtainStyledAttributes(
                attrs, R.styleable.CircularTextView, R.attr.BaseTextView, 0);
        try {
            solidColor = styledAttributes.getColor(
                    R.styleable.CircularTextView_fillColor, 0
            );
            borderColor = styledAttributes.getColor(
                    R.styleable.CircularTextView_borderColor, Color.parseColor("#000000")
            );
            borderSize = styledAttributes.getDimensionPixelSize(
                    R.styleable.CircularTextView_borderSize, 0
            );
            isBorderOn = styledAttributes.getBoolean(
                    R.styleable.CircularTextView_borderOn, false
            );
        } finally {
            styledAttributes.recycle();
        }
    }


    @Override
    public void draw(Canvas canvas) {

        Paint fillPaint = new Paint();
        fillPaint.setColor(solidColor);
        fillPaint.setStyle(Paint.Style.FILL);
        fillPaint.setAntiAlias(true);

        Paint borderPaint = new Paint();
        borderPaint.setColor(borderColor);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setStrokeWidth(borderSize);
        borderPaint.setAntiAlias(true);

        float h = this.getHeight();
        float w = this.getWidth();
        float radius = h / 2;

        if (w < h) {
            w = h;
            this.setWidth((int) h);
        }

        canvas.drawCircle(radius + borderSize / 2, radius, radius - borderSize / 2 - 1, fillPaint);
        canvas.drawCircle(w - radius - borderSize / 2, radius, radius - borderSize / 2 - 1, fillPaint);
        canvas.drawRect(radius + borderSize, borderSize / 2 + 1, w - radius - borderSize,
                h - borderSize / 2 - 1, fillPaint);

        //Draw border if border is on:
        if (isBorderOn) {
            //define left side arc path
            Path pathLeft = new Path();
            pathLeft.arcTo(new RectF(borderSize, borderSize, 2 * radius + borderSize,
                    2 * radius - borderSize), 90F, 180F, true);

            //define right side arc path
            Path pathRight = new Path();
            pathRight.arcTo(new RectF(w - 2 * radius - borderSize, borderSize,
                            w - borderSize, 2 * radius - borderSize),
                    270F, 180F, true);

            //Stroke pathes
            canvas.drawPath(pathLeft, borderPaint);
            canvas.drawPath(pathRight, borderPaint);
            //Stroke lines
            canvas.drawLine(radius, borderSize, w - radius, borderSize, borderPaint);
            canvas.drawLine(radius, 2 * radius - borderSize, w - radius,
                    2 * radius - borderSize, borderPaint);
        }

        super.draw(canvas);
    }

    public void setFillColor(String color) {
        solidColor = Color.parseColor(color);

    }

    public void setFillColor(int color) {
        solidColor = color;

    }

    public void setBorderColor(String color) {
        borderColor = Color.parseColor(color);

    }

    public void setBorderColor(int color) {
        borderColor = color;

    }

    public void setBorderOn(boolean borderOn) {
        this.isBorderOn = borderOn;
    }

    public void setBorderSize(int size){
        this.borderSize = size;
    }
}

همان طور که در کد بالا میبینید یک TextView شخصی سازی شده است و در متد draw زمینه و حاشیه متن مانند شکل فوق ترسیم میگردد.

برای کد فوق نیاز دارید تا در resourceهای خود و زیر مجموعه values یک فایل atrrs.xml را ایجاد کنید. (ممکن است این قایل هم اکنون نیز در پروژه شما وجود داشته باشد.)

حالا قطعه کد زیر را در atrrs.xml قرار دهید:

    <attr name="BaseTextView" format="reference" />

    <declare-styleable name="CircularTextView">
        <attr name="fillColor" format="color" />
        <attr name="borderColor" format="color" />
        <attr name="borderOn" format="boolean" />
        <attr name="borderSize" format="dimension" />
    </declare-styleable>

اکنون میتوانید از کلاس CircularTextView استفاده کنید. برای استفاده از آن میتوانید در لایه به صورت زیر آن را وارد کنید:

<com.appafzar.utility.view.CircularTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingTop="4dp"
        android:paddingEnd="16dp"
        android:paddingBottom="8dp"
        android:text="AppAfzar"
        android:textSize="20dp"
        app:borderColor="@color/colorPrimary"
        app:borderOn="true"
        app:borderSize="3dp"
        app:fillColor="@color/colorAccent"/>

همچنین از طریق کد به صورت زیر میتوانید در برنامه تنظیمات آنرا تغییر دهید.

        CircularTextView cTextView = findViewById(R.id.circular_text_view);
        cTextView.setText("AppAfzar.com");
        cTextView.setBorderOn(true);
        cTextView.setBorderColor("#575757");
        cTextView.setBorderSize(4);
        cTextView.setFillColor("#03DAC5");