重新对齐TextViews如果扩展过去的容器

Question

我有一个ListView，我想自定义列表中的每个项目的布局，以便它有一个按钮在右边，并有一个按钮的左侧有多个单词是TextViews（即左侧的每个TextView将是一个单词）。这里是我的意思图片：

现在我已经能够成功地得到ButtonImage我想要它（具有40dp的定义宽度）。如果我只是把TextView放在一个RelativeLayout中，我注意到它们堆叠在一起，所以我在每个TextView中相应地添加了“android：layout_toRightOf”。很显然，这意味着我永远不会有彼此之下的言辞。我已经在这个布局的左边设置了它的右边有40dp的填充（所以TextViews不会落在按钮后面或碰撞到它）。会发生什么情况是TextViews将完美排列在顶部，然后最后几个无法挤入的部分将垂直展开以填充左侧框。我想要设置左边框区域（使用TextViews），使得如果TextView要打到右侧墙壁（技术上来自父级右侧墙的40dp填充），它将一直向下移动到左边，所以这些词读得像一本书。还要注意，对于ListView中的任何给定项，左侧都会有1-5个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" 
> 
    <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每个单词（不幸）。如果有什么不清楚的地方，让我知道。并感谢您为我提供的任何帮助！我真的希望这是可能的。

Answer 1

所以我在第一自然的方式，一个可能会认为达到了这个。我设置了一个水平方向的LinearLayouts的5x5“桌子”，它们相互堆叠在一起，给它一种TableLayout的感觉。我没有使用TableLayout，所以我可以轻松地将每个LinearLayout“行”初始设置为“去过”的可见性，并在需要时使其可见（所以它不会给每个条目带来臃肿的感觉）。这里是什么，我做了一个例子：

<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的一种“表格”布局，但我把它改为一个5×5（在方案中，可能有5个TextViews，所有其中占用整行）。

接下来我做的是创建一个非常简单的算法，其中我填充每行的第一个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.如果你一遍又一遍地使用这个方法，你必须考虑到这一点。如果这些没有任何意义，请随时在这里发表评论，以便我可以澄清我的答案。

Answer 2

我在你的代码上做了一些修改。现在它按照您的期望工作得很好。

无法投票。

<?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> 

感谢 迪帕克