2015-11-20 2 views
0

Я хочу, чтобы мой экран в android был разделен на 4 равные части одинакового размера. Он должен работать в ландшафтном режиме. This is an example of how i want it to look likeразделите экран на 4 равные части - android

+1

Вы что-то пробовали? – JFPicard

+0

Я пробовал использовать две линейные макеты, но я смог разделить страницу пополам –

ответ

4

Вы можете сделать это, не используя ничего, кроме LinearLayouts и весов:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="#ffffff" 
    android:padding="10dp" > 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight=".5" 
     android:orientation="horizontal"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight=".5" 
      android:orientation="vertical" 
      android:layout_marginRight="5dp" 
      android:layout_marginBottom="5dp" 
      android:background="#ff0000"/> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight=".5" 
      android:orientation="vertical" 
      android:layout_marginLeft="5dp" 
      android:layout_marginBottom="5dp" 
      android:background="#ff8000"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight=".5" 
     android:orientation="horizontal"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight=".5" 
      android:orientation="vertical" 
      android:layout_marginRight="5dp" 
      android:layout_marginTop="5dp" 
      android:background="#336699"/> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight=".5" 
      android:orientation="vertical" 
      android:layout_marginLeft="5dp" 
      android:layout_marginTop="5dp" 
      android:background="#993366"/> 

     </LinearLayout> 

</LinearLayout> 

UPDATE: с 10dp "пробел" вокруг и между блоками. Если вы также хотите применить закругленные углы к каждому блоку, например, на скриншоте, посмотрите на xml-чертежи android. Они могут быть применены к android:background вместо однотонных цветов, как в моем примере;)

UPDATE 2: создания закругленных углов с XML Drawable:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners 
     android:radius="10dp" /> 
    <solid 
     android:color="#ff8000" /> 
</shape> 

Сохраните XML вытяжке в вашей вытяжке директории так же, как вы бы с любыми другими изображениями (PNG/JPG/и т.д.) и ссылаться на него из ваших взглядов, например:

android:background="@drawable/your_xml_drawable_res" 

конечно, если применять один и тот же ресурс, как фон для всех 4 squa res, вы получите четыре оранжевых (# ff8000) фона. Вы могли бы просто создать 4 копии вышеперечисленного xml и изменить android:color в каждой копии на уникальный оттенок.

И вот об этом;)

+0

Спасибо, парень;) ты мне очень помог –

+0

Прохладный! :) Если вы хотите закругленные углы, как в скриншоте вашего примера, есть способы сделать это тоже. Посмотрите на xml drawables. – mjp66

+0

как я могу это сделать? : o –

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

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight=".5" 
    android:orientation="horizontal"> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight=".5" 
     android:orientation="vertical" 
     android:background="#ff0000"/> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight=".5" 
     android:orientation="vertical" 
     android:background="#ff8000"/> 

</LinearLayout> 


<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight=".5" 
    android:orientation="horizontal"> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight=".5" 
     android:orientation="vertical" 
     android:background="#336699"/> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight=".5" 
     android:orientation="vertical" 
     android:background="#993366"/> 

</LinearLayout> 

1

В дополнение к mjp66 answer я могу сказать, что эта схема может быть лучше сделано с помощью GridLayout из библиотеки поддержки. В этом случае вам не нужно следить за изменениями в нескольких столбцах, если они будут.

Ваш код будет выглядеть следующим образом:

<android.support.v7.widget.GridLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:rowCount="2" 
    app:columnCount="2"> 

    <View 
     android:id="@+id/top_left" 
     app:layout_gravity="fill_horizontal" 
     app:layout_columnWeight="1" 
     app:layout_rowWeight="1"/> 

    <View 
     android:id="@+id/top_right" 
     app:layout_gravity="fill_horizontal" 
     app:layout_columnWeight="1" 
     app:layout_rowWeight="1"/> 

    <View 
     android:id="@+id/bottom_left" 
     app:layout_gravity="fill_horizontal" 
     app:layout_columnWeight="1" 
     app:layout_rowWeight="1"/> 

    <View 
     android:id="@+id/bottom_right" 
     app:layout_gravity="fill_horizontal" 
     app:layout_columnWeight="1" 
     app:layout_rowWeight="1"/> 

</android.support.v7.widget.GridLayout> 

Таким образом, вам не нужно заботиться о ширине/высоте, расположение будет выполняться автоматически.

+0

Это довольно приятный способ сделать это :) – mjp66

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