android deprecated - Larghezza percentuale in un RelativeLayout




linearlayout developer (13)

Sto lavorando a un layout di modulo per un'attività di accesso nella mia app per Android. L'immagine sotto è come voglio che assomigli:

Sono stato in grado di ottenere questo layout con il seguente XML . Il problema è che è un po 'hackerato. Ho dovuto codificare a macchina una larghezza per l'editor EditText. Nello specifico, ho dovuto specificare:

android:layout_width="172dp" 

Mi piacerebbe davvero dare una larghezza percentuale all'host e alla porta EditText. (Qualcosa come 80% per l'host, 20% per la porta.) È possibile? Il seguente XML funziona sul mio Droid, ma non sembra funzionare per tutti gli schermi. Mi piacerebbe davvero una soluzione più robusta.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

Answers

Ho risolto questo creando una vista personalizzata:

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

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

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

Questo è un puntone invisibile che posso usare per allineare altre viste all'interno di RelativeLayout.


È possibile utilizzare PercentRelativeLayout , è un'aggiunta non documentata recente alla libreria di supporto di progettazione , consente di specificare non solo gli elementi l'uno rispetto all'altro ma anche la percentuale totale di spazio disponibile.

Sottoclasse di RelativeLayout che supporta quote e margini basati sulla percentuale. È possibile specificare la dimensione o un margine di child utilizzando gli attributi con il suffisso "Percent".

<android.support.percent.PercentRelativeLayout
     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">
  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

Il pacchetto Percent fornisce API per supportare l'aggiunta e la gestione di dimensioni basate sulla percentuale nella tua app.

Per utilizzare, è necessario aggiungere questa libreria all'elenco delle dipendenze di Gradle :

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

Questo non risponde alla domanda originale, che era per uno split 70/30, ma nel caso speciale di uno split 50/50 tra i componenti c'è un modo: posizionare un puntone invisibile al centro e usarlo per posizionare il due componenti di interesse.

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

Poiché questo è un caso abbastanza comune, questa soluzione è più di una curiosità. È un po 'un hack ma efficiente perché il puntone vuoto di dimensioni zero dovrebbe costare pochissimo.

In generale, tuttavia, è meglio non aspettarsi troppo dai layout Android di serie ...


Stai cercando l'attributo android:layout_weight . Ti permetterà di usare le percentuali per definire il tuo layout.

Nell'esempio seguente, il pulsante sinistro utilizza il 70% dello spazio e il pulsante destro il 30%.

<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

Funziona allo stesso modo con qualsiasi tipo di vista, puoi sostituire i pulsanti con alcuni di EditText per soddisfare le tue esigenze.

Assicurati di impostare layout_width su 0dp o le tue visualizzazioni potrebbero non essere ridimensionate correttamente.

Si noti che la somma di peso non deve essere uguale a 1, trovo che sia più facile leggere in questo modo. È possibile impostare il primo peso su 7 e il secondo su 3 e darà lo stesso risultato.


Controllare https://github.com/mmin18/FlexLayout che è possibile utilizzare l'espressione percentuale o java direttamente nel layout xml.

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>

Aggiornamento 1

Come indicato da @EmJiHash PercentRelativeLayout è deprecato nel livello API 26.0.0

Sotto citando il commento di google:

Questa classe è stata dichiarata obsoleta a livello di API 26.0.0. considera l'utilizzo di ConstraintLayout e dei layout associati. Quanto segue mostra come replicare la funzionalità dei layout percentuali con un ConstraintLayout

Google ha introdotto una nuova API chiamata android.support.percent

Quindi puoi solo specificare la percentuale da prendere alla vista

Aggiungi dipendenza compilata come

compile 'com.android.support:percent:22.2.0

in questo, PercentRelativeLayout è ciò che possiamo fare con un layout saggio

 <android.support.percent.PercentRelativeLayout
     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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

PercentRelativeLayout è deprecato dalla versione 26.0.0 della libreria di supporto.

Google ha introdotto un nuovo layout chiamato ConstraintLayout .

Aggiungi la libreria come dipendenza nel file build.gradle a livello di modulo:

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

aggiungi semplicemente un file di layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">
</android.support.constraint.ConstraintLayout>

vincoli

