Android中的垂直TextView

Ahm*_*waz 28 android android-layout

我想创造像下面这样的东西.

在此输入图像描述

通过使用LinearLayout和TableLayout.但我坚持使用垂直文本.它比旋转后需要的空间更多.

fllowing是XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/tv_CONSEQUENCES"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotation="-90"
        android:text="CONSEQUENCES"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
         <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
         <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
    </TableLayout>

</LinearLayout>
Run Code Online (Sandbox Code Playgroud)

和输出这样.

在此输入图像描述

垂直文本占用的空间超出了应有的范围.并且整个文本也没有出现.:(

qua*_*n91 18

您可以使用以下代码:

android:rotation="270"
Run Code Online (Sandbox Code Playgroud)

  • @Prabs 添加负边距值以移除额外空间。像`android:layout_marginLeft="-20dp" android:layout_marginRight="-10dp"` (4认同)

nid*_*dhi 16

您应该从下面提到的链接中回答您的问题:

textview中的垂直文本

  • 链接所指的文章中提到了两个提到的内容.第一种方法虽然需要自定义TextView,但它在旋转的TextView的右侧没有留下任何空白区域的意义更好. (2认同)

Chr*_*n D 6

没有一个解决方案适合我,但我发现了Mark Allison发布的这篇博文:https: //blog.stylingandroid.com/verticaltext-part-1/

public class VerticalTextView extends TextView
{
    final boolean topDown;

    public VerticalTextView( Context context, 
        AttributeSet attrs )
    {
        super( context, attrs );
        final int gravity = getGravity();
        if ( Gravity.isVertical( gravity )
            && ( gravity & Gravity.VERTICAL_GRAVITY_MASK ) 
            == Gravity.BOTTOM )
        {
            setGravity( 
                ( gravity & Gravity.HORIZONTAL_GRAVITY_MASK )
                    | Gravity.TOP );
            topDown = false;
        }
        else
        {
            topDown = true;
        }
    }

    @Override
    protected void onMeasure( int widthMeasureSpec, 
        int heightMeasureSpec )
    {
        super.onMeasure( heightMeasureSpec, 
            widthMeasureSpec );
        setMeasuredDimension( getMeasuredHeight(), 
            getMeasuredWidth() );
    }

    @Override
    protected void onDraw( Canvas canvas )
    {
        TextPaint textPaint = getPaint();
        textPaint.setColor( getCurrentTextColor() );
        textPaint.drawableState = getDrawableState();

        canvas.save();

        if ( topDown )
        {
            canvas.translate( getWidth(), 0 );
            canvas.rotate( 90 );
        }
        else
        {
            canvas.translate( 0, getHeight() );
            canvas.rotate( -90 );
        }

        canvas.translate( getCompoundPaddingLeft(), 
            getExtendedPaddingTop() );

        getLayout().draw( canvas );
        canvas.restore();
    }
}
Run Code Online (Sandbox Code Playgroud)

旋转由重力完成.所以一定要在你的xml中设置:

<com.stylingandroid.verticaltext.VerticalTextView
    style="@style/verticalTextStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="bottom|right"
    android:text="@string/text" />
Run Code Online (Sandbox Code Playgroud)


Gia*_*ant -1

为什么不添加填充?这样它就会位于屏幕中央。如果您愿意,请尝试一下