Как настроить Кернинг текста в Android TextView?
Есть ли способ настроить интервал между символами в Android TextView
? Я думаю, что это обычно называется "Кернинг".
Я знаю об атрибуте android:textScaleX
, но он сжимает символы вместе с интервалом.
11 ответов:
AFAIK, вы не можете настроить Кернинг в
TextView
. Вы можете настроить Кернинг, если нарисуете текст наCanvas
самостоятельно с помощью API 2D graphics.
Я построил пользовательский класс, который расширяет TextView и добавляет метод "setSpacing". Обходной путь похож на то, что сказал @Noah. Метод добавляет пробел между каждой буквой строки и с помощью SpannedString изменяет TextScaleX пробелов, позволяя положительные и отрицательные интервалы.
Надеюсь, что это кому-то поможет ^^
/** * Text view that allows changing the letter spacing of the text. * * @author Pedro Barros (pedrobarros.dev at gmail.com) * @since May 7, 2013 */ import android.content.Context; import android.text.Spannable; import android.text.SpannableString; import android.text.style.ScaleXSpan; import android.util.AttributeSet; import android.widget.TextView; public class LetterSpacingTextView extends TextView { private float spacing = Spacing.NORMAL; private CharSequence originalText = ""; public LetterSpacingTextView(Context context) { super(context); } public LetterSpacingTextView(Context context, AttributeSet attrs){ super(context, attrs); } public LetterSpacingTextView(Context context, AttributeSet attrs, int defStyle){ super(context, attrs, defStyle); } public float getSpacing() { return this.spacing; } public void setSpacing(float spacing) { this.spacing = spacing; applySpacing(); } @Override public void setText(CharSequence text, BufferType type) { originalText = text; applySpacing(); } @Override public CharSequence getText() { return originalText; } private void applySpacing() { if (this == null || this.originalText == null) return; StringBuilder builder = new StringBuilder(); for(int i = 0; i < originalText.length(); i++) { builder.append(originalText.charAt(i)); if(i+1 < originalText.length()) { builder.append("\u00A0"); } } SpannableString finalText = new SpannableString(builder.toString()); if(builder.toString().length() > 1) { for(int i = 1; i < builder.toString().length(); i+=2) { finalText.setSpan(new ScaleXSpan((spacing+1)/10), i, i+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } } super.setText(finalText, BufferType.SPANNABLE); } public class Spacing { public final static float NORMAL = 0; } }
Используя его:
LetterSpacingTextView textView = new LetterSpacingTextView(context); textView.setSpacing(10); //Or any float. To reset to normal, use 0 or LetterSpacingTextView.Spacing.NORMAL textView.setText("My text"); //Add the textView in a layout, for instance: ((LinearLayout) findViewById(R.id.myLinearLayout)).addView(textView);
Если кто-то ищет простой способ применить Кернинг к любой строке (технически,
CharSequence
) без использованияTextView
:public static Spannable applyKerning(CharSequence src, float kerning) { if (src == null) return null; final int srcLength = src.length(); if (srcLength < 2) return src instanceof Spannable ? (Spannable)src : new SpannableString(src); final String nonBreakingSpace = "\u00A0"; final SpannableStringBuilder builder = src instanceof SpannableStringBuilder ? (SpannableStringBuilder)src : new SpannableStringBuilder(src); for (int i = src.length() - 1; i >= 1; i--) { builder.insert(i, nonBreakingSpace); builder.setSpan(new ScaleXSpan(kerning), i, i + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } return builder; }
Вот мое решение, которое добавляет равномерный интервал (в пикселях) между каждым символом. Этот интервал предполагает, что весь текст находится в одной строке. Это в основном реализует то, что предлагает @commonsWare.
SpannableStringBuilder builder = new SpannableStringBuilder("WIDE normal"); builder.setSpan(new TrackingSpan(20), 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); ... private static class TrackingSpan extends ReplacementSpan { private float mTrackingPx; public TrackingSpan(float tracking) { mTrackingPx = tracking; } @Override public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) { return (int) (paint.measureText(text, start, end) + mTrackingPx * (end - start - 1)); } @Override public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) { float dx = x; for (int i = start; i < end; i++) { canvas.drawText(text, i, i + 1, dx, y, paint); dx += paint.measureText(text, i, i + 1) + mTrackingPx; } } }
Единственный способ, который я нашел, чтобы настроить Кернинг, это создать пользовательский шрифт, в котором глиф заранее изменяется.
Вы также можете попробовать использовать SpannedString, но вам нужно будет разобрать его и изменить интервал между символами для каждого из слов
Этот ответ может быть полезен для тех, кто хочет нарисовать текст с помощью Кернинга на холсте, используя drawText (речь не идет о тексте в TextView).
Начиная с Lollipop, метод setLetterSpacing доступен на Paint. Если SDK LOLLIPOP и включен, используется setLetterSpacing. В противном случае вызывается метод, который делает что-то подобное предложению @dgmltn выше:
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { paint.setLetterSpacing(-0.04f); // setLetterSpacing is only available from LOLLIPOP and on canvas.drawText(text, xOffset, yOffset, paint); } else { float spacePercentage = 0.05f; drawKernedText(canvas, text, xOffset, yOffset, paint, spacePercentage); } /** * Programatically drawn kerned text by drawing the text string character by character with a space in between. * Return the width of the text. * If canvas is null, the text won't be drawn, but the width will still be returned * kernPercentage determines the space between each letter. If it's 0, there will be no space between letters. * Otherwise, there will be space between each letter. The value is a fraction of the width of a blank space. */ private int drawKernedText(Canvas canvas, String text, float xOffset, float yOffset, Paint paint, float kernPercentage) { Rect textRect = new Rect(); int width = 0; int space = Math.round(paint.measureText(" ") * kernPercentage); for (int i = 0; i < text.length(); i++) { if (canvas != null) { canvas.drawText(String.valueOf(text.charAt(i)), xOffset, yOffset, paint); } int charWidth; if (text.charAt(i) == ' ') { charWidth = Math.round(paint.measureText(String.valueOf(text.charAt(i)))) + space; } else { paint.getTextBounds(text, i, i + 1, textRect); charWidth = textRect.width() + space; } xOffset += charWidth; width += charWidth; } return width; }
При использовании TextView трудно настроить интервал между символами. Но если вы можете справиться с рисунком самостоятельно, должен быть какой-то способ сделать это.
Мой ответ на этот вопрос таков: используйте свой собственный диапазон .Мой код:
public class LetterSpacingSpan extends ReplacementSpan { private int letterSpacing = 0; public LetterSpacingSpan spacing(int space) { letterSpacing = space; return this; } @Override public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable Paint.FontMetricsInt fm) { return (int) paint.measureText(text, start, end) + (text.length() - 1) * letterSpacing; } @Override public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) { int length = text.length(); float currentX = x; for (int i = 1; i < length; i++) { canvas.drawText(text, i, i + 1, currentX, y, paint); currentX += paint.measureText(text, i, i + 1) + letterSpacing; } } }
Поясните:
Создание собственного
Span
может помочь вам достичь многих удивительных эффектов, таких как размытие TextView, изменение фона или переднего плана для вашего TextView, даже сделать некоторые анимация. Я многому научился из этого поста, охватывающего мощную концепцию .Поскольку вы добавляете интервал к каждому символу, поэтому мы должны использовать базовый диапазон уровня символов, в этом случае ReplacementSpan является лучшим выбором. Я добавляю метод
spacing
, поэтому при его использовании вы можете просто передать пространство, которое вы хотите для каждого символа в качестве параметра.При построении пользовательского диапазона необходимо переопределить по крайней мере два метода,
getSize
иdraw
. МетодgetSize
должен возвращать конечную ширину после того, как мы добавим интервал для всего charsequence, и внутри блока методаdraw
, Вы можете управлятьCanvas
, чтобы сделать чертеж, который вы хотите.Итак, как мы используем этот LetterSpacingSpan? Это просто:
Использование:
TextView textView; Spannable content = new SpannableString("This is the content"); textView.setSpan(new LetterSpacingSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); textView.setText(content);
И это все.
Есть небольшая правка ответа @ Pedro Barros. Это полезно, если вы используете SpannableString, чтобы установить его, например, если вы хотите сделать разные цвета некоторых символов:
private void applySpacing() { SpannableString finalText; if (!(originalText instanceof SpannableString)) { if (this.originalText == null) return; StringBuilder builder = new StringBuilder(); for (int i = 0; i < originalText.length(); i++) { builder.append(originalText.charAt(i)); if (i + 1 < originalText.length()) { builder.append("\u00A0"); } } finalText = new SpannableString(builder.toString()); } else { finalText = (SpannableString) originalText; } for (int i = 1; i < finalText.length(); i += 2) { finalText.setSpan(new ScaleXSpan((spacing + 1) / 10), i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } super.setText(finalText, TextView.BufferType.SPANNABLE); }
Я хотел использовать ответ @PedroBarros, но определив, какой интервал должен быть в пикселях.
Вот мое редактирование метода applySpacing:
private void applySpacing() { if (this == null || this.originalText == null) return; Paint testPaint = new Paint(); testPaint.set(this.getPaint()); float spaceOriginalSize = testPaint.measureText("\u00A0"); float spaceScaleXFactor = ( spaceOriginalSize > 0 ? spacing/spaceOriginalSize : 1); StringBuilder builder = new StringBuilder(); for(int i = 0; i < originalText.length(); i++) { builder.append(originalText.charAt(i)); if(i+1 < originalText.length()) { builder.append("\u00A0"); } } SpannableString finalText = new SpannableString(builder.toString()); if(builder.toString().length() > 1) { for(int i = 1; i < builder.toString().length(); i+=2) { finalText.setSpan(new ScaleXSpan(spaceScaleXFactor), i, i+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } } super.setText(finalText, BufferType.SPANNABLE); }
Я новичок в качестве разработчика Android, пожалуйста, не стесняйтесь, дайте мне знать, если это не хорошо !
Еще одно решение.
public static SpannableStringBuilder getSpacedSpannable(Context context, String text, int dp) { if (text == null) return null; if (dp < 0) throw new RuntimeException("WRONG SPACING " + dp); Canvas canvas = new Canvas(); Drawable drawable = ContextCompat.getDrawable(context, R.drawable.pixel_1dp); Bitmap main = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); canvas.setBitmap(main); drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); drawable.draw(canvas); SpannableStringBuilder builder = new SpannableStringBuilder(); char[] array = text.toCharArray(); Bitmap bitmap = Bitmap.createScaledBitmap(main, dp * main.getWidth(), main.getHeight(), false); for (char ch : array) { builder.append(ch); builder.append(" "); ImageSpan imageSpan = new ImageSpan(context, bitmap); builder.setSpan(imageSpan, builder.length() - 1, builder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } return builder; }
Где pixel_1dp-это XML:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"/> <size android:height="1dp" android:width="1dp"/> </shape>
Для установки интервала используйте следующий код:
textView.setText(getSpacedSpannable(context, textView.getText().toString(), <Your spacing DP>), TextView.BufferType.SPANNABLE);