Bir RelativeLayout'ta yüzde genişliği

ActivityAndroid Uygulamamda Oturum Açma için bir form düzeni üzerinde çalışıyorum . Aşağıdaki görüntü nasıl görünmesini istiyorum:

Aşağıdaki XML ile bu düzeni elde edebildim . Sorun şu ki, biraz hileli. Ben ana EditText için bir genişlik kodlamak zorunda kaldı. Özellikle, belirtmek zorundaydım:

android:layout_width="172dp" 

Gerçekten ana yüzde ve bağlantı noktası EditText en bir yüzde genişliği vermek istiyorum. (Ev sahibi için% 80, liman için% 20 gibi bir şey.) Bu mümkün mü? Aşağıdaki XML Droid'imde çalışıyor, ancak tüm ekranlar için çalışmıyor gibi görünüyor. Gerçekten daha sağlam bir çözüm istiyorum.

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

android:layout_weightÖzelliği arıyorsunuz . Düzeninizi tanımlamak için yüzdeleri kullanmanıza izin verir.

Aşağıdaki örnekte, sol düğme alanın% 70'ini ve sağ düğme% 30'unu kullanır.

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

Her türlü Görünüm ile aynı şekilde çalışır, düğmelerinizi ihtiyaçlarınıza uyacak şekilde bazı EditText ile değiştirebilirsiniz.

Ayarını yaptığınızdan emin olun layout_width, 0dpaksi takdirde görünümleriniz doğru ölçeklenmemiş olabilir.

Ağırlık toplamı 1'e eşit olmak zorunda değildir, sadece böyle okumayı daha kolay buluyorum. İlk ağırlığı 7'ye, ikincisini 3'e ayarlayabilirsiniz ve aynı sonucu verecektir.

Bu, 70/30'luk bir bölünme için olan orijinal soruyu tam olarak cevaplamıyor, ancak bileşenler arasında 50/50'lik bir bölünmenin özel durumunda bir yol var: merkeze görünmez bir destek yerleştirin ve ilgilenilen iki bileşen.

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

Bu oldukça yaygın bir durum olduğundan, bu çözüm bir meraktan daha fazlasıdır. Boş, sıfır boyutlu payanda çok az maliyetli olması gerektiğinden, bir parça ama etkili bir şey.

Genel olarak, stok Android düzenlerinden çok fazla beklememek en iyisidir ...

Güncelleme 1

@EmJiHash PercentRelativeLayout'un işaret ettiği gibi 26.0.0 API düzeyinde kullanımdan kaldırıldı

Google yorumundan alıntı:

Bu sınıf API 26.0.0 düzeyinde kullanımdan kaldırıldı. bunun yerine ConstraintLayout ve ilişkili mizanpajları kullanmayı düşünün. Aşağıda, yüzde düzenlerinin işlevselliğinin bir ConstraintLayout ile nasıl kopyalanacağı gösterilmektedir

Google android.support.percent adlı yeni bir API tanıttı

Ardından, görüntüleme yoluyla alınacak yüzdeyi belirtebilirsiniz.

Gibi derleme bağımlılığı ekleyin

implementation 'com.android.support:percent:22.2.0

ki, PercentRelativeLayout bir yüzdesi akıllıca bir düzen yapabilecekleriniz

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

RelativeLayout içindeki bir Görünümün boyutlarını tanımlamak için yüzdeleri kullanamazsınız. Bunu yapmanın en iyi yolu, LinearLayout ve ağırlıkları veya özel bir Düzen kullanmaktır.

Yeni yüzde destek kütüphanesine göz atabilirsiniz.

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

docs

örneklem

PercentRelativeLayout'u kullanabilirsiniz , Tasarım Destek Kitaplığı'na yakın zamanda belgelenmemiş bir ektir , yalnızca öğelere göre değil, aynı zamanda kullanılabilir alanın toplam yüzdesini de belirleme olanağı sağlar.

Yüzdeye dayalı boyutları ve kenar boşluklarını destekleyen RelativeLayout'un alt sınıfı. "Yüzde" soneki nitelikleri kullanarak çocuğun boyutunu veya kenar boşluğunu belirleyebilirsiniz.

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

Yüzde paketi, uygulamanıza yüzde tabanlı boyutlar eklemeyi ve yönetmeyi destekleyen API'ler sağlar .

Kullanmak için, bu kitaplığı Sınıf Bağımlılığı listenize eklemeniz gerekir :

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

Bu özel bir görünüm oluşturarak çözdüm:

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);
  }
}

Bu, RelativeLayout içindeki diğer görünümleri hizalamak için kullanabileceğim görünmez dikme.

Güncelleme

@EmJiHash PercentRelativeLayout ve PercentFrameLayout'un işaret ettiği gibi 26.0.0 API düzeyinde kullanımdan kaldırıldı

ConstraintLayout Kullanmayı Düşünün

Google android.support.percent adlı yeni bir API tanıttı

1) PercentRelativeLayout

2) PercentFrameLayout

Gibi derleme bağımlılığı ekleyin

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

Boyutu yüzde olarak belirtebilirsiniz, böylece hem fayda hem de RelativeLayoutyüzde elde edin

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

PercentRelativeLayout 26.0.0'da kullanımdan kaldırıldığından ve RelativeLayout içindeki LinearLayout gibi iç içe düzenlerin performans üzerinde olumsuz bir etkisi olduğundan ( ConstraintLayout'un performans avantajlarını anlama ) Yüzde genişliğine ulaşmanız için en iyi seçenek RelativeLayout'unuzu ConstraintLayout ile değiştirmektir.

Bu iki şekilde çözülebilir.

