重新调整TextViews如果拓展集装箱过去 [英] Realign TextViews If Expands Past Container

问题描述

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

I have a ListView, and I want to customize the layout of each item in the list so that it has a button on the right and a section to the left of the button that has multiple words that are TextViews (i.e. each TextView in the left hand side will be of one word). Here's a picture of what I mean:

现在我已经能够顺利拿到按钮画面，我想它（具有已定义40dp的宽度）。如果我只是把一个的RelativeLayout的TextViews，我注意到他们堆叠在彼此的上面，所以我说机器人：layout_toRightOf在每个TextViews第相应。显然，这意味着我将永远不会有下文对方的话。我已经建立了这种布局使得它具有40dp的填充，以它的右侧（这样TextViews没有打算后面的按钮或碰撞到它）的左侧。会发生什么事是TextViews将完美排队顶部，然后过去几年无法挤进将垂直扩展，以填补左盒侧面。我想有左框区域（与TextViews）成立，这样，如果一个TextView将要击中右墙（技术上从父的右墙上的40dp填充），它会向下移动并一路向左如此的话读起来像一本书。还注意，将在本左手边是从1-5 TextViews（字）的任何位置为在ListView任何给定项。我是pretty确信，如果我能得到我的布局，我想它的方式，我将永远不会有担心左侧堆放大于按钮图像（这将是一个容易解决的问题，无论如何）高。这里是我的code：

Right now I have been able to successfully get the ButtonImage where I want it (with a defined width of 40dp). If I simply put the TextViews in a RelativeLayout, I noticed they stack on top of each other, so I added "android:layout_toRightOf"s in each of the TextViews accordingly. Obviously, this means that I will never have words below each other. I have set up the left side of this layout such that it has padding of 40dp to the right of it (so the TextViews weren't going behind the button or colliding into it). What happens is the TextViews will line up perfectly at the top and then the last few that can't squeeze in will expand vertically to fill the left box side. I would like to have the left box area (with the TextViews) set up such that, if a TextView is going to hit the right wall (technically the 40dp padding from the parent's right wall), it will be moved down and all the way to the left so the words read like a book. Also note that there will be anywhere from 1-5 TextViews (words) in this left hand side for any given item in the ListView. I'm pretty sure that, if I can get my layout the way I want it, I will never have to worry about the left hand side stacking higher than the button image (which would be an easily solvable problem anyhow). Here's my code:

<?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。如果有不清楚的地方，让我知道。并感谢您对您能给我任何帮助！我真的希望这是可能的。

Before you guys ask, yes there really is a need to have a TextView per word (unfortunately ). If anything is unclear, let me know. And thank you for any help you can offer me! I really hope this is possible.

推荐答案

所以我在第一自然的方法之一可能会想到做到了这一点。我设置了堆放在彼此的顶部，给它一个TableLayout那​​种感觉水平定向LinearLayouts的5x5的表。我没有用一个TableLayout这样我就可以轻松拥有各自的LinearLayout行初始设置为水涨船高的知名度并在需要时作出可见（所以也没给每个条目臃肿的感觉）。这里是什么，我做了一个例子：

So I achieved this in the first natural way one would probably think of. I set up a 5x5 "table" of horizontally oriented LinearLayouts that stacked on top of each other to give it a TableLayout sort of feel. I did not use a TableLayout so I could easily have each LinearLayout "row" initially set to visibility of "gone" and make visible when needed (so it didn't give each entry a bloated feel). Here's an example of what I did:

<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，所有这些都占用一整行）。

In the example, I am using a 4x3 sort of "table" layout, but I changed this to a 5x5 (in the scenario that there may be 5 TextViews, all of which take up an entire row).

我所做的旁边是创建一个非常简单的排序算法，我填充每个行的第一个TextView的不管是什么，但之后每次的TextView将填充只有在容器的最大宽度减去的宽度在同一行中被进入TextView的字和preceding的宽度已经填充TextViews大于或等于零。也就是说，如果下一个字的宽度不会溢出过去父的宽度。这是它看起来像：

What I did next was to create a very simple sort of algorithm where I populate the first TextView of each row no matter what, but each TextView after that would be populated only if the maximum width of the container minus the width of the word that was going into the TextView and the width of the preceding already populated TextViews on the same row was greater than or equal to zero. That is, if the width of the next word would not overflow past the width of the parent. This is what it looked like:

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一个全局变量，如果你必须考虑到这一点一遍又一遍使用这种方法。如果有任何这样做没有任何意义，随意在这里发表评论，这样我就可以澄清我的答案。

Note that in this case, indx is a global variable defined in my class and set as 0. So, when this happens again for another entry in the ListView, indx is set back to 0. You must account for this if you use this method over and over again. If any of this does not make any sense, feel free to comment on here so I can clarify my answer.

这篇关于重新调整TextViews如果拓展集装箱过去的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！