Android
Układy

Wprowadzenie

Składnia

• android: grawitacja = "góra | dół | lewy | prawy | środkowy_wertykalny | wypełnienie_wertykalny | środkowy_poziom | wypełnienie_poziom | środkowy | wypełnienie | zacisk_wertykalny | zacisk_poziom | początek | koniec"
• android: layout_gravity = "góra | dół | lewy | prawy | środkowy_werk | wypełnienie_werkalny | środkowy_poziom | wypełnienie_poziom | środkowy | wypełnienie | klip_wertykalny | clip_horizontal | początek | koniec"

Uwagi

Układ liniowy

LinearLayout to grupa ViewGroup która umieszcza swoje dzieci w jednej kolumnie lub w jednym wierszu. Orientację można ustawić, wywołując metodę setOrientation() lub używając atrybutu xml android:orientation .

1. Orientacja pionowa : android:orientation="vertical"

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />

</LinearLayout>

Oto zrzut ekranu, jak to będzie wyglądać:

2. Orientacja pozioma : android:orientation="horizontal"

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />
   
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />
   

LinearLayout obsługuje także przypisywanie wagi poszczególnym dzieciom za pomocą atrybutu android:layout_weight .

RelativeLayout

RelativeLayout to grupa ViewGroup która wyświetla widoki potomne w pozycjach względnych. Domyślnie wszystkie widoki potomne są rysowane w lewym górnym rogu układu, więc musisz zdefiniować pozycję każdego widoku, korzystając z różnych właściwości układu dostępnych w RelativeLayout.LayoutParams . Wartością każdej właściwości układu jest wartość logiczna, która umożliwia położenie układu względem nadrzędnego obiektu RelativeLayout lub identyfikator, który odwołuje się do innego widoku w układzie, względem którego widok powinien zostać ustawiony.

Przykład:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@mipmap/ic_launcher" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_toRightOf="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:hint="@string/hint" />

</RelativeLayout>

Oto zrzut ekranu, jak to będzie wyglądać:

Grawitacja i grawitacja układu

android: układ_grawitacyjny

• android:layout_gravity służy do ustawiania pozycji elementu w jego rodzicu (np. View dziecka wewnątrz Layout ).
• Obsługiwane przez LinearLayout i FrameLayout

android: grawitacja

• android:gravity służy do ustawiania pozycji zawartości wewnątrz elementu (np. tekstu w TextView ).

<?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="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="left"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimary"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimary"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimary"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorAccent"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorAccent"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorAccent"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="right"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimaryDark"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimaryDark"
            android:gravity="right"/>

    </LinearLayout>

</LinearLayout>

Który jest renderowany w następujący sposób:

GridLayout

GridLayout, jak sama nazwa wskazuje, to układ służący do rozmieszczania widoków w siatce. GridLayout dzieli się na kolumny i wiersze. Jak widać w poniższym przykładzie, ilość kolumn i / lub wierszy jest określona przez właściwości columnCount i rowCount . Dodanie widoków do tego układu doda pierwszy widok do pierwszej kolumny, drugi widok do drugiej kolumny, a trzeci widok do pierwszej kolumny drugiego rzędu.

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:columnCount="2"
    android:rowCount="2">

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/first"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/second"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/third"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

</GridLayout>

Układy procentowe

compile 'com.android.support:percent:25.3.1'

<android.support.percent.PercentFrameLayout
    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="match_parent">

    <FrameLayout
        app:layout_widthPercent="100%"
        app:layout_heightPercent="50%"
        android:background="@android:color/black" />

<android.support.percent.PercentFrameLayout>

<fraction name="margin_start_percent">25%</fraction>

 <ImageView
    app:layout_widthPercent="100%"
    app:layout_aspectRatio="178%"
    android:scaleType="centerCrop"
    android:src="@drawable/header_background"/>

FrameLayout

FrameLayout służy do blokowania obszaru na ekranie w celu wyświetlenia pojedynczego elementu. Możesz jednak dodać wiele elementów podrzędnych do FrameLayout i kontrolować ich pozycję w FrameLayout, przypisując grawitację każdemu dziecku, używając atrybutu android: layout_gravity .

