web-dev-qa-db-ja.com

StaticLayoutはAndroidでどのように使用されますか？

独自のカスタムTextViewを作成する必要があるので、キャンバスにテキストを描画するためにStaticLayoutについて学習しています。これはCanvas.drawText()を直接使用するよりも望ましいか、または documentation に記載されています。ただし、ドキュメントにはその方法の例は示されていません。 StaticLayout.Builder がこれを行う新しい方法であることへのあいまいな参照のみがあります。

私は例を見つけました here ですが、少し時代遅れのようです。

私は最終的にそれを行う方法を働いたので、以下に私の説明を追加しています。

androidcanvastextandroid-custom-viewstaticlayout
20
Suragch

StaticLayout（ DynamicLayoutおよびBoringLayoutと同様 ）は、キャンバス上にテキストをレイアウトおよび描画するために使用されます。通常、次のタスクに使用されます。

  • レイアウト後の複数行テキストの大きさの測定。
  • ビットマップ画像にテキストを描画します。
  • 独自のテキストレイアウトを処理するカスタムビューを作成する（TextViewが埋め込まれた複合ビューを作成するのとは対照的に）。 TextView自体はStaticLayout内部 を使用します。

テキストサイズの測定

単一行

テキストが1行しかない場合は、PaintまたはTextPaintで測定できます。

String text = "This is some text."

TextPaint myTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
mTextPaint.setColor(0xFF000000);

float width = mTextPaint.measureText(text);
float height = -mTextPaint.ascent() + mTextPaint.descent();

マルチライン

ただし、行の折り返しがあり、高さが必要な場合は、StaticLayoutを使用することをお勧めします。幅を指定すると、StaticLayoutから高さを取得できます。

String text = "This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.";

TextPaint myTextPaint = new TextPaint();
myTextPaint.setAntiAlias(true);
myTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
myTextPaint.setColor(0xFF000000);

int width = 200;
Layout.Alignment alignment = Layout.Alignment.ALIGN_NORMAL;
float spacingMultiplier = 1;
float spacingAddition = 0;
boolean includePadding = false;

StaticLayout myStaticLayout = new StaticLayout(text, myTextPaint, width, alignment, spacingMultiplier, spacingAddition, includePadding);

float height = myStaticLayout.getHeight();

新しいAPI

より新しい StaticLayout.Builder （API 23から利用可能）、次のようなレイアウトを取得できます。

StaticLayout.Builder builder = StaticLayout.Builder.obtain(text, 0, text.length(), myTextPaint, width);
StaticLayout myStaticLayout = builder.build();

ドット表記を使用して追加設定を追加できます。

StaticLayout.Builder builder = StaticLayout.Builder.obtain(text, 0, text.length(), myTextPaint, width)
        .setAlignment(Layout.Alignment.ALIGN_NORMAL)
        .setLineSpacing(spacingMultiplier, spacingAddition)
        .setIncludePad(includePadding)
        .setMaxLines(5);
StaticLayout myStaticLayout = builder.build();

画像にテキストを書く

将来的にはこれをさらに拡張するかもしれませんが、StaticLayoutを使用してビットマップを返すメソッドの例については、今のところ this post を参照してください。

カスタムテキスト処理ビューの作成

StaticLayoutを使用したカスタムビューの例を次に示します。単純なTextViewのように動作します。テキストが長すぎて画面に収まらない場合、自動的に行が折り返され、高さが増します。

enter image description here

コード

MyView.Java

public class MyView extends View {

    String mText = "This is some text.";
    TextPaint mTextPaint;
    StaticLayout mStaticLayout;

    // use this constructor if creating MyView programmatically
    public MyView(Context context) {
        super(context);
        initLabelView();
    }

    // this constructor is used when created from xml
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initLabelView();
    }

    private void initLabelView() {
        mTextPaint = new TextPaint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
        mTextPaint.setColor(0xFF000000);

        // default to a single line of text
        int width = (int) mTextPaint.measureText(mText);
        mStaticLayout = new StaticLayout(mText, mTextPaint, (int) width, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0, false);

        // New API alternate
        //
        // StaticLayout.Builder builder = StaticLayout.Builder.obtain(mText, 0, mText.length(), mTextPaint, width)
        //        .setAlignment(Layout.Alignment.ALIGN_NORMAL)
        //        .setLineSpacing(1, 0) // multiplier, add
        //        .setIncludePad(false);
        // mStaticLayout = builder.build();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // Tell the parent layout how big this view would like to be
        // but still respect any requirements (measure specs) that are passed down.

        // determine the width
        int width;
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthRequirement = MeasureSpec.getSize(widthMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthRequirement;
        } else {
            width = mStaticLayout.getWidth() + getPaddingLeft() + getPaddingRight();
            if (widthMode == MeasureSpec.AT_MOST) {
                if (width > widthRequirement) {
                    width = widthRequirement;
                    // too long for a single line so relayout as multiline
                    mStaticLayout = new StaticLayout(mText, mTextPaint, width, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0, false);
                }
            }
        }

        // determine the height
        int height;
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightRequirement = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightRequirement;
        } else {
            height = mStaticLayout.getHeight() + getPaddingTop() + getPaddingBottom();
            if (heightMode == MeasureSpec.AT_MOST) {
                height = Math.min(height, heightRequirement);
            }
        }

        // Required call: set width and height
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // do as little as possible inside onDraw to improve performance

        // draw the text on the canvas after adjusting for padding
        canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());
        mStaticLayout.draw(canvas);
        canvas.restore();
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/activity_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:padding="@dimen/activity_vertical_margin"
    tools:context="com.example.layoutpractice.MainActivity">

    <com.example.layoutpractice.MyView
        Android:layout_centerHorizontal="true"
        Android:background="@color/colorAccent"
        Android:padding="10dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"/>
</RelativeLayout>

注

  • This 、 this 、および this は、カスタムテキスト処理ビューの作成方法を学習するのに役立ちました。

  • コードまたはxmlから設定できるカスタム属性を追加する場合は、 ビュークラスの作成 を参照してください。

76
Suragch

キャンバスに複数行のテキストを描画するための私の説明です。

Paintオブジェクトを宣言します。 Paintの拡張機能であるTextPaintを使用します。

TextPaint textPaint;

Paintオブジェクトを初期化します。独自の色、サイズなどを設定します.

textPaint = new TextPaint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(16 * getResources().getDisplayMetrics().density);
textPaint.setColor(Color.YELLOW);

GetTextHeight関数を追加

private float getTextHeight(String text, Paint paint) {
    Rect rect = new Rect();
    Paint.getTextBounds(text, 0, text.length(), rect);
    return rect.height();
}

onDraw関数に次のような行を追加します

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    String text = "This is a lengthy text. We have to render this properly. If layout mess users review will mess. Is that so ? ";

    Rect bounds = canvas.getClipBounds();

    StaticLayout sl = new StaticLayout(text, textPaint, bounds.width(),
            Layout.Alignment.ALIGN_CENTER, 1, 1, true);

    canvas.save();

    //calculate X and Y coordinates - In this case we want to draw the text in the
    //center of canvas so we calculate
    //text height and number of lines to move Y coordinate to center.
    float textHeight = getTextHeight(text, textPaint);
    int numberOfTextLines = sl.getLineCount();
    float textYCoordinate = bounds.exactCenterY() -
            ((numberOfTextLines * textHeight) / 2);

    //text will be drawn from left
    float textXCoordinate = bounds.left;

    canvas.translate(textXCoordinate, textYCoordinate);

    //draws static layout on canvas
    sl.draw(canvas);
    canvas.restore();
}

礼儀は KOCの投稿

1
Nalin