2014-01-25 4 views
3

Я хочу добиться этого макета:Реализация этого макета

enter image description here

Ближайшее, что я был в состоянии прийти к такой:

enter image description here

Компоновка до сих пор это :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_centerInParent="true" 
    android:layout_centerVertical="true" 
    android:baselineAligned="true" 
    android:orientation="vertical" 
    android:weightSum="4" > 

    <LinearLayout 

     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:paddingBottom="8dip" > 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 
    </LinearLayout> 

    <LinearLayout 

     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:paddingBottom="8dip" 

     > 

     <ImageButton 

      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" 

      /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 
    </LinearLayout> 

    <LinearLayout 

     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:paddingBottom="8dip" > 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:paddingBottom="8dip" > 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:background="@null" 
      android:scaleType="fitCenter" 
      android:src="@drawable/myimage" /> 
    </LinearLayout> 

</LinearLayout> 

Как создать ab ove layout?

+0

RelativeLayout бы мне гораздо проще. Очень сложно делать то, что вы хотите в LL. – Simon

ответ

1

Этот макет на самом деле работает в соответствии с вашими ожиданиями:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 
    <!-- Center layout --> 
    <LinearLayout 
     android:id="@+id/llCenter" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_vertical" 
     android:layout_centerInParent="true" 
     android:paddingBottom="8dp" 
     android:orientation="vertical" 
     > 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
    </LinearLayout> 
    <!-- Left layout --> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerVertical="true" 
     android:layout_toLeftOf="@id/llCenter" 
     android:paddingBottom="8dp" 
     android:orientation="vertical" 
     > 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
    </LinearLayout> 
    <!-- Right layout --> 
    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerVertical="true" 
     android:layout_toRightOf="@id/llCenter" 
     android:paddingBottom="8dp" 
     android:orientation="vertical" 
     > 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:scaleType="fitCenter" 
      android:src="@drawable/ic_launcher" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

Результат:

enter image description here

+0

Добро пожаловать, Quaki Gabbar;) –

2

создать три линейных выхода с ориентацией, установленной на вертикальные и равные макеты. дочерние представления каждого линейного макета должны также иметь равные макеты. установите гравитацию первого и третьего линейных выходов как центрально-вертикальных.

1

Почему бы вам не оставить ненужные макеты ... ?? и использовать следующие ...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity" > 

    <LinearLayout 
     android:layout_width="100dp" 
     android:layout_height="match_parent" 
     android:orientation="vertical" > 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="55dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="75dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="95dp" 
      android:orientation="vertical" > 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="100dp" 
     android:layout_height="match_parent" 
     android:orientation="vertical" > 
     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="55dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="75dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="95dp" 
      android:orientation="vertical" > 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="100dp" 
     android:layout_height="match_parent" 
     android:orientation="vertical" > 
     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="55dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="75dp" 
      android:orientation="vertical" > 
     </LinearLayout> 

     <LinearLayout 
      android:layout_width="100dp" 
      android:layout_height="95dp" 
      android:orientation="vertical" > 
     </LinearLayout> 
    </LinearLayout> 

</LinearLayout> 
+0

Вы можете оставить верхний макет, чтобы почувствовать, что его нет ... Если вы не можете понять, что я говорю, я могу объяснить с помощью кода ... далее .... – Nabin

+0

эй, Набин, пожалуйста, продумайте. Я добавил кнопки изображения, но я не получаю его – oat

+0

Это очень неэффективно и будет медленным во время выполнения. – Simon

1

насчет расширения ViewGroup?

Если вы проверили документацию, вы можете создать свой пользовательский контейнер для детей.

В основном в макете у вас есть следующие правила:

  • Тяжесть детей сосредоточенные вертикально
  • Для нечетных столбцов среднего элемента перекрытие с линией, которая идет слева направо по центру по вертикали
  • для четных столбцов вы получили п/2 элементов по этой линии, а остальные из них (п/2) ниже той же одной

Если вы в состоянии сделать т если вы создадите собственный макет, за счет большего времени на разработку, у вас будет лучший результат, и не имеет значения количество элементов, которые вы хотите добавить ... у вас будет макет, который может управлять разными ситуации.

Я предлагаю вам также ознакомиться с custom attributes, чтобы обеспечить интеграцию атрибутов, которые вам понадобятся непосредственно в декларации XML.

Смежные вопросы