Linear Layout และ Weight ใน Android

ฉันมักจะอ่านเกี่ยวกับค่าน้ำหนักตลกนี้ในเอกสาร Android ตอนนี้ฉันต้องการลองครั้งแรก แต่มันไม่ทำงานเลย

ที่ฉันเข้าใจจากเอกสารประกอบรูปแบบนี้:

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

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dip"
        weight="1" />

  </LinearLayout>

ควรสร้างสองปุ่มที่จัดแนวนอนและแบ่งพื้นที่อย่างเท่าเทียมกัน ปัญหาคือปุ่มสองปุ่มไม่โตขึ้นเพื่อเติมเต็มพื้นที่

ฉันต้องการปุ่มที่จะเติบโตและเติมเต็มทั้งบรรทัด หากปุ่มทั้งสองถูกตั้งค่าให้ตรงกับหลักเท่านั้นปุ่มแรกจะปรากฏขึ้นและเติมทั้งบรรทัด

คุณไม่ได้ตั้งค่าlayout_weightคุณสมบัติ รหัสของคุณอ่านและมันควรจะอ่านweight="1"android:layout_weight="1"

3 สิ่งที่ควรจดจำ:

• ตั้งค่าandroid: layout_widthของ children เป็น "0dp"
• ตั้งค่าandroid: weightSumของพาเรนต์ ( แก้ไข:ตามที่ Jason Moore สังเกตเห็นคุณลักษณะนี้เป็นทางเลือกเนื่องจากค่าเริ่มต้นจะถูกกำหนดเป็นผลรวมของ layout_weight สำหรับเด็ก)
• ตั้งค่าandroid: layout_weightของเด็กแต่ละคนตามสัดส่วน (เช่น weightSum = "5", เด็กสามคน: layout_weight = "1", layout_weight = "3", layout_weight = "1")

ตัวอย่าง:

    <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    </LinearLayout>

และผลลัพธ์:

android:layout_weightมัน LinearLayoutน้ำหนักสามารถนำมาใช้เฉพาะใน หากการวางแนวของ LinearLayout เป็นแนวตั้งแล้วใช้และหากการวางแนวเป็นแนวนอนแล้วใช้android:layout_height="0dp" android:layout_width = "0dp"มันจะทำงานได้อย่างสมบูรณ์แบบ

ภาพนี้สรุปเค้าโครงแบบเส้นตรง

คุณสามารถไปที่ลิงค์นี้สำหรับข้อมูลเพิ่มเติมในหัวข้อ Just Maths - Views, ดูกลุ่มและเลย์เอาต์

วิดีโอการสอนสำหรับเค้าโครงแบบเส้นตรง: ความกว้างความสูงและน้ำหนัก

กวดวิชาเค้าโครง Android เชิงเส้น

ลองตั้งค่าlayout_widthปุ่มทั้งสองเป็น "0dip" และweightปุ่มทั้งสองเป็น0.5

LinearLayout รองรับการกำหนดน้ำหนักให้กับเด็กแต่ละคน คุณลักษณะนี้กำหนด " ความสำคัญ " ให้กับมุมมองและอนุญาตให้ขยายเพื่อเติมพื้นที่ว่างที่เหลืออยู่ในมุมมองพาเรนต์ น้ำหนักเริ่มต้นคือศูนย์

การคำนวณเพื่อกำหนดช่องว่างที่เหลืออยู่ / พิเศษระหว่างเด็ก (ไม่ใช่พื้นที่ทั้งหมด)

ช่องว่างที่กำหนดให้กับเด็ก = (น้ำหนักของเด็กแต่ละคน) / (ผลรวมของน้ำหนักของเด็กทุกคนในรูปแบบเชิงเส้น)

ตัวอย่าง (1): ถ้ามีกล่องข้อความสามกล่องและอีกสองกล่องมีน้ำหนักเป็น 1 ในขณะที่กล่องที่สามไม่มีน้ำหนัก (0) ดังนั้นพื้นที่ที่เหลือ /พื้นที่พิเศษจะถูกกำหนดให้

1st text box = 1/(1+1+0) 
2nd text box = 1/(1+1+0) 
3rd text box = 0/(1+1+0) 

ตัวอย่าง (2) : สมมติว่าเรามีป้ายข้อความและองค์ประกอบแก้ไขข้อความสองรายการในแถวแนวนอน ป้ายกำกับไม่มีการระบุ layout_weight ดังนั้นจึงใช้พื้นที่ขั้นต่ำในการแสดงผล หาก layout_weight ขององค์ประกอบการแก้ไขข้อความทั้งสองถูกตั้งค่าเป็น 1 ความกว้างที่เหลือในเค้าโครงหลักจะถูกแบ่งเท่า ๆ กัน (เพราะเราอ้างว่ามันมีความสำคัญเท่าเทียมกัน)

calculation : 
1st label = 0/(0+1+1) 
2nd text box = 1/(0+1+1) 
3rd text box = 1/(0+1+1)

หากหนึ่งกล่องข้อความแรกมี layout_weight 1 และกล่องข้อความที่สองมี layout_weight 2 จากนั้นหนึ่งในสามของพื้นที่ที่เหลือจะได้รับการแรกและสองในสามที่สอง (เพราะเราอ้างว่าที่สองคือ สำคัญกว่า).

calculation : 
1st label = 0/(0+1+2) 
2nd text box = 1/(0+1+2) 
3rd text box = 2/(0+1+2) 

