Question

我有一个ListView，我想自定义列表中每个项目的布局，以便它在右边有一个按钮，按钮左边的一个部分有多个单词是TextViews（即每个TextView）在左侧将是一个单词）。这是我的意思的图片： Image button on right and left side has TextViews (squiggly lines)

现在我已经能够成功获取我想要的ButtonImage（定义宽度为40dp）。如果我只是将TextViews放在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

我处理了您的代码并进行了一些修改。现在按照你的期望工作正常。

不要投票。

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

由于迪帕克

Answer 2

所以我以人们可能想到的第一种自然方式实现了这一点。我设置了一个水平定向的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类型的“表格”布局，但我将其更改为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如果扩展过去的容器

2 个答案: