android布局从屏幕上推送视图

For building an application, we have several lists. the problem exists with a list item, which is custom, but very simple nontheless. The format is:

对于构建应用程序，我们有几个列表。这个问题存在于列表项中，它是自定义的，但是非常简单。格式是:

This represents one list item with 2 textviews and one image view

它表示一个带有两个textview和一个image view的列表项

Note that title and date are actually right underneath eachother and the image is on the right side, with center vertical as attribute.The image should NOT be in between the two text views

注意，标题和日期实际上在彼此的下面，图像在右侧，中间是垂直的属性。图像不应该位于两个文本视图之间

I will give the XML first and then explain the exact problem.

我将首先给出XML，然后解释确切的问题。

The XML:

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView 
            android:textSize="16dip" 
            android:id="@+id/title"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/>

        <TextView 
            android:textSize="12dip" 
            android:id="@+id/date"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/>
    </LinearLayout>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginRight="5dip" >

        <ImageView
            android:id="@+id/validationStateImg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
    </RelativeLayout>
</LinearLayout>

Problem: In some sense, this layout displays everything exactly as the ascii representation. What does NOT function correctly is when the text is becoming long. In cases where the text is long, but not long enough to take 2 lines, it just makes the imageview tiny.

问题:在某种意义上，这个布局显示的所有内容都与ascii表示形式完全相同。当文本变长时，不能正确地运行。如果文本很长，但不长到可以取2行，它只会使imageview变小。

In other cases, it just pushes imageview completely off the screen..

在其他情况下，它只是将imageview完全从屏幕上推开。

What I need is, when the length of either the date or the other textview is too long, to break to a new line. And ofcourse it needs to be a solution portable to all sorts of screen sizes.

我需要的是，当日期或另一个textview的长度太长时，不能切换到新的行。当然，它需要是一种可移植到各种屏幕大小的解决方案。

I'm not a UI artist, so, apologies if I'm abusing layouts in a sense that they should not be used.

我不是一个UI艺术家，所以，如果我滥用布局的意思是它们不应该被使用，我道歉。

Aside help, tips and hints are also welcome!

除了帮助，建议和提示也是受欢迎的!

4 个解决方案

#1

I think your best bet is one simple RelativeLayout:

我认为你最好的选择是一个简单的相对选择:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    >
    <ImageView
        android:id="@+id/validationStateImg"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical"
        />
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/validationStateImg"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:textSize="16dp"
        />
    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/validationStateImg"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/title"
        />
</RelativeLayout>

Snap the ImageView to the right side of the parent, and let the TextViews take the rest of the width, but aligned to the left of the ImageView.

将ImageView快照到父视图的右侧，让textview获取其余的宽度，但是对齐到ImageView的左侧。

#2

Hope this helps:

希望这有助于:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<LinearLayout
    android:layout_weight = "1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dasdfasdfasdfasdfsadfsdf dsfasdfasd asdfadsf dfasdfads asdfasdf"
        android:textSize="16dip" />

    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dasdfasdfasdfasdfsadfsdf"
        android:textSize="12dip" />
</LinearLayout>

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:gravity="center"
    android:layout_marginRight="5dip" >

    <ImageView
        android:id="@+id/validationStateImg"
        android:src="@drawable/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />
</RelativeLayout>

#3

I think in this case you need a different layout, check this one:

我认为在这种情况下你需要一个不同的布局，看看这个:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="wrap_content">
        <TextView 
           android:textSize="16dip" 
           android:id="@+id/title"
           android:layout_width="match_parent" 
           android:layout_height="wrap_content"/>
        <TextView 
           android:textSize="12dip" 
           android:id="@+id/date"
           android:layout_width="match_parent" 
           android:layout_height="wrap_content"/>
    </LinearLayout>
    <ImageView
       android:id="@+id/validationStateImg"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical"/>

</LinearLayout>

#4

If you don't want your image shrinking then you need to give it a specific ratio of the real estate that its parent offers.

如果你不希望你的形象缩水，你需要给它一个具体的比例，它的父母提供的房地产。

Specifically the LinearLayout that is its parent needs to have a weight_sum and then both the text and image need to have a layout_weight.

具体来说，作为父元素的线性布局需要有一个加权和，然后文本和图像都需要有一个layout_weight。

the weight should add up to the sum. The weight doesn't have to be a whole number and it's very important (and very counter intuitive) that the layout_width needs to be 0 (assuming that the two of them are sitting side by side)... so...

重量加起来等于总数。重量并不一定是一个整数，而layout_width必须是0(假设他们两个并排坐在一起)，这非常重要(而且非常反直觉)。所以…

I'm removing all the extra stuff below that you need to add back in and just leaving the important parts....

我删除所有多余的东西下面,您需要添加回去,只是离开....重要部分

<LinearLayout weight_sum=2 layout_height=fill_parent>
   <TextView layout_weight=2 layout_height=0dp/>
   <ImageView layout_weight=2 layout_height=0dp />
   <TextView layout_weight=2 layout_height=0dp/>
</LinearLayout>

This will split the LinearLayout in half and the left side will be text (which will wrap if it can) and the right side will be the image. You can adjust this by setting the sum to 3 and splitting up the sides to 2 and 1 in which case the text will be 2/3 of the screen and the image 1/3. Or leave the sum at 2 and have the left be 1.3 and the right .7 for a similar effect.

这将把线性布局一分为二，左侧是文本(如果可以的话，文本将被封装)，右侧是图像。你可以通过将和设为3并将两边分别为2和1来调整，在这种情况下，文本将是屏幕的2/3和图像的1/3。或者把和设为2，左边为1。3，右边为0。7。