Android中的垂直TextView

时间:2013-06-12 07:25:34

标签: android android-layout

我正在尝试创建类似跟随的内容。

enter image description here

使用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>

和像这样的输出。

enter image description here

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

11 个答案:

答案 0 :(得分:18)

您可以使用以下代码:

android:rotation="270"

答案 1 :(得分:15)

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

vertical text in textview

答案 2 :(得分: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();
    }
}

旋转是由重力完成的。所以一定要在你的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" />

答案 3 :(得分:1)

您必须延长TextView并覆盖其onDraw

答案 4 :(得分:1)

        android:rotation="-90"
        android:layout_gravity="center"

为我工作。

答案 5 :(得分:1)

.xml文件中的

<TextView> 
 android:layout_width="wrap content"
 android:layout_height="wrap content"
 android:rotation="270"
</TextView>

答案 6 :(得分:0)

为什么不填充?所以它会放在你屏幕的中心。如果你愿意的话,试试吧

答案 7 :(得分:0)

将所有文本视图放在线性布局中,并尝试给出适当的布局权重以解决您的问题

答案 8 :(得分:0)

    val textPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    textPaint.textSize=toPx(16)
    textPaint.color=Color.parseColor("#FFFFFF")
    canvas.save()
    canvas.translate(50F, 60F)
    canvas.rotate(90F)
    canvas.drawPaint(textPaint)
    canvas.drawText("YourText", 0F,0F, textPaint)
    canvas.restore()

答案 9 :(得分:0)

这里是创建垂直文本视图的技巧。 因此,场景是我需要在屏幕右侧显示一个静态标签。 所以我只用“ \ n”作为新行,因为我的文字较少。

  

android:text =“ A \ nC \ nT \ nI \ nO \ nN”

您可以检查我所附的图像。虽然不建议您动态显示数据。 enter image description here

<TextView
    android:id="@+id/tv_action"
    android:layout_width="20dp"
    android:layout_height="126dp"
    android:background="@drawable/bg_red_left_rcorner"
    android:gravity="center"
    android:padding="2dp"
    android:textStyle="bold"
    android:text="A\nC\nT\nI\nO\nN"
    android:textColor="@color/white"
    app:layout_anchor="@+id/drawer_layout"
    app:layout_anchorGravity="end|center" />

答案 10 :(得分:-1)

如果你想重现你的图像我会使用没有按钮的GridView或TableLayout,只需要设置适当的监听器,如果你需要做任何动作。这样您就可以设置固定的高度和宽度。