Larghezza percentuale in un RelativeLayout

Sto lavorando su un layout di modulo per un accesso Activitynella mia app Android. L'immagine qui sotto è come voglio che assomigli a:

Sono stato in grado di ottenere questo layout con il seguente XML . Il problema è che è un po 'hacker. Ho dovuto codificare una larghezza per l'host EditText. In particolare, ho dovuto specificare:

android:layout_width="172dp" 

Mi piacerebbe davvero dare una larghezza percentuale all'host e alla porta di EditText. (Qualcosa come l'80% per l'host, il 20% per la porta.) È possibile? Il seguente XML funziona sul mio Droid, ma non sembra funzionare per tutte le schermate. Vorrei davvero una soluzione più solida.

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

Stai cercando l' android:layout_weightattributo. 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, è possibile sostituire i pulsanti con alcuni EditText in base alle proprie esigenze.

Assicurati di impostare layout_widthsu 0dpoppure le visualizzazioni potrebbero non essere ridimensionate correttamente.

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

Ciò non risponde alla domanda originale, che era per una divisione 70/30, ma nel caso speciale di una divisione 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 piuttosto comune, questa soluzione è più di una curiosità. È un po 'un trucco ma efficace perché il puntone vuoto di dimensioni zero dovrebbe costare molto poco.

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

Aggiornamento 1

Come indicato da @EmJiHash, PercentRelativeLayout è obsoleto nel livello API 26.0.0

Di seguito citando il commento di Google:

Questa classe è stata deprecata nel livello API 26.0.0. considera invece l'utilizzo di ConstraintLayout e dei layout associati. Di seguito viene illustrato come replicare la funzionalità dei layout percentuali con ConstraintLayout

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

Quindi puoi semplicemente specificare la percentuale da prendere per vista

Aggiungi compilazione dipendenza come

implementation 'com.android.support:percent:22.2.0

in questo, PercentRelativeLayout è ciò che possiamo fare un layout percentuale 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>

Non è possibile utilizzare le percentuali per definire le dimensioni di una vista all'interno di un RelativeLayout. Il modo migliore per farlo è utilizzare LinearLayout e pesi o un layout personalizzato.

Puoi dare un'occhiata alla nuova libreria di supporto percentuale.

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

docs

campione

È possibile utilizzare PercentRelativeLayout , È una recente aggiunta non documentata alla libreria di supporto del design , 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 dimensioni e margini basati su percentuale. È possibile specificare una dimensione o un margine figlio utilizzando gli attributi con il suffisso "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">
  <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 Percentuale 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 Gradle :

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

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 in RelativeLayout.

Aggiornare

Come indicato da @EmJiHash PercentRelativeLayout e PercentFrameLayout è obsoleto nel livello API 26.0.0

Prendi in considerazione l'utilizzo di ConstraintLayout

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

1) PercentRelativeLayout

2) PercentFrameLayout

Aggiungi compilazione dipendenza come

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

Puoi specificare la dimensione in percentuale in modo da ottenere sia il vantaggio RelativeLayoutche 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 deprecato in 26.0.0 e layout nidificati come LinearLayout in RelativeLayout hanno un impatto negativo sulle prestazioni ( Comprensione dei vantaggi in termini di prestazioni di ConstraintLayout ), l'opzione migliore per ottenere l'ampiezza percentuale è quella di sostituire RelayLayout con ConstraintLayout.

Questo può essere risolto in due modi.

SOLUZIONE # 1 Uso 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 di una 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 del genere

PercentRelativeLayout è obsoleto dalla revisione 26.0.0 della libreria di supporto.

Google ha introdotto un nuovo layout chiamato ConstraintLayout .

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

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

basta aggiungere 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 le ancore, come le maniglie dei vincoli mostrate di seguito, per determinare le regole di allineamento tra vari widget.

1. Wrap Content: La vista si espande secondo necessità per adattarsi al suo contenuto.
2. Match Constraints: La vista si espande secondo necessità per soddisfare la definizione dei suoi vincoli dopo aver tenuto conto dei margini. Tuttavia, se la dimensione data ha un solo vincolo, la vista si espande per adattarsi al suo contenuto. L'uso di questa modalità su altezza o larghezza consente anche di impostare un rapporto dimensioni.
3. Fixed: Puoi specificare una dimensione specifica nella casella di testo in basso o ridimensionando la vista nell'editor.
4. Spread: Le viste sono distribuite uniformemente (dopo che i margini sono stati calcolati). Questo è il valore predefinito.
5. Spread inside: La prima e l'ultima vista sono fissate ai vincoli su ciascuna estremità della catena e il resto è distribuito uniformemente.
6. Weighted: Quando la catena è impostata su diffusione o diffusione all'interno, è possibile riempire lo spazio rimanente impostando una o più viste su "vincoli di corrispondenza" (0dp). Per impostazione predefinita, lo spazio è distribuito uniformemente tra ciascuna vista impostata su "vincoli di corrispondenza", ma è possibile assegnare un peso di importanza 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 più alto valore di peso ottiene la maggior quantità di spazio; le viste che hanno lo stesso peso ottengono la stessa quantità di spazio.
7. Packed: Le viste vengono raggruppate insieme (dopo aver tenuto conto dei margini). È quindi possibile regolare il bias dell'intera catena (sinistra / destra o su / giù) modificando il bias 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 viste, quindi seleziona Centra orizzontalmente o Centra verticalmente per creare una catena orizzontale o verticale
9. Baseline alignment: 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: Puoi aggiungere una linea guida verticale o orizzontale alla quale puoi limitare le viste e la linea guida sarà invisibile agli utenti dell'app. È possibile posizionare la linea guida all'interno del layout in base alle unità DP o alla percentuale, rispetto al bordo del layout.
11. Adjust the constraint bias: Quando aggiungi un vincolo su entrambi i lati di una vista (e la dimensione della vista per la stessa dimensione è "fissa" o "contenuto a capo"), la vista diventa centrata tra i due vincoli con una distorsione del 50% per impostazione predefinita. È possibile regolare il bias trascinando il cursore di bias nella finestra Proprietà
12. Set size as a ratio: È possibile impostare la dimensione della vista su un rapporto come 16: 9 se almeno una delle dimensioni della vista è impostata su "vincoli di corrispondenza" (0dp).

Puoi saperne di più dal documento ufficiale .

È possibile ottenere ciò tramite pesi di layout. Un peso determina la suddivisione delle parti non rivendicate dello schermo. Dai a ogni EditText un layout_width di 0 e un peso proporzionale. Vale a dire, dai a uno un peso di 2 e l'altro a un peso di 1 se vuoi che il primo occupi il doppio dello spazio.

È interessante notare che, basandosi sulla risposta di @olefevre, non si possono fare solo 50/50 layout con "puntoni invisibili", ma tutti i tipi di layout che coinvolgono 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>

Basta posizionare l'host e la porta per due visualizzazioni di testo in un linearlayout orizzontale indipendente e utilizzare android: layout_weight per fare la percentuale

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