android - रिलेटिवलायआउट में प्रतिशत चौड़ाई




android-layout android-relativelayout (10)

अद्यतन 1

जैसा कि @EmJiHash PercentRelativeLayout द्वारा इंगित किया गया है एपीआई स्तर PercentRelativeLayout में बहिष्कृत है

Google टिप्पणी उद्धृत करने के नीचे:

इस वर्ग को एपीआई स्तर 26.0.0 में बहिष्कृत किया गया था। इसके बजाय ConstraintLayout और संबंधित लेआउट का उपयोग करने पर विचार करें। निम्नलिखित एक ConstraintLayout के साथ प्रतिशत लेआउट की कार्यक्षमता को दोहराने के लिए दिखाता है

Google ने android.support.percent नामक नई एपीआई पेश की

फिर आप केवल देखने के लिए प्रतिशत निर्दिष्ट कर सकते हैं

संकलन निर्भरता जोड़ें जैसे

compile 'com.android.support:percent:22.2.0

उसमें, PercentRelativeLayout वह है जो हम प्रतिशत के अनुसार लेआउट कर सकते हैं

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

मैं अपने एंड्रॉइड ऐप में एक लॉगिन Activity लिए एक फॉर्म लेआउट पर काम कर रहा हूं। नीचे दी गई छवि यह है कि मैं इसे कैसे दिखाना चाहता हूं:

मैं निम्नलिखित लेआउट के साथ इस लेआउट को प्राप्त करने में सक्षम था। समस्या यह है कि यह थोड़ा हैकिश है। मुझे होस्ट एडिटटेक्स्ट के लिए चौड़ाई को हार्ड-कोड करना था। विशेष रूप से, मुझे यह निर्दिष्ट करना था:

android:layout_width="172dp" 

मैं वास्तव में होस्ट और पोर्ट एडिटटेक्स्ट के लिए प्रतिशत चौड़ाई देना चाहता हूं। (मेजबान के लिए 80%, बंदरगाह के लिए 20% की तरह कुछ।) क्या यह संभव है? निम्नलिखित एक्सएमएल मेरे Droid पर काम करता है, लेकिन यह सभी स्क्रीन के लिए काम नहीं कर रहा है। मैं वास्तव में एक और मजबूत समाधान पसंद करेंगे।

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

आप PercentRelativeLayout उपयोग कर सकते हैं, यह डिज़ाइन सपोर्ट लाइब्रेरी में हाल ही में PercentRelativeLayout अतिरिक्त है, न केवल एक दूसरे के सापेक्ष तत्वों को निर्दिष्ट करने की क्षमता को सक्षम करता है बल्कि उपलब्ध स्थान का कुल प्रतिशत भी निर्दिष्ट करता है।

रिलेटिवलायआउट का सबक्लास जो प्रतिशत आधारित आयामों और मार्जिन का समर्थन करता है। आप "प्रतिशत" प्रत्यय वाले विशेषताओं का उपयोग करके आयाम या बच्चे का मार्जिन निर्दिष्ट कर सकते हैं।

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

प्रतिशत पैकेज आपके ऐप में प्रतिशत आधारित आयाम जोड़ने और प्रबंधित करने के लिए API प्रदान करता है।

उपयोग करने के लिए, आपको इस पुस्तकालय को अपनी ग्रैडल निर्भरता सूची में जोड़ना होगा:

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

आप नई प्रतिशत सहायता लाइब्रेरी पर एक नज़र डाल सकते हैं।

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

android.support.percent

sample


आप रिलेटिव लयआउट के अंदर व्यू के आयामों को परिभाषित करने के लिए प्रतिशत का उपयोग नहीं कर सकते हैं। ऐसा करने का सबसे अच्छा तरीका LinearLayout और वजन, या एक कस्टम लेआउट का उपयोग करना है।


चूंकि PercentRelativeLayout को 26.0.0 में बहिष्कृत किया गया था और रिलेवेटिवआउट के अंदर लिनियरलाइट जैसे नेस्टेड लेआउट का प्रदर्शन पर नकारात्मक प्रभाव पड़ता है ( ConstraintLayout के प्रदर्शन लाभों को समझना ) प्रतिशत चौड़ाई प्राप्त करने के लिए आपके लिए सबसे अच्छा विकल्प है अपने रिलेवेटिवआउट को ConstraintLayout के साथ प्रतिस्थापित करना।

इसे दो तरीकों से हल किया जा सकता है।

समाधान # 1 प्रतिशत ऑफ़सेट के साथ दिशानिर्देशों का उपयोग करना

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

समाधान # 2 संपादन टेक्स्ट के लिए भारित चौड़ाई वाली श्रृंखला का उपयोग करना

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

दोनों मामलों में, आपको ऐसा कुछ मिलता है


दिलचस्प बात यह है कि, @olefevre के उत्तर पर निर्माण, कोई भी "अदृश्य स्ट्रैट्स" के साथ केवल 50/50 लेआउट नहीं कर सकता है, लेकिन दो की शक्तियों को शामिल करने वाले सभी प्रकार के लेआउट।

उदाहरण के लिए, यहां एक लेआउट है जो चौड़ाई को चार बराबर भागों में बदलता है (वास्तव में तीन, 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>

मैंने इसे एक कस्टम व्यू बनाने का हल किया है:

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

यह अदृश्य स्ट्रैट है जिसका उपयोग मैं रिलेवेटिवआउट के भीतर अन्य विचारों को संरेखित करने के लिए कर सकता हूं।


यह मूल प्रश्न का उत्तर नहीं देता है, जो 70/30 विभाजन के लिए था, लेकिन घटकों के बीच 50/50 विभाजन के विशेष मामले में एक तरीका है: केंद्र में एक अदृश्य स्ट्रैट रखें और इसे स्थिति में रखने के लिए इसका उपयोग करें ब्याज के दो घटक।

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

चूंकि यह एक बहुत ही आम मामला है, यह समाधान जिज्ञासा से अधिक है। यह एक हैक का एक छोटा सा है लेकिन एक कुशल है क्योंकि खाली, शून्य आकार के स्ट्रैट का बहुत कम खर्च होना चाहिए।

आम तौर पर, हालांकि, स्टॉक एंड्रॉइड लेआउट से बहुत ज्यादा उम्मीद नहीं करना सर्वोत्तम है ...


https://github.com/mmin18/FlexLayout जो आप लेआउट 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"/>

अद्यतन करें

जैसा कि @EmJiHash PercentRelativeLayout और PercentFrameLayout द्वारा इंगित किया गया है API स्तर 26.0.0 में बहिष्कृत किया गया है

ConstraintLayout का उपयोग करने पर विचार करें

Google ने एंड्रॉइड.support.percent नामक नई एपीआई पेश की

1) PercentRelativeLayout

2) PercentFrameLayout

संकलन निर्भरता जोड़ें जैसे

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

आप प्रतिशत में आयाम निर्दिष्ट कर सकते हैं इसलिए RelativeLayout और प्रतिशत दोनों लाभ प्राप्त करें

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




android-relativelayout