GridLayout - Подравняващ елемент

Опитвам се да намаля разстоянието между 2 колони, опитах да използвам отрицателни полета, но не се получи. Има ли начин да доближа двата елемента в изображението?

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:useDefaultMargins="true"
    android:alignmentMode="alignBounds"
    android:columnOrderPreserved="false"
    android:layout_gravity="center"
    android:orientation="horizontal"
    android:stretchMode="columnWidth"
    android:background="@color/orange"
    android:textSize="12sp"
    android:columnCount="8">
  <ImageButton
        android:id="@+id/settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="1"
        android:layout_gravity="left"
        android:src="@drawable/settings" />
    <TextView
        android:id="@+id/currentCityName"
        android:layout_column="2"     
        android:textSize="22sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="City name"
        android:layout_columnSpan="4"
        android:layout_gravity="center_horizontal"

        />
  <ImageButton
        android:id="@+id/refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="7"

        android:layout_columnSpan="1"
        android:layout_gravity="right"
        android:src="@drawable/reload" />
    <ImageView
        android:id="@+id/currentWeatherImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="8"
        android:layout_rowSpan="3"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/cloud" />
    <ImageView
        android:id="@+id/humidityIcon"
        android:layout_width="20dp"         
        android:paddingTop="10dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:layout_marginRight="0dp"
        android:layout_gravity="left"
        android:background="#000000"
        android:src="@drawable/humidity" />
    <TextView
        android:id="@+id/humidity"       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:paddingTop="10dp"
        android:paddingLeft="0dp"
        android:layout_marginLeft="0dp"
        android:layout_gravity="left"
        android:background="#FFFFFF"
        />
    <TextView
        android:id="@+id/temperature"
        android:layout_columnSpan="4"
        android:layout_rowSpan="2"
        android:textSize="49sp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:layout_gravity="center_horizontal"/>
    <ImageView
        android:id="@+id/windSpeedIcon"
        android:layout_width="30dp"
        android:layout_marginRight="1dp"
        android:paddingRight="1dp"
        android:layout_gravity="right"
        android:src="@drawable/wind" />

    <TextView
        android:id="@+id/windSpeed"
        android:textSize="12sp"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        />
    <!-- android:layout_width="40dp" -->
    <TextView
        android:id="@+id/precipitationIcon"
        android:textSize="28sp"
        android:layout_width="40dp"
        />
    <TextView
        android:id="@+id/precipitation"
        android:layout_column="0"
        android:textSize="13sp"
        android:layout_width="40dp"
        />
    <TextView
        android:id="@+id/windDirection16Point"          
        android:textSize="13sp"
        android:layout_width="80dp"
        android:layout_columnSpan="2"
        />
    <TextView
    android:id="@+id/weatherDescription"
    android:layout_gravity="center_horizontal"
    android:layout_row="7"
    android:layout_columnSpan="8"/>

<TextView
    android:id="@+id/section_label"
    android:layout_margin="5dp" 
    android:layout_columnSpan="8" />    
<EditText
    android:minLines="4"
    android:maxLines="4"
    android:id="@+id/edit"
    android:layout_columnSpan="8"/>

output image


android android-layout android-gridlayout
person Gaurav    schedule 23.04.2013    source източник

Отговори (5)


arrow_upward
3
arrow_downward

Предлагам прилагането на целия изглед с помощта на RelativeLayout, трябва да бъде най-доброто решение за целия изглед.

person Raanan    schedule 30.04.2013
comment
Това изглежда тривиално да се направи в RelativeLayout Бих използвал това. - person draksia; 01.05.2013

arrow_upward
2
arrow_downward

Справяте се с грешен проблем – питате как да намалите разстоянието между колоните в мрежово оформление, но може би не е трябвало да използвате такова оформление на първо място!

Това, което трябваше да използвате за конкретното си оформление, е комбинация от относително позициониране и съставни чертежи (тук, с android:drawableStart).

Резултат от използването на посочения по-долу код