ÇÖZÜM # 1 Yüzde ofseti olan yönergeleri kullanma

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

ÇÖZÜM # 2 EditText için ağırlıklı genişliğe sahip zincir kullanma

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

Her iki durumda da böyle bir şey elde edersiniz

PercentRelativeLayout , destek Kitaplığı'nın Revizyon 26.0.0 sürümünden kaldırılmıştır.

Google, ConstraintLayout adlı yeni bir Düzen tanıttı .

Kütüphaneyi modül düzeyinde build.gradle dosyanıza bağımlılık olarak ekleyin:

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

sadece bir düzen dosyası ekleyin:

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

Kısıtlamalar

Kısıtlamalar, widget'ları hizalamanıza yardımcı olur. Çeşitli widget'lar arasındaki hizalama kurallarını belirlemek için, aşağıda gösterilen kısıtlama tutamaçları gibi tutturucular kullanabilirsiniz.

1. Wrap Content: Görünüm, içeriğine uyacak şekilde genişletilir.
2. Match Constraints: Marjları hesaba kattıktan sonra görüş, kısıtlamalarının tanımını karşılamak için gerektiğinde genişler. Ancak, verilen boyutun yalnızca bir kısıtlaması varsa, görünüm içeriğine uyacak şekilde genişler. Bu modu yükseklik veya genişlikte kullanmak da bir boyut oranı ayarlamanıza olanak tanır.
3. Fixed: Aşağıdaki metin kutusunda veya düzenleyicideki görünümü yeniden boyutlandırarak belirli bir boyut belirtirsiniz.
4. Spread: Görüntülemeler eşit olarak dağıtılır (marjlar hesaba katıldıktan sonra). Bu varsayılan ayardır.
5. Spread inside: İlk ve son görüntü, zincirin her iki ucundaki kısıtlamalara eklenir ve geri kalanı eşit olarak dağıtılır.
6. Weighted: Zincir içerisine yayılmak veya yayılmak üzere ayarlandığında, bir veya daha fazla görünümü "eşleşme kısıtlamaları" (0dp) olarak ayarlayarak kalan alanı doldurabilirsiniz. Varsayılan olarak, boşluk "eşleşme kısıtlamaları" olarak ayarlanan her görünüm arasında eşit olarak dağıtılır, ancak layout_constraintHorizontal_weight ve layout_constraintVertical_weight özelliklerini kullanarak her görünüme önemli bir ağırlık atayabilirsiniz. Vektör düzenini doğrusal bir düzende biliyorsanız, bu da aynı şekilde çalışır. Böylece en yüksek ağırlık değerine sahip görünüm en fazla yer kaplar; aynı ağırlığa sahip görünümler aynı miktarda alan alır.
7. Packed: Görüntülemeler birlikte paketlenir (marjlar hesaba katıldıktan sonra). Daha sonra, zincirin kafa görünümü sapmasını değiştirerek tüm zincirin sapmasını (sol / sağ veya yukarı / aşağı) ayarlayabilirsiniz.
8. Center Horizontally or Center Vertically: Hızlı bir görünüm zinciri oluşturmak için, tümünü seçin, görünümlerden birine sağ tıklayın ve ardından yatay veya dikey zincir oluşturmak için Yatay Olarak Ortala veya Dikey Olarak Ortala'yı seçin
9. Baseline alignment: Bir görünümün metin taban çizgisini başka bir görünümün metin taban çizgisiyle hizalayın.
10. Constrain to a guideline: Görünümleri kısıtlayabileceğiniz dikey veya yatay bir kılavuz ekleyebilirsiniz; bu kılavuz uygulama kullanıcıları tarafından görülemez. Kılavuz çizgiyi, mizanpajın kenarına göre dp birimlerine veya yüzdeye göre mizanpaj içine yerleştirebilirsiniz.
11. Adjust the constraint bias: Bir görünümün her iki tarafına bir kısıtlama eklediğinizde (ve aynı boyut için görünüm boyutu "sabit" veya "kaydırmalı içerik" olduğunda), görünüm varsayılan olarak% 50'lik bir sapma ile iki kısıtlama arasında ortalanır. Sapma özelliğini, Özellikler penceresindeki sapma kaydırıcısını sürükleyerek ayarlayabilirsiniz.
12. Set size as a ratio: Görünüm boyutlarından en az biri "eşleşme kısıtlamaları" (0dp) olarak ayarlanmışsa, görünüm boyutunu 16: 9 gibi bir orana ayarlayabilirsiniz.

Resmi dokümandan daha fazla bilgi edinebilirsiniz .

Bunu mizanpaj ağırlıkları ile yapabilirsiniz. Bir ağırlık, ekranın sahipsiz kısımlarının nasıl bölüneceğini belirler. Her EditText'e 0 mizanpaj genişliği ve orantılı ağırlık verin. Yani, ilk önce iki kat daha fazla yer kaplamak istiyorsanız, birine 2, diğerine 1 ağırlık verin.

İlginçtir ki, @olefevre'nin cevabına dayanarak, sadece "görünmez payandalar" ile 50/50 mizanpaj yapmakla kalmaz, aynı zamanda iki güç içeren her türlü mizanpaj da yapılabilir.

Örneğin, genişliği dört eşit parçaya kesen bir düzen (aslında üç, ağırlıkları 1, 1, 2 olan):

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

İki metin görüntülemenizi ana makineniz ve bağlantı noktanızı bağımsız bir doğrusal ortama yatay olarak koyun ve android'i kullanın: yüzdeyi yapmak için layout_weight

Yüzde veya java ifadesini doğrudan xml düzeninde kullanabileceğiniz https://github.com/mmin18/FlexLayout öğesini kontrol edin .

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