Jak zrobić siatkę dopasowaną do rozmiaru ekranu

Question

Jak zrobić siatkę dopasowaną do rozmiaru ekranu

GridLayout Dokumentacja API jest bardzo trudna do nauczenia ......
czy jest ktoś, kto może mnie nauczyć, jak ustawić dziecko View, aby miało coś w rodzaju "wagi" LinearLayout ?

W tej chwili wygląda na to, że wszystkie są umieszczone po lewej stronie,
próbowałem wiele razy i nadal nie mogę zrobić tak, jak każda połowa szerokości ekranu.

Edited: Nie wiem, co mogę zrobić, gdy dzieci są wszystkie wrap_content...... nawet jeśli chcę ustawić jakiś obrazek w określonym rozmiarze, ta klasa pomaga mi zrobić ImageView wrap_content .........nie może działać normalnie, czy przegapiłem jakieś ustawienie ?!?

33

android widget

Author: 0X0nosugar, 2012-04-27

Source

8 answers

Po wielu próbach znalazłem to, czego szukałem w tym layoucie. Nawet przestrzenie liniowe z automatycznie dopasowanymi obrazami, z zachowanym współczynnikiem proporcji. Działa z krajobrazem i portretem z dowolną rozdzielczością ekranu i obrazu.

Nexus 7 Nexus 5 Nexus 10

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffcc5d00" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image1"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image2"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image3"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image4"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

14

Author: lubosz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-01 02:07:20

Począwszy od API 21 Dodano pojęcie wagi do GridLayout .

Aby Obsługiwać starsze urządzenia z Androidem, możesz użyć GridLayout z biblioteki wsparcia v7.

compile 'com.android.support:gridlayout-v7:22.2.1'

Poniższy XML przedstawia przykład użycia wag do wypełnienia szerokości ekranu.

android:id="@+id/choice_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="4dp"

grid:alignmentMode="alignBounds"
grid:columnCount="2"
grid:rowOrderPreserved="false"
grid:useDefaultMargins="true">

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    android:gravity="center"
    android:background="#FF33B5E5"
    android:text="Tile1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    android:gravity="center"
    android:background="#FF33B5E5"
    android:text="Tile2" />

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    android:gravity="center"
    android:background="#FF33B5E5"
    android:text="Tile3" />

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    grid:layout_columnWeight="1"
    grid:layout_gravity="fill_horizontal"
    android:gravity="center"
    android:background="#FF33B5E5"
    android:text="Tile4" />

9

Author: Adnan Abdollah Zaki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-20 13:02:13

Jeśli korzystasz z fragmentów, możesz programowo przygotować układ XML, a następnie elementy krytyczne

int thirdScreenWidth = (int)(screenWidth *0.33);

View view = inflater.inflate(R.layout.fragment_second, null);
View _container = view.findViewById(R.id.rim1container);
_container.getLayoutParams().width = thirdScreenWidth * 2;

