Android中竖向文本视图占用过多空间

Question

Android中竖向文本视图占用过多空间

androidandroid-layout

28

我正在尝试使用LinearLayout和TableLayout创建类似下图的东西：

enter image description here

但是我卡在了垂直文本上。旋转后，它占用的空间比应该占用的空间多。

以下是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>

输出结果如下：

在此输入图片描述

竖排文字占用的空间多于实际需要，而且并非所有文字都显示出来了。 :(

- Ahmed Nawaz

1

看一下这篇文章： https://dev59.com/gnE85IYBdhLWcg3wNgvk祝你好运 - An-droid

被接受的答案是我刚刚标记为重复的。这个问题应该被关闭。 - Trenton McKinney

9个回答

14

对我来说，这些解决方案都没有用，但我找到了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" />

- Christian D

如果视图看起来不对，请将 android:gravity="bottom|right" 更改为 android:gravity="bottom|center"。 - Goodlife

它在Android Pie上崩溃了。java.lang.IllegalArgumentException: 无效的Region.Op - 只允许INTERSECT和DIFFERENCE。 - AKASH WANGALWAR

1

    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()

- Maryam Azhdari

1

这里有一个创建垂直文本视图的技巧。场景是我需要在屏幕右侧显示一个静态标签。因此，我只是使用了“\n”作为换行符，因为我的文本很少。

android:text="A\nC\nT\nI\nO\nN"

您可以查看我附加的图片。虽然如果您从动态数据中显示数据，则不建议使用。

<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" />

- Pre_hacker

0

在 .xml 文件中只需放置

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

- amad durrani

0

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

对我有用。

- Luke Allison

0

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

- hm7

-1

为什么不加填充呢？这样它就会居中显示在您的屏幕上。如果您喜欢，可以试试看。

- Giant

-2

如果您想重现图像，我建议使用GridView或TableLayout而不带任何按钮，只需设置适当的监听器（如果需要执行任何操作）。这样，您就可以设置固定的高度和宽度。

- Neron T

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- quangson91 · Accepted Answer

20

您可以使用以下代码：

android:rotation="270"

- quangson91

这会导致整个TextView（包括其背景）被旋转，这可能不是期望的结果。 - frogatto

是的，所以最好的方法是自定义TextView垂直显示。你可以使用我在谷歌上搜索到的这个例子：http://www.pocketmagic.net/2010/12/android-vertical-textview-custom-angle-text/ 希望能帮到你 :) - quangson91

它仍然需要额外的空间。 - Prabs

4

请给添加负值的边距以去除额外的空间，例如android:layout_marginLeft="-20dp" android:layout_marginRight="-10dp"。 - Chathura Wijesinghe