Ogólnie FrameLayout służy do przechowywania pojedynczego widoku potomnego. Typowe przypadki użycia to tworzenie miejsc zastępczych do nadmuchiwania Fragments w Activity , nakładanie się widoków lub stosowanie do widoków pierwszego planu.

Przykład:

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

    <ImageView
        android:src="@drawable/nougat"
        android:scaleType="fitCenter"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <TextView
        android:text="FrameLayout Example"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:gravity="center"/>

</FrameLayout>

Będzie to wyglądać tak:

Układ koordynatora

compile 'com.android.support:design:25.3.1'

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coord_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/recycler_view"/>

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:color="@color/colorAccent"
        android:src="@mipmap/ic_add_white"
        android:layout_gravity="end|bottom"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout Scrolling Behavior

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:elevation="0dp"
        app:layout_scrollFlags="scroll|enterAlways"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:elevation="0dp"
        app:tabTextColor="#d3d3d3"
        android:minHeight="?attr/actionBarSize"
        />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

Zobacz wagę

Jednym z najczęściej używanych atrybutów LinearLayout jest waga jego widoków potomnych. Waga określa, ile miejsca zajmie widok w porównaniu z innymi widokami w LinearLayout.

Waga jest używana, gdy chcesz zapewnić określone miejsce na ekranie jednemu komponentowi w porównaniu do innego.

Kluczowe właściwości :

• weightSum to ogólna suma wag wszystkich widoków dziecka. Jeśli nie określisz weightSum , system obliczy sumę wszystkich wag samodzielnie.

• layout_weight określa ilość miejsca z całkowitej sumy wagi, jaką zajmie widget.

Kod:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">

    <EditText
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Type Your Text Here" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

</LinearLayout>

Dane wyjściowe to:

Teraz nawet jeśli rozmiar urządzenia jest większy, EditText zajmie 2/4 miejsca na ekranie. Dzięki temu wygląd aplikacji jest spójny na wszystkich ekranach.

Uwaga: W tym przypadku layout_width ma wartość 0dp ponieważ przestrzeń widżetów jest podzielona poziomo. Jeśli widżety mają być wyrównane w pionie, layout_height zostanie ustawiona na 0dp . Ma to na celu zwiększenie wydajności kodu, ponieważ w czasie wykonywania system nie będzie próbował obliczyć odpowiednio szerokości lub wysokości, ponieważ jest to zarządzane przez wagę. Jeśli zamiast tego wrap_content system spróbuje najpierw obliczyć szerokość / wysokość, zanim zastosuje atrybut wagi, który spowoduje kolejny cykl obliczeń.

Programowe tworzenie LinearLayout

Hierarchia

- LinearLayout(horizontal)
   - ImageView
   - LinearLayout(vertical)
     - TextView
     - TextView

Kod

LinearLayout rootView = new LinearLayout(context);
rootView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
rootView.setOrientation(LinearLayout.HORIZONTAL);

// for imageview
ImageView imageView = new ImageView(context);
// for horizontal linearlayout
LinearLayout linearLayout2 = new LinearLayout(context);
linearLayout2.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
linearLayout2.setOrientation(LinearLayout.VERTICAL);    

TextView tv1 = new TextView(context);
TextView tv2 = new TextView(context);
// add 2 textview to horizontal linearlayout
linearLayout2.addView(tv1);
linearLayout2.addView(tv2);

// finally, add imageview and horizontal linearlayout to vertical linearlayout (rootView) 
rootView.addView(imageView);
rootView.addView(linearLayout2);

LayoutParams

Każda ViewGroup (np. LinearLayout , RelativeLayout , CoordinatorLayout itp.) Musi przechowywać informacje o właściwościach swoich dzieci. O sposobie, w jaki jego dzieci są rozmieszczane w ViewGroup . Informacje te są przechowywane w obiektach klasy opakowania ViewGroup.LayoutParams .

Aby uwzględnić parametry specyficzne dla określonego typu układu, ViewGroups używają podklas klasy ViewGroup.LayoutParams .

