Comment ajuster le crénage du texte dans Android TextView?
https://stackoverflow.com/questions/1640659
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Existe-t-il un moyen de régler l'espacement entre les caractères dans un TextView Android? Je pense que cela s'appelle généralement "crénage".
Je connais l'attribut android: textScaleX , mais compresse les caractères avec l'espacement.
La solution
Comme je l'ai dit, vous ne pouvez pas ajuster le crénage dans TextView . Vous pourrez peut-être ajuster le crénage si vous dessinez vous-même le texte sur le Canvas à l'aide des API graphiques 2D.
Autres conseils
J'ai construit une classe personnalisée qui étend TextView et ajoute une méthode "setSpacing". La solution de contournement est similaire à celle de @Noah. La méthode ajoute un espace entre chaque lettre de la chaîne et avec les SpannedString . TextScaleX des espaces, permettant un espacement positif et négatif.
J'espère que ça aide quelqu'un ^^
/**
* 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;
}
}
Utilisation:
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);
Si quelqu'un recherche un moyen simple d'appliquer le crénage à n'importe quelle chaîne (techniquement, CharSequence ) sans utiliser de 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;
}
Voici ma solution, qui ajoute un espacement uniforme (en pixels) entre chaque caractère. Cette étendue suppose que tout le texte est sur une seule ligne. Ceci met en pratique ce que suggère @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;
}
}
}
Le seul moyen que j'ai trouvé d'ajuster le crénage est de créer une police personnalisée dans laquelle l'avance du glyphe est modifiée.
Vous pouvez également essayer d'utiliser un SpannedString , mais vous devrez le faire. analyser et changer l'espacement des caractères pour chacun des mots
Cette réponse peut être utile à quelqu'un qui souhaite dessiner du texte avec le crénage sur un canevas, à l'aide de drawText (il ne s'agit pas de texte dans une vue TextView).
Depuis Lollipop, la méthode setLetterSpacing est disponible sur Paint. Si le SDK est LOLLIPOP et activé, setLetterSpacing est utilisé. Sinon, une méthode est appelée qui fait quelque chose de similaire à la suggestion de @dgmltn ci-dessus:
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;
}
Il est difficile d'ajuster l'espacement entre les caractères lorsque vous utilisez TextView. Mais si vous pouvez manipuler le dessin vous-même, il devrait y avoir un moyen de le faire.
La réponse à cette question est la suivante: utiliser votre étendue personnalisée .
Mon code:
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;
}
}
}
Expliquez:
Construire votre propre Span peut vous aider à obtenir de nombreux effets étonnants, tels que rendre flou TextView, changer l'arrière-plan ou le premier plan de votre TextView, voire même créer une animation. J'apprends beaucoup de ce post Span a concept puissant .
Etant donné que vous ajoutez un espacement à chaque caractère, nous vous recommandons d'utiliser une étendue de base au niveau du caractère. Dans ce cas, ReplacementSpan est le meilleur choix. J'ajoute une méthode spacing . Ainsi, lors de son utilisation, vous pouvez simplement passer l'espace que vous souhaitez pour chaque caractère en tant que paramètre.
Lors de la création de votre plage personnalisée, vous devez remplacer au moins deux méthodes, getSize et draw . La méthode getSize doit renvoyer la largeur finale après l'ajout de l'espacement pour la séquence complète, et à l'intérieur du bloc de méthode draw , vous pouvez contrôler le Canvas faire le dessin que vous voulez.
Alors, comment utilisons-nous ce LetterSpacingSpan? C'est facile:
Utilisation:
TextView textView;
Spannable content = new SpannableString("This is the content");
textView.setSpan(new LetterSpacingSpan(), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(content);
Et c'est tout.
Il y a une petite modification de la réponse de @Pedro Barros. Il est utile si vous utilisez SpannableString pour le définir, par exemple. si vous voulez créer différentes couleurs de certains caractères:
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);
}
Je voulais utiliser la réponse @PedroBarros, mais en définissant l'espacement en pixels.
Voici ma modification de la méthode 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);
}
Je suis un débutant en tant que développeur Android, n'hésitez pas à me faire savoir si ce n'est pas bon!
Une autre solution.
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;
}
Où pixel_1dp est 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>
Pour définir l'espacement, utilisez le code suivant:
textView.setText(getSpacedSpannable(context, textView.getText().toString(), <Your spacing DP>), TextView.BufferType.SPANNABLE);
Depuis Android 21, vous pouvez définir l'attribut letterSpacing .
<TextView
android:width="..."
android:height="..."
android:letterSpacing="1.3"/>