ในช่องความกว้างของปุ่มแทนที่ด้วยwrap-content ใช้คุณลักษณะ layout_weight ของมุมมอง0dp

android:layout_width="0dp"  

นี่คือลักษณะของรหัสของคุณ:

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

 <Button
    android:text="Register"
    android:id="@+id/register"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />

 <Button
    android:text="Not this time"
    android:id="@+id/cancel"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_weight="1" />    

</LinearLayout>

layout_weight จะใช้ในการกระจายพื้นที่ซ้ายออกเป็นสัดส่วน ในกรณีนี้ปุ่มทั้งสองใช้ความกว้าง "0dp" ดังนั้นพื้นที่ที่เหลือจะถูกแบ่งออกเป็นสัดส่วน 1: 1 เช่นพื้นที่จะถูกแบ่งเท่า ๆ กันระหว่างมุมมองปุ่ม

ชอบคำตอบของ@Manoj Seelan

แทนที่ด้วยandroid:layout_weightandroid:weight

เมื่อคุณใช้น้ำหนักLinearLayoutด้วย คุณต้องเพิ่มweightSumในLinearLayoutและเป็นไปตามทิศทางของคุณLinearLayoutคุณต้องตั้งค่า0dpสำหรับความกว้าง / ความสูงทั้งหมดLinearLayout `s มุมมองเด็ก

ตัวอย่าง:

หากการวางแนวของLinearlayoutคือVerticalให้ตั้งค่าความกว้างของLinearLayoutมุมมองลูกทั้งหมดด้วย0dp

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

หากการวางแนวLinearlayoutของเป็นhorizontalชุดแล้วความสูงของทุกLinearLayout`s 0dpมุมมองเด็กที่มี

 <LinearLayout
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:weightSum="3">

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="2" />

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:padding="10dip"
        android:layout_weight="1" />

  </LinearLayout>

บางทีการตั้งค่าทั้งสองปุ่มคุณสมบัติ layout_width เป็น "fill_parent" จะทำเคล็ดลับ

ฉันเพิ่งทดสอบรหัสนี้และมันทำงานในโปรแกรมจำลอง:

<LinearLayout android:layout_width="fill_parent"
          android:layout_height="wrap_content">

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="hello world"/>

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="goodbye world"/>

</LinearLayout>

ตรวจสอบให้แน่ใจว่าตั้งค่า layout_width เป็น "fill_parent" บนทั้งสองปุ่ม

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/logonFormButtons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="true"       
        android:orientation="horizontal">

        <Button
            android:id="@+id/logonFormBTLogon"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/logon"
            android:layout_weight="0.5" />

        <Button
            android:id="@+id/logonFormBTCancel"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"            
            android:text="@string/cancel"
            android:layout_weight="0.5" />
    </LinearLayout>

ใน XML ข้างต้นให้ตั้งค่าandroid:layout_weightของเลย์เอาต์เชิงเส้นเป็น2: android:layout_weight="2"

นอกจากนี้คุณต้องเพิ่มสิ่งนี้android:layout_width="0dp"สำหรับมุมมองเด็ก [มุมมองปุ่ม] ของLinerLayout

คุณต้องเขียนแบบนี้มันใช้งานได้สำหรับฉัน

<LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
            android:weightSum="2">

         <Button
            android:text="Register"
            android:id="@+id/register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

         <Button
            android:text="Not this time"
            android:id="@+id/cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_weight="1" />

ด้านล่างนี้คือการเปลี่ยนแปลง (ทำเครื่องหมายในBOLD ) ในรหัสของคุณ:

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

     <Button
        android:text="Register"
        android:id="@+id/register"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

     <Button
        android:text="Not this time"
        android:id="@+id/cancel"
        android:layout_width="0dp" //changes made here
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" /> //changes made here

  </LinearLayout>

เนื่องจาก LinearLayout ของคุณมีการวางแนวเป็นแนวนอนดังนั้นคุณจะต้องรักษาความกว้างของคุณไว้ที่ 0dp เท่านั้น สำหรับการใช้ตุ้มน้ำหนักในทิศทางนั้น (ถ้าวางแนวของคุณเป็นแนวตั้งที่คุณจะได้เก็บความสูงของคุณเพียง 0dp)

เนื่องจากมีจำนวนการดู 2 ครั้งและคุณวางไว้android:layout_weight="1"สำหรับทั้งสองมุมมองนั่นหมายความว่ามันจะแบ่งมุมมองทั้งสองให้เท่ากันในทิศทางแนวนอน (หรือตามความกว้าง)

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Button 2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Button 3" />

    </LinearLayout>

นี่คือคำตอบที่สมบูรณ์แบบสำหรับปัญหาของคุณ

  <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:orientation="horizontal"  >   
     <Button 
        android:text="Register" android:id="@+id/register"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
     <Button 
        android:text="Not this time" android:id="@+id/cancel"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:padding="10dip" weight="1" />
  </LinearLayout>

แทนด้วยwrap_contentfill_parent

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="#008">

            <RelativeLayout
                android:id="@+id/paneltamrin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"

                >
                <Button
                    android:id="@+id/BtnT1"
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                    android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/paneltamrin2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                >
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                     android:drawableTop="@android:drawable/ic_menu_edit"
                    android:drawablePadding="6dp"
                    android:padding="15dp"
                    android:text="AndroidDhina"
                    android:textColor="#000"
                    android:textStyle="bold" />

            </RelativeLayout>
        </LinearLayout>