文本块和图像的定位

时间:2012-02-03 10:54:14

标签: android android-layout relativelayout android-imageview textview

我有三个文本块和一个图像,我希望将其放入草图中指示的布局中。 (忽略红线一秒钟。) enter image description here
(我知道质量很糟糕。如果有人可以推荐我一个体面的(开放式)os x / linux图形编辑器,我会很感激!(不,不是gimp!))

我的想法是解决这个问题:

  • 相对布局。
  • 将第二个文本块相对于第一个文本块放置。

e.g:

android:layout_below=text1  
android:layout_ (make it "float" to screen's right edge - not sure how to do that, yet.
  • 相对于第1和第2块的第三个文本块。

e.g:

android:layout_below=text2
android:layout_alignLeft = text1

确定。不,让我们看看图像。这是任意大小所以我想我可以适应它的一些对齐。如果你知道从草图中看到红线,我会相应地对齐图像。

android:layout_alignTop = text2
android:layout_alignBottom = text2
android:layout_alignLeft = text1

然而,我在做布局方面并不是很擅长,当我试图像这样实现它时,4个内容或多或少地在屏幕上被敲了一下但我从来没有将它们全部放到位置。

我能达到的最接近的是这个,但我不喜欢在那里使用硬编码限制。我担心它不是那么灵活。
虽然我不得不限制图像的显示尺寸,我希望周围的文本块,机器人足够聪明,可以自己计算尺寸。

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip"
    android:text="text1" />

<ImageView
    android:id="image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="text1"
    android:layout_marginRight="7dip"
    android:layout_marginTop="5dip"
    android:adjustViewBounds="true"
    android:maxHeight="150sp"
    android:maxWidth="150sp"
    android:src="srcFile" />

<TextView
    android:layout_marginTop="5dip"
    android:id="text2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="image"
    android:layout_below="text1"
    android:layout_toRightOf="image"
    android:text="text2" />

<TextView
    android:id="text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="image"
    android:layout_marginTop="10dip"
    android:text="text3" />

所以我想听听你对我的方法的看法,以及我是否可以改进以及如何实际实现它。

编辑: 所以我想找到一个解决方案,我可以删除这部分代码,因为我担心它不够灵活:

android:maxHeight="150sp"
android:maxWidth="150sp"

3 个答案:

答案 0 :(得分:1)

可以保持图像的比例并在没有代码的情况下调整其大小。只需使用线性布局并相应地加权视图

<TextView
       android:id="@+id/text1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="text1" />

   <LinearLayout
       android:id="@+id/ll"
       android:layout_below="@+id/text1"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:weightSum="2"
       android:orientation="horizontal" >

       <ImageView
           android:id="@+id/image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight="11"
           android:adjustViewBounds="true"
           android:src="srcFile" />

       <TextView
           android:id="@+id/text2"
           android:layout_weight="1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="text2" />
   </LinearLayout>

   <TextView
       android:id="@+id/text3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/ll"
       android:text="text3" />

答案 1 :(得分:0)

简单的解决方案可能是最好的。使用方向设置为垂直或水平的linear layout

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="text1" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal">
        <ImageView
            android:id="image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginRight="7dip"
            android:layout_marginTop="5dip"
            android:adjustViewBounds="true"
            android:maxHeight="150sp"
            android:maxWidth="150sp"
            android:src="srcFile" />

        <TextView
            android:layout_marginTop="5dip"
            android:id="text2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="text2" />

    </LinearLayout>
    <TextView
        android:id="text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="text3" />
</LinearLayout>

答案 2 :(得分:0)

这就足够了

将图片ID修复为

android:id="@+id/image"

并使用

android:layout_toRightOf="@+id/image"
android:layout_below="@+id/text1"

在第二个文本中

仅限第三名

android:layout_below="@+id/text2"

LinearLayouts ...我也喜欢它们,它们很容易,但很慢 - 不要使用它们。