Android
layout

introduzione

Sintassi

• Android: la gravità = "top | bottom | left | right | center_vertical | fill_vertical | center_horizontal | fill_horizontal | centro | riempire | clip_vertical | clip_horizontal | Inizio | fine"
• Android: layout_gravity = "top | bottom | left | right | center_vertical | fill_vertical | center_horizontal | fill_horizontal | centro | riempire | clip_vertical | clip_horizontal | Inizio | fine"

Osservazioni

LinearLayout

LinearLayout è un ViewGroup che organizza i suoi figli in una singola colonna o una singola riga. L'orientamento può essere impostato chiamando il metodo setOrientation() o usando l'attributo xml android:orientation .

1. Orientamento verticale : 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>

Ecco uno screenshot di come apparirà questo:

2. Orientamento orizzontale : 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 supporta anche l'assegnazione di un peso ai singoli bambini con l'attributo android:layout_weight .

RelativeLayout

RelativeLayout è un ViewGroup che visualizza viste ViewGroup in posizioni relative. Per impostazione predefinita, tutte le viste child vengono disegnate nella parte in alto a sinistra del layout, quindi è necessario definire la posizione di ciascuna vista utilizzando le varie proprietà di layout disponibili da RelativeLayout.LayoutParams . Il valore per ogni proprietà di layout è o un valore booleano per abilitare una posizione di layout relativa a RelativeLayout padre o un ID che fa riferimento a un'altra vista nel layout rispetto alla quale deve essere posizionata la vista.

Esempio:

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

Ecco uno screenshot di come apparirà questo:

Gravità e gravità del layout

Android: layout_gravity