I vincoli ti aiutano a mantenere allineati i widget. È possibile utilizzare gli ancoraggi, ad esempio le maniglie dei vincoli mostrati di seguito, per determinare le regole di allineamento tra i vari widget.

  1. Wrap Content : la vista si espande secondo necessità per adattarsi ai suoi contenuti.
  2. Match Constraints : la vista si espande quando necessario per soddisfare la definizione dei suoi vincoli dopo aver considerato i margini. Tuttavia, se la dimensione specificata ha solo un vincolo, la vista si espande per adattarsi al suo contenuto. L'utilizzo di questa modalità sull'altezza o sulla larghezza consente anche di impostare un rapporto dimensioni.
  3. Fixed : si specifica una dimensione specifica nella casella di testo qui sotto o ridimensionando la vista nell'editor.
  4. Spread : le viste sono equamente distribuite (dopo che i margini sono stati conteggiati). Questo è l'impostazione predefinita.
  5. Spread inside : la prima e l'ultima vista sono apposte ai vincoli su ciascuna estremità della catena e il resto è uniformemente distribuito.
  6. Weighted : quando la catena è impostata su spread o spread all'interno, puoi riempire lo spazio rimanente impostando una o più viste su "match constraints" (0dp). Per impostazione predefinita, lo spazio viene distribuito uniformemente tra ciascuna vista impostata su "vincoli di corrispondenza", ma è possibile assegnare un peso importante a ciascuna vista utilizzando gli attributi layout_constraintHorizontal_weight e layout_constraintVertical_weight. Se hai familiarità con layout_weight in un layout lineare, funziona allo stesso modo. Quindi la vista con il valore di peso più alto ottiene la maggior quantità di spazio; viste che hanno lo stesso peso ottengono la stessa quantità di spazio.
  7. Packed : le viste sono raggruppate insieme (dopo che i margini sono stati conteggiati). È quindi possibile regolare l'inclinazione dell'intera catena (sinistra / destra o su / giù) modificando la polarizzazione della vista della testa della catena.
  8. Center Horizontally or Center Vertically : per creare rapidamente una catena di viste, selezionale tutte, fai clic con il pulsante destro del mouse su una delle visualizzazioni, quindi seleziona Centra orizzontalmente o Centra verticalmente per creare una catena orizzontale o verticale
  9. Allineamento della linea di base: allinea la linea di base del testo di una vista alla linea di base del testo di un'altra vista.
  10. Constrain to a guideline : è possibile aggiungere una linea guida verticale o orizzontale a cui è possibile vincolare le viste e la linea guida sarà invisibile agli utenti dell'app. È possibile posizionare la linea guida all'interno del layout in base a unità dp o percentuali, in relazione al bordo del layout.
  11. Adjust the constraint bias : quando aggiungi un vincolo su entrambi i lati di una vista (e le dimensioni della vista per la stessa dimensione sono "fisse" o "avvolgono il contenuto"), la vista viene centrata tra i due vincoli con una distorsione di 50 % per impostazione predefinita. È possibile regolare il bias trascinando il cursore diagonale nella finestra Proprietà
  12. Set size as a ratio : puoi impostare le dimensioni della vista su un rapporto come 16: 9 se almeno una delle dimensioni della vista è impostata su "combina i vincoli" (0dp).

Puoi saperne di più dal doc ufficiale.


Basta mettere le tue due visualizzazioni di testo host e porta in un linearlayout indipendente e utilizzare android: layout_weight per fare la percentuale


Aggiornare

Come indicato da @EmJiHash PercentRelativeLayout e PercentFrameLayout è deprecato in livello API 26.0.0

Prendi in considerazione l'uso di ConstraintLayout

Google ha introdotto una nuova API chiamata android.support.percent

1) PercentRelativeLayout

2) PercentFrameLayout

Aggiungi dipendenza compilata come

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

È possibile specificare la quota in percentuale in modo da ottenere sia il vantaggio di RelativeLayout sia la percentuale

 <android.support.percent.PercentRelativeLayout
         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"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Poiché PercentRelativeLayout è stato ritirato in 26.0.0 e i layout nidificati come LinearLayout all'interno di RelativeLayout hanno un impatto negativo sulle prestazioni ( Capire i vantaggi in termini di prestazioni di ConstraintLayout ) l'opzione migliore per raggiungere la larghezza percentuale è sostituire il RelativeLayout con ConstraintLayout.

Questo può essere risolto in due modi.

SOLUZIONE N. 1 Utilizzo delle linee guida con offset percentuale

<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

</android.support.constraint.ConstraintLayout>

SOLUZIONE # 2 Utilizzo della catena con larghezza ponderata per EditText

<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

In entrambi i casi, ottieni qualcosa di simile



È interessante notare che, basandosi sulla risposta di @olefevre, non si possono fare solo layout 50/50 con "puntelli invisibili", ma tutti i tipi di layout che prevedono potenze di due.

Ad esempio, ecco un layout che taglia la larghezza in quattro parti uguali (in realtà tre, con pesi di 1, 1, 2):

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

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

LinearLayout: un layout che organizza i suoi figli in una singola riga orizzontale o verticale. Crea una barra di scorrimento se la lunghezza della finestra supera la lunghezza dello schermo. Significa che puoi allineare le viste una per una (verticalmente / orizzontalmente).

RelativeLayout: consente di specificare l'ubicazione degli oggetti figlio l'uno rispetto all'altro (figlio A alla sinistra del figlio B) o al genitore (allineato alla parte superiore del genitore). Si basa sulla relazione delle opinioni dei suoi genitori e di altri punti di vista.

WebView: per caricare pagine html, statiche o dinamiche.

Per maggiori informazioni, consultare questo link: http://developer.android.com/guide/topics/ui/layout-objects.html





android android-layout android-relativelayout