web-dev-qa-db-ja.com

Android TextView？

Android TextViewの文字間の間隔を調整する方法はありますか？これは通常「カーニング」と呼ばれていると思います。

私はAndroid:textScaleX属性を認識していますが、それによって文字がスペースとともに圧縮されます。

androidtextviewspacingkerning
26
emmby

AFAIK、TextViewでカーニングを調整することはできません。 2DグラフィックAPIを使用してCanvasにテキストを自分で描画すると、カーニングを調整できる場合があります。

12
CommonsWare

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);
68
Pedro Barros

誰かが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;
}
14
Takhion

これが私の解決策です。これは、各文字の間に均一な間隔（ピクセル単位）を追加します。このスパンは、すべてのテキストが1行にあると想定しています。これは基本的に@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;
        }
    }
}
4
dgmltn

カーニングを調整する唯一の方法は、グリフアドバンスを変更したカスタムフォントを作成することです。

3
mvds

SpannedString を使用することもできますが、解析して各単語の文字間隔を変更する必要があります

1
Noah

この回答は、drawTextを使用してCanvasにカーニングでテキストを描画する場合に役立ちます（これは、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;
}
1
TER

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の少なくとも2つのメソッドをオーバーライドする必要があります。 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);

以上です。

1
Anthonyeef

@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開発者としての初心者です。これが良くない場合は、遠慮なくお知らせください。

0
Olivier Berni

もう1つの解決策。

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);
0
Aleksandr

@PedroBarrosの回答の小さな編集があります。 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);
}
0
Денис Клещев

Android 21なので、set letterSpacing属性を使用できます。

<TextView
    Android:width="..."
    Android:height="..."
    Android:letterSpacing="1.3"/>
0
Algar