Np. Dla

• LinearLayout to LinearLayout.LayoutParams
• RelativeLayout to RelativeLayout.LayoutParams
• CoordinatorLayout to CoordinatorLayout.LayoutParams
• ...

Większość ViewGroups wykorzystuje możliwość ustawiania margins dla swoich dzieci, więc nie ViewGroup.LayoutParams bezpośrednio, ale zamiast tego ViewGroup.MarginLayoutParams (która sama jest podklasą ViewGroup.LayoutParams ).

LayoutParams w LayoutParams xml

Obiekty LayoutParams są tworzone na podstawie nadmuchanego pliku xml układu.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="right"
        android:gravity="bottom"
        android:text="Example text"
        android:textColor="@android:color/holo_green_dark"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/holo_green_dark"
        android:scaleType="centerInside"
        android:src="@drawable/example"/>

</LinearLayout>

Wszystkie parametry rozpoczynające się od layout_ określają sposób działania otaczającego układu. Gdy układ jest zawyżany, parametry te są zawijane w odpowiedni obiekt LayoutParams , który później zostanie użyty przez Layout do prawidłowego ustawienia określonego View w grupie ViewGroup . Inne atrybuty View są bezpośrednio View kondensatorem i są przetwarzane przez View samego.

W przypadku TextView :

• layout_width , layout_height i layout_gravity będą przechowywane w obiekcie LinearLayout.LayoutParams i używane przez LinearLayout
• gravity , text i textColor będą wykorzystane przez TextView samego

W przypadku ImageView :

• layout_width , layout_height i layout_weight będą przechowywane w obiekcie LinearLayout.LayoutParams i używane przez LinearLayout
• background , scaleType i src będą używane przez sam ImageView

Pobieranie obiektu LayoutParams

getLayoutParams to metoda View's która pozwala pobrać bieżący obiekt LayoutParams .

Ponieważ obiekt LayoutParams jest bezpośrednio powiązany z obejmującą ViewGroup , ta metoda zwróci wartość inną niż null tylko wtedy, gdy View jest dołączony do ViewGroup . Musisz pamiętać, że ten obiekt może nie być obecny przez cały czas. Zwłaszcza nie powinieneś polegać na posiadaniu go View's konstruktorze View's .

public class ExampleView extends View {
    
    public ExampleView(Context context) {
        super(context);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setupView(context);
    }

    private void setupView(Context context) {
        if (getLayoutParams().height == 50){  // DO NOT DO THIS!
                                              // This might produce NullPointerException
            doSomething();
        }
    }
    
    //...
}

Jeśli chcesz polegać na posiadaniu obiektu LayoutParams , powinieneś użyć metody onAttachedToWindow .

public class ExampleView extends View {

    public ExampleView(Context context) {
        super(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (getLayoutParams().height == 50) { // getLayoutParams() will NOT return null here
            doSomething();
        }
    }

    //...
}

Rzutowanie obiektu LayoutParams

Może być konieczne użycie funkcji specyficznych dla konkretnej grupy ViewGroup (np. Możesz chcieć programowo zmienić reguły RelativeLayout ). W tym celu musisz wiedzieć, jak poprawnie rzutować obiekt ViewGroup.LayoutParams .

Może to być nieco mylące, gdy LayoutParams obiekt LayoutParams dla podrzędnego View który w rzeczywistości jest inną ViewGroup .

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/outer_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:id="@+id/inner_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="right"/>

</LinearLayout>

WAŻNE: Typ obiektu LayoutParams jest bezpośrednio powiązany z typem OBEJMUJĄCEJ ViewGroup .

Niepoprawne odlewanie :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
FrameLayout.LayoutParams par = (FrameLayout.LayoutParams) innerLayout.getLayoutParams();
                                          // INCORRECT! This will produce ClassCastException

Prawidłowy odlew :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
LinearLayout.LayoutParams par = (LinearLayout.LayoutParams) innerLayout.getLayoutParams();
                                         // CORRECT! the enclosing layout is a LinearLayout