<?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="80dp"
    android:background="#d89018"
    android:paddingBottom="4dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="4dp"
    >

    <TextView
        android:id="@+id/temperature"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:text="25 ℃"
        android:textColor="#fff"
        android:textSize="49sp"
        />

    <TextView
        android:id="@+id/humidity"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:drawableStart="@drawable/humidity"
        android:gravity="center_vertical"
        android:text="83 %"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/windSpeed"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:drawableStart="@drawable/wind"
        android:gravity="center_vertical"
        android:text="19 km/h"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/precipitation"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:drawableStart="@drawable/precipitation"
        android:gravity="center_vertical"
        android:text="0.1 mm"
        android:textColor="#fff"
        />

    <TextView
        android:id="@+id/windDirection16Point"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignLeft="@id/windSpeed"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:drawableStart="@drawable/windDirection"
        android:gravity="center_vertical"
        android:text="NNW"
        android:textColor="#fff"
        />

</RelativeLayout>

Не само това оформление е по-просто, вие също така позволявате на Android да се погрижи за цялото разстояние вместо вас. За да промените разстоянието между съставния чертеж и текста, използвайте android:drawablePadding в кода на оформлението по-горе; в Java код, това би било TextView.setCompoundDrawablePadding) .

Икони, използвани за пробата: вода, windsock, дъждовно време и роза на ветровете.

person Diti    schedule 01.09.2016

arrow_upward
1
arrow_downward

Мисля, че това, което се случва, е, че вашите изгледи се разтягат, защото се опитват да съответстват на ширината на друг изглед в техните колони.

Опитайте да намалите columnSpan на вашите Views или разделете оформлението си на два отделни GridLayouts.

Или обмислете използването на различно оформление. Бих препоръчал RelativeLayout тук вместо GridLayout, но не знам как това се вписва в по-голям прозорец.

person Jschools    schedule 23.04.2013
comment
Когато поставя елементи в LinearLayout (вложени в gridlayout), елементът изобщо не се показва pastebin.com/4wXpmV9d - person Gaurav; 25.04.2013

arrow_upward
0
arrow_downward

Опитайте тази:

въведете описание на изображението тук

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="100dp">

    <LinearLayout
      android:id="@+id/col1"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.4"
      >
        <LinearLayout
          android:id="@+id/col1_row1"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="83%"/>
      </LinearLayout>         
        <LinearLayout
          android:id="@+id/col1_row2"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="1.0mm"/>
      </LinearLayout>
    </LinearLayout>  

    <LinearLayout
      android:id="@+id/col2"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.0"
      android:gravity="center"
      >
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="25'"
          android:textSize="50dp"
          />      
    </LinearLayout>

    <LinearLayout
      android:id="@+id/col3"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="2.4"
      >
        <LinearLayout
          android:id="@+id/col3_row1"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="19Km"/>
      </LinearLayout>         
        <LinearLayout
          android:id="@+id/col3_row2"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          >   
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/icon"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="NNW"/>
      </LinearLayout>
    </LinearLayout>

</LinearLayout>
person Mbt925    schedule 27.04.2013
comment
Дълбоки оформления - Оформленията с твърде много влагане са лоши за производителността. Обмислете използването на по-плоски оформления като RelativeLayout или GridLayout, за да подобрите производителността. Максималната дълбочина по подразбиране е 10. developer.android.com/training/improving -layouts/ - person Raanan; 02.05.2013
comment
Не мисля, че дълбочината 3 е твърде много! - person Mbt925; 02.05.2013
comment
Приканваме ви да спорите с примера в статията, която свързах. - person Raanan; 02.05.2013
comment
прав си, ако исканото оформление беше окончателно! Предполагам, че вероятно ще нарасне и ще съдържа повече елементи. така че просто оформление на мрежата не е достатъчно. - person Mbt925; 02.05.2013
comment
Ако той ще добави повече елементи, това е просто по-добра причина да се направи по-ефективен и вероятно ще бъде по-лесно да се добавят елементи с помощта на RelativeLayout. - person Raanan; 02.05.2013
comment
ако може просто да се подредят повече елементи! но вложеният дизайн очевидно се нуждае от многослойно оформление. но в случай на текущия въпрос, давам правото на вас. - person Mbt925; 03.05.2013

arrow_upward
0
arrow_downward

Мисля, че трябва да промените usedefaultMargins на false и да дадете свои собствени маржове на елементите.

android:useDefaultMargins="false";
person Ravi    schedule 29.04.2013