如果超出容器，则重新对齐TextViews

编程问答 2022-04-26

问题描述

| 我有一个ListView，我想自定义列表中每个项目的布局，以便它在右侧有一个按钮，在该按钮的左侧有一个包含多个单词（即TextViews）的部分（即左侧的每个TextView）手边只有一个字）。这是我的意思的图片： 现在，我已经能够成功将ButtonImage获取到想要的位置（定义的宽度为40dp）。如果我只是简单地将TextViews放在RelativeLayout中，我会注意到它们堆叠在一起，因此我在每个TextViews中相应地添加了\“ android：layout_toRightOf \”。显然，这意味着我再也不会彼此言辞。我将这种布局的左侧设置为在其右侧填充40dp（这样，TextView就不会在按钮后面或碰撞到其中）。发生的情况是TextViews将在顶部完美对齐，然后最后几个无法挤压的文本将垂直扩展以填充左侧框。我想设置左框区域（带有TextViews），这样，如果TextView要碰到右壁（技术上是从父项的右壁填充40dp填充），它将向下移动并一直到左边，所以单词读起来像一本书。还请注意，对于ListView中的任何给定项目，左侧​​将有1-5个TextViews（单词）。我非常确定，如果我可以按自己想要的方式获得布局，则不必担心左侧堆叠的高度高于按钮图像（无论如何这都是很容易解决的问题）。这是我的代码： 
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:layout_width=\"fill_parent\"
    android:layout_height=\"fill_parent\"
    android:orientation=\"horizontal\"
>
    <RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:paddingRight=\"40dp\"
        android:id=\"@+id/kwds\"
    >
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/first\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/second\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:layout_toRightOf=\"@id/first\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/third\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:layout_toRightOf=\"@id/second\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/fourth\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:layout_toRightOf=\"@id/third\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/fifth\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:layout_toRightOf=\"@id/fourth\"
    />
    </RelativeLayout>   
    <ImageButton android:id=\"@+id/bkmbtn\"
    android:src=\"@drawable/bkbtn\"
    android:layout_width=\"40dp\"
    android:layout_height=\"wrap_content\"
    android:layout_alignParentRight=\"true\"
    >
    </ImageButton>
</RelativeLayout>
在你们问之前，是的，确实确实需要每个单词都有一个TextView（不幸的是）。如果有任何不清楚的地方，请通知我。感谢您能为我提供的任何帮助！我真的希望这是可能的。     

解决方法

我处理了您的代码并进行了一些修改。现在，它可以按您的期望正常工作。 不要投票。 
<?xml version=\"1.0\" encoding=\"utf-8\"?>

<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:layout_width=\"fill_parent\"
    android:layout_height=\"fill_parent\"
    android:orientation=\"horizontal\"
>
<ImageButton android:id=\"@+id/bkmbtn\"
    android:background=\"@drawable/a_thumb\"
    android:layout_width=\"40dp\"
    android:layout_height=\"wrap_content\"
    android:layout_alignParentRight=\"true\"
    >
    </ImageButton>
    <LinearLayout 
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:paddingRight=\"40dp\"
        android:id=\"@+id/kwds\"
        android:layout_toLeftOf=\"@+id/bkmbtn\"
        android:orientation=\"horizontal\"
    >
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/first\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:text=\"first\"
        android:background=\"#ffffff\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/second\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:text=\"second\"
        android:background=\"#ffffff\"

    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/third\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:layout_toRightOf=\"@id/second\"
        android:text=\"third\"
        android:background=\"#ffffff\"
    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/fourth\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:text=\"fourth\"
        android:background=\"#ffffff\"

    />
    <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:id=\"@+id/fifth\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"wrap_content\"
        android:text=\"fifth\"
        android:background=\"#ffffff\"

    />
    </LinearLayout>   

</RelativeLayout>
谢谢 迪帕克     ,因此，我以人们可能想到的第一种自然方式实现了这一目标。我建立了一个水平方向的LinearLayouts的5x5 \“ table \”，它们相互堆叠在一起，以提供TableLayout的感觉。我没有使用TableLayout，因此我可以轻松地将每个LinearLayout \“ row \”初始设置为\“ gone \”的可见性，并在需要时使其可见（因此它不会给每个条目带来blo肿的感觉）。这是我所做的一个示例： 
<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    android:layout_width=\"wrap_content\"
    android:layout_height=\"fill_parent\"
    android:paddingLeft=\"2dp\"
    android:paddingRight=\"40dp\"
    android:id=\"@+id/kwds\"
    android:orientation=\"vertical\"