• android:layout_gravity è usato per impostare la posizione di un elemento nel suo genitore (ad esempio, una View un bambino all'interno di un Layout ).
• Supportato da LinearLayout e FrameLayout

Android: la gravità

• android:gravity viene utilizzata per impostare la posizione del contenuto all'interno di un elemento (ad es. un testo all'interno di una 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>

Che viene reso come segue:

Layout della griglia

GridLayout, come suggerisce il nome, è un layout utilizzato per organizzare le viste in una griglia. Un GridLayout si divide in colonne e righe. Come puoi vedere nell'esempio seguente, la quantità di colonne e / o righe è specificata dalle proprietà columnCount e rowCount . L'aggiunta di viste a questo layout aggiungerà la prima vista alla prima colonna, la seconda vista alla seconda colonna e la terza vista alla prima colonna della seconda riga.

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

Layout percentuali

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 è progettato per bloccare un'area sullo schermo per visualizzare un singolo oggetto. Tuttavia, puoi aggiungere più bambini a FrameLayout e controllare la loro posizione all'interno di FrameLayout assegnando la gravità a ciascun bambino, utilizzando l'attributo android: layout_gravity .

In genere, FrameLayout viene utilizzato per contenere una singola vista figlio. Casi di uso comune stanno creando segnaposto per gonfiare Fragments in Activity , sovrapporre viste o applicare in primo piano alle viste.

Esempio:

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

Sembrerà così:

CoordinatorLayout

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 Comportamento di scorrimento

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

Visualizza peso

Uno degli attributi più utilizzati per LinearLayout è il peso delle sue viste secondarie . Peso definisce quanto spazio occuperà una vista rispetto ad altre viste all'interno di un LinearLayout.

Il peso viene utilizzato quando si desidera assegnare uno spazio dello schermo specifico a un componente rispetto all'altro.

Proprietà chiave :

• weightSum è la somma complessiva dei pesi di tutte le visualizzazioni figlio. Se non si specifica weightSum , il sistema calcolerà da solo la somma di tutti i pesi.

• layout_weight specifica la quantità di spazio fuori dalla somma di peso totale occupata dal widget.

Codice:

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

L'output è:

Ora, anche se la dimensione del dispositivo è maggiore, EditText richiederà 2/4 dello spazio dello schermo. Quindi l'aspetto della tua app è visto coerente su tutti gli schermi.

Nota: qui layout_width viene mantenuto 0dp poiché lo spazio del widget è diviso orizzontalmente. Se i widget devono essere allineati verticalmente, layout_height sarà impostato su 0dp . Questo viene fatto per aumentare l'efficienza del codice, perché durante il runtime il sistema non tenterà di calcolare rispettivamente la larghezza o l'altezza in quanto viene gestita dal peso. Se invece si utilizza wrap_content il sistema wrap_content di calcolare prima la larghezza / altezza prima di applicare l'attributo weight che causa un altro ciclo di calcolo.

Creazione di LinearLayout a livello di codice

Gerarchia

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

Codice

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

Ogni singolo ViewGroup (ad es. LinearLayout , RelativeLayout , CoordinatorLayout , ecc.) LinearLayout memorizzare le informazioni sulle proprietà dei propri figli. Riguardo al modo in cui i suoi figli sono disposti nel ViewGroup . Queste informazioni sono memorizzate in oggetti di una classe wrapper ViewGroup.LayoutParams .

Per includere parametri specifici per un particolare tipo di layout, i ViewGroups utilizzano sottoclassi della classe ViewGroup.LayoutParams .

Ad esempio per

• LinearLayout è LinearLayout.LayoutParams
• RelativeLayout è RelativeLayout.LayoutParams
• CoordinatorLayout è CoordinatorLayout.LayoutParams
• ...

La maggior parte dei ViewGroups riutilizza la possibilità di impostare i margins per i propri figli, in modo che non sottoclassi direttamente ViewGroup.LayoutParams , ma eseguono la sottoclasse di ViewGroup.MarginLayoutParams (che a sua volta è una sottoclasse di ViewGroup.LayoutParams ).

LayoutParams in xml

LayoutParams oggetti LayoutParams vengono creati in base al file xml layout gonfiato.

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

Tutti i parametri che iniziano con layout_ specificano come il layout racchiude dovrebbe funzionare. Quando il layout viene gonfiato, questi parametri vengono avvolti in un oggetto LayoutParams appropriato, che in seguito verrà utilizzato dal Layout per posizionare correttamente una particolare View all'interno del ViewGroup . Altri attributi di una View sono direttamente correlati alla View e vengono elaborati dalla View stessa.

Per TextView :

• layout_width , layout_height e layout_gravity verranno archiviati in un oggetto LinearLayout.LayoutParams e utilizzati da LinearLayout
• gravity , text e textColor saranno utilizzati da TextView stesso

Per ImageView :

• layout_width , layout_height e layout_weight verranno archiviati in un oggetto LinearLayout.LayoutParams e utilizzati da LinearLayout
• background , scaleType e src saranno utilizzati da ImageView stesso

Ottenere oggetto LayoutParams

getLayoutParams è una View's metodo che permette di recuperare una corrente LayoutParams oggetto.

Poiché l'oggetto LayoutParams è direttamente correlato al ViewGroup che lo racchiude , questo metodo restituirà un valore non null solo quando View è collegato al ViewGroup . È necessario tenere a mente che questo oggetto potrebbe non essere presente in ogni momento. Soprattutto non dovresti dipendere dal fatto di averlo nel costruttore 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();
        }
    }
    
    //...
}

Se vuoi dipendere dall'avere oggetto LayoutParams , dovresti usare invece il metodo 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();
        }
    }

    //...
}

Oggetto Casting LayoutParams

Potrebbe essere necessario utilizzare funzionalità specifiche per un particolare ViewGroup (ad esempio, potrebbe essere necessario modificare a livello di ViewGroup regole di un RelativeLayout ). A tale scopo è necessario sapere come eseguire correttamente il cast dell'oggetto ViewGroup.LayoutParams .

Questo potrebbe essere un po 'di confusione quando si ottiene un oggetto LayoutParams per un figlio View che in realtà è un altro 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>

IMPORTANTE: il tipo di oggetto LayoutParams è direttamente correlato al tipo del ViewGroup ViewGroup .

Casting errato :

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

Cast corretta :

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