Главная

Button c обведенным(stroke) шрифтом на Android

2012-09-04 в 19:29, admin, рубрики: android, interface, Программирование, Разработка под android, метки: android, interface, Программирование

Понадобился мне для проекта один специфический элемент — кнопка с обведенным шрифтом. Казалось бы, что тут такого — google точно должен был это предусмотреть. Но, как оказалось, стандартными способами это сделать нельзя и нужно покопаться под капотом Button. Начал я свои поиски с тени для шрифта.
Но попытка сделать stroke шрифт таким способом провалится —
во-первых, линия вокруг букв будет размытой тем больше, чем больше вы укажете число в shadowRadius;
во-вторых, нельзя изменить ширину линии.
Немного поразмыслив, я реализовал класс, который делает все что требуется. Кого заинтересовало — прошу под кат.

Поискал везде решение и не смог найти, поэтому решил показать свое решение и, возможно, кому-то оно пригодится. Из требований было — возможность установки цвета шрифта и ширины обводки из XML. Теперь переходим к коду.

Для начала в файле res/values/attrs.xml опишем параметры, которые будет принимать наша кнопка ButtonStrokeText (назовем ее так).

<?xmlversion="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ButtonStrokeText">
        <attr name="textStrokeColor" format="color"/>
        <attr name="textStrokeWidth" format="dimension"/>
    </declare-styleable>

</resources>

Цвет обводки textStrokeColor мы будем принимать в формате color(также как и цвет текста в обычной кнопке), ширину обводки сделаем как и положено в dimensions(sp, dp и все такое). Напомню, что google рекомендует использовать sp для размера текста.

Так, параметры для XML описали, переходим дальше к самому классу ButtonStrokeText. Создаем класс с таким названием и наследуем его от Button. Переписываем пару конструкторов и один метод onDraw. Вот и сам код:

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint.Join;
import android.graphics.Paint.Style;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.widget.Button;

public class ButtonStrokeText extends Button
{
         private int strokeColor=Color.TRANSPARENT;
         private int strokeWidth=2;
         public ButtonStrokeText(Context context)
         {
                 super(context);
         }
         public ButtonStrokeText(Context context, AttributeSet attrs)
         {
                 super(context, attrs);
                 TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ButtonStrokeText);
                 strokeColor=a.getColor(R.styleable.ButtonStrokeText_textStrokeColor, strokeColor);
                 strokeWidth=a.getDimensionPixelSize(R.styleable.ButtonStrokeText_textStrokeWidth, strokeWidth);
                 a.recycle();
         }
         Override
         public void onDraw(Canvas canvas)
         {
                 final ColorStateList textColor = getTextColors();

                 TextPaint paint = this.getPaint();

                 paint.setStyle(Style.STROKE);
                 paint.setStrokeJoin(Join.ROUND);
                 paint.setStrokeMiter(10);
                 this.setTextColor(strokeColor);
                 paint.setStrokeWidth(strokeWidth);

                 super.onDraw(canvas);
                 paint.setStyle(Style.FILL);

                 setTextColor(textColor);
                 super.onDraw(canvas);
         }
}

Код довольно простой — в конструкторе ButtonStrokeText(Context context, AttributeSet attrs) мы обрабатываем параметры и сохраняем их. Последний параметр в методах getColor и getDimensionPixelSize означает тип по умолчанию, если забудем или не будем указывать его в XML.
Самое интересное у нас происходит в методе, которые отвечает за отрисовку. В нем мы как раз рисуем обводку и последней строкой вызываем родительский метод. Упомяну еще, что setStrokeJoin влияет на тип обводки, я выбрал закругленный. На картинке показаны варианты обводки, в зависимости от параметров(внимательно смотрите на края и углы обводки). Все варианты можете посмотреть на картинке.

Вот, собственно, и все. Теперь можете использовать этот класс в своих XML. Пример использования ниже.

<com.unlim.components.ButtonStrokeText android:text="@string/menu_quit"

android:textColor=«android:color/white»

app:textStrokeWidth=«5sp» app:textStrokeColor=«android:color/black»

android:textSize=«20sp» android:layout_width=«220dip»

android:layout_height=«40dip» android:layout_gravity=«center_horizontal» />