>
    <LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:id=\"@+id/kwdsone\"
    >
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/first\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/second\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/first\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/third\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/second\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
    </LinearLayout>
    <LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:id=\"@+id/kwdstwo\"
        android:layout_below=\"@id/kwdsone\"
        android:visibility=\"gone\"
    >
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/fourth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/fifth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/fourth\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/sixth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/fifth\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
    </LinearLayout>
    <LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:id=\"@+id/kwdsthree\"
        android:layout_below=\"@id/kwdstwo\"
        android:visibility=\"gone\"
    >
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/seventh\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/eighth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/seventh\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/ninth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/eighth\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
    </LinearLayout>
    <LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
        android:layout_width=\"wrap_content\"
        android:layout_height=\"fill_parent\"
        android:id=\"@+id/kwdsfour\"
        android:layout_below=\"@id/kwdsthree\"
        android:visibility=\"gone\"
    >
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/tenth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/eleventh\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/tenth\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
        <TextView xmlns:android=\"http://schemas.android.com/apk/res/android\"
            android:id=\"@+id/twelth\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:layout_toRightOf=\"@id/eleventh\"
            android:textColor=\"#000000\"
            android:textSize=\"20sp\"
        />
    </LinearLayout> 
</RelativeLayout>
在示例中，我使用的是4x3的\“ table \”布局，但是我将其更改为5x5（在可能有5个TextView的情况下，所有这些占据了整行）。 接下来，我要做的是创建一种非常简单的算法，无论如何我都会填充每行的第一个TextView，但是只有容器的最大宽度减去该单词的宽度时，此后的每个TextView才会填充进入TextView，并且同一行中先前已填充的TextView的宽度大于或等于零。也就是说，如果下一个单词的宽度不会超出父级的宽度而溢出。看起来是这样的： 
Paint paint = new Paint();
// Convert the dps and sps to pixels with scale variable 
float scale = getContext().getResources().getDisplayMetrics().density;
paint.setTextSize(20*scale);
//pWidth is the parent width,subtracting 55dps because of the button on the right of each entry
pWidth = parent.getWidth() - (55*scale);
//decide which index to set
            if (indx==1){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.first)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=3;
            }
            if (indx==2){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.first)).getText()).toString())+paint.measureText(((Spannable)((TextView)v.findViewById(R.id.second)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=3;
            }
            if (indx==3){
                v.findViewById(R.id.kwdstwo).setVisibility(View.VISIBLE);
                if ((pWidth-paint.measureText(word+\"...\"))<0)
                    ((TextView)v.findViewById(R.id.fourth)).setTextSize(16);
            }
            if (indx==4){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.fourth)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=6;
            }
            if (indx==5){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.fourth)).getText()).toString())+paint.measureText(((Spannable)((TextView)v.findViewById(R.id.fifth)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=6;
            }
            if (indx==6){
                v.findViewById(R.id.kwdsthree).setVisibility(View.VISIBLE);
                if ((pWidth-paint.measureText(word+\"...\"))<0)
                    ((TextView)v.findViewById(R.id.seventh)).setTextSize(16);
            }
            if (indx==7){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.seventh)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=9;
            }
            if (indx==8){
                if ((pWidth-(paint.measureText(((Spannable)((TextView)v.findViewById(R.id.seventh)).getText()).toString())+paint.measureText(((Spannable)((TextView)v.findViewById(R.id.eighth)).getText()).toString())+paint.measureText(word+\"...\")))<0)
                    indx=9;
            }
            if (indx==9){
                v.findViewById(R.id.kwdsfour).setVisibility(View.VISIBLE);
                if ((pWidth-paint.measureText(word+\"...\"))<0)
                    ((TextView)v.findViewById(R.id.tenth)).setTextSize(16);
            }
//based on the indx,populate the given TextView,again this is based on the 4x3 model and not the 5x5 model
if (indx==0)
    index = (TextView) v.findViewById(R.id.first);
else if (indx==1)
index = (TextView) v.findViewById(R.id.second);
else if (indx==2)
index = (TextView) v.findViewById(R.id.third);
else if (indx==3)
index = (TextView) v.findViewById(R.id.fourth);
else if (indx==4)
index = (TextView) v.findViewById(R.id.fifth);
else if (indx==5)
index = (TextView) v.findViewById(R.id.sixth);
else if (indx==6)
index = (TextView) v.findViewById(R.id.seventh);
else if (indx==7)
index = (TextView) v.findViewById(R.id.eighth);
else if (indx==8)
index = (TextView) v.findViewById(R.id.ninth);
else if (indx==9)
index = (TextView) v.findViewById(R.id.tenth);
else if (indx==10)
index = (TextView) v.findViewById(R.id.eleventh);
else
index = (TextView) v.findViewById(R.id.twelth);
indx++;
请注意，在这种情况下，indx是我的类中定义的全局变量，并设置为0。因此，当ListView中的另一个条目再次发生这种情况时，indx设置回0。如果使用此方法，则必须对此进行说明再三，一而再再而三。如果这没有任何意义，请随时在此处评论，以便我澄清我的答案。     
textviews容器容器对齐对齐超出重新

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...