позиционирование текстовых блоков и изображений - PullRequest
1 голос
/ 03 февраля 2012

У меня есть три текстовых блока и изображение, которое я хотел бы разместить в макете, как показано на эскизе. (Игнорируйте красные линии на секунду.) enter image description here
(Я знаю, что качество ужасное. Если кто-нибудь может порекомендовать мне достойный (открытый) графический редактор для OS X / Linux, я был бы признателен! (Нет, не GIMP!))

Моя идея состояла в том, чтобы решить проблему следующим образом:

  • Относительная компоновка.
  • позиционирует второй текстовый блок относительно первого.

например:.

android:layout_below=text1  
android:layout_ (make it "float" to screen's right edge - not sure how to do that, yet.
  • Третий текстовый блок относительно 1-го и 2-го блока.

например:.

android:layout_below=text2
android:layout_alignLeft = text1

Ok. Нет, давайте перейдем к изображению. Это произвольный размер, поэтому я подумал, что с некоторыми выравниваниями я мог бы вписать его. Если вы знаете, посмотрите на красные линии на эскизе, я думаю о выравнивании изображения соответствующим образом.

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 ]

1 голос
/ 03 февраля 2012

Можно сохранить пропорции изображения и настроить его размер без кода.Просто используйте линейные макеты и соответствующим образом взвесьте виды

<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" />
0 голосов
/ 03 февраля 2012

Было бы достаточно

восстановить идентификатор изображения как

android:id="@+id/image"

и использовать

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

во втором тексте

Длятолько третий

android:layout_below="@+id/text2"

LinearLayouts ... Мне они тоже нравятся, они простые, но медленные - не пользуйтесь ими много.

0 голосов
/ 03 февраля 2012

Простые решения, вероятно, являются лучшими.Используйте линейный макет с ориентацией, установленной на вертикальное или горизонтальное:

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