_container = view.findViewById(R.id.rim2container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;

_container = view.findViewById(R.id.rim3container);
_container.getLayoutParams().width = screenWidth - thirdScreenWidth * 2;

Ten układ dla 3 równych kolumn. Pierwszy element zajmuje 2x2 Wynik na zdjęciu Tutaj wpisz opis obrazka

3

Author: Zed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-24 10:34:50

Po prostu krótka obserwacja i zauważ, że teraz możliwe jest użycie biblioteki wsparcia z ważonymi odstępami w GridLayout, aby osiągnąć to, co chcesz, zobacz:

Od API 21 rozkład GridLayout ' a nadmiaru przestrzeni spełnia zasadę ciężaru. W przypadku, gdy nie podano wag, przestrzegane są poprzednie konwencje, a kolumny i wiersze są traktowane jako elastyczne, jeśli ich widoki określają jakąś formę wyrównania w obrębie ich grup. Elastyczność widzenia jest w związku z tym wpływ na jego wyrównanie, które jest z kolei zazwyczaj definiowane przez ustawienie własności grawitacyjnej parametrów układu dziecka. Jeśli zdefiniowano wagę lub wyrównanie wzdłuż danej osi, element przyjmuje się jako elastyczny w tym kierunku. Jeśli nie ustawiono ciężaru lub wyrównania, zakłada się, że komponent jest nieelastyczny.

1

Author: AllDayAmazing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-18 08:48:56

Archiwizuję to używając LinearLayout

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="166dp"
            android:text="Tile1"
            android:gravity="center"
            android:background="#6f19e5"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="Tile2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:height="126dp"
            android:gravity="center"
            android:layout_weight=".50"
            android:background="#f1d600"/>

        <TextView
            android:text="Tile3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:height="126dp"
            android:gravity="center"
            android:layout_weight=".50"
            android:background="#e75548"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="Tile4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:height="126dp"
            android:gravity="center"
            android:layout_weight=".50"
            android:background="#29d217"/>

        <TextView
            android:text="Tile5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:height="126dp"
            android:gravity="center"
            android:layout_weight=".50"
            android:background="#e519cb"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="176dp"
            android:text="Tile6"
            android:gravity="center"
            android:background="#09eadd"/>
    </LinearLayout>
</LinearLayout>

1

Author: NaveenDA,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-03 08:47:45

Dla innych peeps: jeśli musisz użyć GridLayout ze względu na wymagania projektu, to użyj go, ale sugerowałbym wypróbowanie TableLayout, ponieważ wydaje się dużo łatwiejsze do pracy i osiąga podobny wynik.

Docs: https://developer.android.com/reference/android/widget/TableLayout.html

Przykład:

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow>

        <Button
            android:id="@+id/test1"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 1"
            android:drawableTop="@mipmap/android_launcher"
            />

        <Button
            android:id="@+id/test2"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 2"
            android:drawableTop="@mipmap/android_launcher"
            />

        <Button
            android:id="@+id/test3"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 3"
            android:drawableTop="@mipmap/android_launcher"
            />

        <Button
            android:id="@+id/test4"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 4"
            android:drawableTop="@mipmap/android_launcher"
            />

    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/test5"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 5"
            android:drawableTop="@mipmap/android_launcher"
            />

        <Button
            android:id="@+id/test6"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:text="Test 6"
            android:drawableTop="@mipmap/android_launcher"
            />

    </TableRow>

</TableLayout>

0

Author: Braden Holt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-12 20:02:17

Czy znasz Widok.getViewTreeObserver().addOnGlobalLayoutListener ()

Dzięki temu można obliczyć rozmiary.

Osiągam Twój efekt UI przez GridView:

GridView g;
g.setNumColumns(2);
g.setStretchMode(GridView.STRETCH_SPACING_UNIFORM);

-3

Author: cox,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-04 03:55:19

score 58 · Accepted Answer

Uwaga : informacje poniżej poziomej linii nie są już dokładne wraz z wprowadzeniem Androida "Lollipop" 5, ponieważ GridLayout czy uwzględnia zasadę wag od poziomu API 21.

Cytat z Javadoc :

Nadmiarowy Rozkład Przestrzeni

Od API 21 rozkład GridLayout ' a nadmiaru przestrzeni zasada wagi. W przypadku, gdy nie podano wagi, poprzedni przestrzegane są konwencje, a kolumny i wiersze są brane jako elastyczne, jeśli ich poglądy określają jakąś formę wyrównania w ich grupy. Na elastyczność poglądu ma więc wpływ jego wyrównanie, które jest z kolei zazwyczaj definiowane przez ustawienie grawitacji właściwość parametrów układu dziecka. Jeżeli waga lub wyrównania zostały określone wzdłuż danej osi, wówczas element jest brany jako elastyczny w tym kierunku. Jeśli nie ustawiono ciężaru lub wyrównania, komponent jest zamiast tego zakłada się, że jest nieelastyczny.

Wiele elementów w tej samej grupie wierszy lub kolumn uważa się za działaj równolegle. Taka grupa jest elastyczna tylko wtedy, gdy wszystkie elementy w nim zawarte są elastyczne. Grupy wierszy i kolumn, które siedzą obie strony wspólnej granicy są natomiast uważane za działające w seria. Grupa złożona z tych dwóch elementów jest elastyczna, jeśli jednym z jego elementów jest elastyczność.

Aby rozciągnąć kolumnę, upewnij się, że wszystkie elementy wewnątrz niego zdefiniuj wagę lub grawitację. Aby zapobiec rozciąganiu się kolumny, upewnij się, że jeden ze składników w kolumnie nie definiuje waga lub grawitacja.

Gdy zasada elastyczności nie zapewnia pełnej disambiguation, algorytmy GridLayout faworyzują wiersze i kolumny, które są bliżej jego prawej i dolnej krawędzi. Żeby być bardziej precyzyjnym, GridLayout traktuje każdy ze swoich parametrów układu jako ograniczenie w zbiór zmiennych definiujących siatka-linie wzdłuż danej osi. Podczas layoutu, GridLayout rozwiązuje ograniczenia tak, aby zwrócić unikalne rozwiązanie tych ograniczeń, dla których wszystkie zmienne są mniej niż-lub-równa-odpowiadającej wartości w innych ważnych rozwiązanie.

Warto również zauważyć, że android.support.v7.widget.GridLayout zawiera te same informacje. Niestety nie wspomina o wersji biblioteki wsparcia, z którą została wprowadzona, ale commit , który dodaje funkcjonalność może być śledzony z powrotem do lipca 2014. W listopadzie 2014 roku Poprawiono obliczenia wagi i naprawiono błąd.

Dla bezpieczeństwa, upewnij się, że zaimportowałeś najnowszą wersję biblioteki gridlayout-v7.

Zasada "wagi", jak ją opisujesz, nie istnieje z GridLayout. Ograniczenie to jest wyraźnie wymienione w dokumentacji ; fragment poniżej. Mając to na uwadze, istnieją pewne możliwości wykorzystania "grawitacji"do nadmiarowego rozkładu przestrzeni. I sugerujemy zapoznanie się z dołączoną dokumentacją.

Ograniczenia

GridLayout nie zapewnia wsparcia dla Zasady wagi , ponieważ zdefiniowana wagowo. Ogólnie rzecz biorąc, nie jest więc możliwe skonfiguruj GridLayout, aby rozprowadzać nadmiar przestrzeni w nietrywialny proporcje między wieloma wierszami lub kolumnami. Niektóre typowe przypadki użycia mogą być jednak zakwaterowane w następujący sposób. Aby umieścić równe ilości przestrzeń wokół komponentu w grupy komórek; użyj wyrównania środka (lub grawitacji). Dla pełnej kontroli nad nadmiarowym rozkładem przestrzeni w rzędzie lub kolumny; użyj subview LinearLayout, aby trzymać komponenty w powiązana grupa komórek. Przy użyciu którejkolwiek z tych technik, niedźwiedź w należy pamiętać, że grupy komórek mogą być zdefiniowane jako nakładające się.

Aby uzyskać Przykład i kilka praktycznych wskazówek, spójrz na zeszłoroczny wpis na blogu przedstawiający widżet GridLayout .

Edit: nie sądzę istnieje podejście oparte na xml do skalowania płytek jak w aplikacji Google Play do "kwadratów" lub "prostokątów" dwukrotnie długości tych kwadratów. Jest to jednak z pewnością możliwe, jeśli zbudujesz swój układ programowo. Wszystko, co naprawdę trzeba wiedzieć, aby dwa osiągnąć to wymiary ekranu urządzenia.

Poniżej a (bardzo!) szybkie przybliżenie układu kafelków w aplikacji Google Play.

Point size = new Point();
getWindowManager().getDefaultDisplay().getSize(size);
int screenWidth = size.x;
int screenHeight = size.y;
int halfScreenWidth = (int)(screenWidth *0.5);
int quarterScreenWidth = (int)(halfScreenWidth * 0.5);

Spec row1 = GridLayout.spec(0, 2);
Spec row2 = GridLayout.spec(2);
Spec row3 = GridLayout.spec(3);
Spec row4 = GridLayout.spec(4, 2);

Spec col0 = GridLayout.spec(0);
Spec col1 = GridLayout.spec(1); 
Spec colspan2 = GridLayout.spec(0, 2);

GridLayout gridLayout = new GridLayout(this);
gridLayout.setColumnCount(2);
gridLayout.setRowCount(15);

TextView twoByTwo1 = new TextView(this);
GridLayout.LayoutParams first = new GridLayout.LayoutParams(row1, colspan2);
first.width = screenWidth;
first.height = quarterScreenWidth * 2;
twoByTwo1.setLayoutParams(first);
twoByTwo1.setGravity(Gravity.CENTER);
twoByTwo1.setBackgroundColor(Color.RED);
twoByTwo1.setText("TOP");
twoByTwo1.setTextAppearance(this, android.R.style.TextAppearance_Large);
gridLayout.addView(twoByTwo1, first);

TextView twoByOne1 = new TextView(this);
GridLayout.LayoutParams second = new GridLayout.LayoutParams(row2, col0);
second.width = halfScreenWidth;
second.height = quarterScreenWidth;
twoByOne1.setLayoutParams(second);
twoByOne1.setBackgroundColor(Color.BLUE);
twoByOne1.setText("Staff Choices");
twoByOne1.setTextAppearance(this, android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne1, second);

TextView twoByOne2 = new TextView(this);
GridLayout.LayoutParams third = new GridLayout.LayoutParams(row2, col1);
third.width = halfScreenWidth;
third.height = quarterScreenWidth;
twoByOne2.setLayoutParams(third);
twoByOne2.setBackgroundColor(Color.GREEN);
twoByOne2.setText("Games");
twoByOne2.setTextAppearance(this, android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne2, third);

TextView twoByOne3 = new TextView(this);
GridLayout.LayoutParams fourth = new GridLayout.LayoutParams(row3, col0);
fourth.width = halfScreenWidth;
fourth.height = quarterScreenWidth;
twoByOne3.setLayoutParams(fourth);
twoByOne3.setBackgroundColor(Color.YELLOW);
twoByOne3.setText("Editor's Choices");
twoByOne3.setTextAppearance(this, android.R.style.TextAppearance_Large_Inverse);
gridLayout.addView(twoByOne3, fourth);

TextView twoByOne4 = new TextView(this);
GridLayout.LayoutParams fifth = new GridLayout.LayoutParams(row3, col1);
fifth.width = halfScreenWidth;
fifth.height = quarterScreenWidth;
twoByOne4.setLayoutParams(fifth);
twoByOne4.setBackgroundColor(Color.MAGENTA);
twoByOne4.setText("Something Else");
twoByOne4.setTextAppearance(this, android.R.style.TextAppearance_Large);
gridLayout.addView(twoByOne4, fifth);

TextView twoByTwo2 = new TextView(this);
GridLayout.LayoutParams sixth = new GridLayout.LayoutParams(row4, colspan2);
sixth.width = screenWidth;
sixth.height = quarterScreenWidth * 2;
twoByTwo2.setLayoutParams(sixth);
twoByTwo2.setGravity(Gravity.CENTER);
twoByTwo2.setBackgroundColor(Color.WHITE);
twoByTwo2.setText("BOTOM");
twoByTwo2.setTextAppearance(this, android.R.style.TextAppearance_Large_Inverse);
gridLayout.addView(twoByTwo2, sixth);

Wynik będzie wyglądał nieco tak (na moim Galaxy "Nexus"): {]}

Układanie płytek przy użyciu GridLayout