วิธีการจัดแนววิดเจ็ตใน Android เป็นเค้าโครงแนวนอน


205

นี่คือรหัสที่ฉันใช้และมันไม่ทำงาน:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="horizontal">

    <TextView android:text="TextView" android:id="@+id/textView1"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:gravity="right">
    </TextView>

</LinearLayout>

คำตอบ:


418

ลองเพิ่มว่างViewในแนวนอนLinearLayoutก่อนองค์ประกอบที่คุณต้องการดูให้ถูกต้องเช่น:

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />                

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

11
มันใช้งานได้! แต่ทุกคนสามารถอธิบายได้ว่าทำไม ฉันไม่เข้าใจทั้งหมด
GMsoF

28
มุมมองที่ว่างเปล่าพยายามที่จะใช้พื้นที่จำนวนสูงสุดออกจากพื้นที่สำหรับปุ่ม
alcsan

14
จนถึงตอนนี้มันเป็นสิ่งเดียวที่ใช้ได้ผลสำหรับฉันในการพยายามมีปุ่มสองสามปุ่มทางด้านซ้ายและปุ่มสุดท้ายหนึ่งปุ่มด้านขวา แต่มันรู้สึกเหมือนแฮ็คกับฉัน มีวิธี "ถูกต้อง" ในการทำเช่นนี้?
IcedDante

8
นี่มันเจ๋งมาก! แต่ทำไมแรงโน้มถ่วง = "ถูกต้อง" ไม่ทำงานตั้งแต่ต้น เหตุใดจึงต้องการความช่วยเหลือจากมุมมองอื่นนี้ และเป็นอย่างไร "ถูกต้อง" หากไม่เป็นเช่นนั้นหากไม่มีมุมมองเพิ่มเติม
afrish

1
สิ่งนี้ไม่ทำงานในโครงร่างคล้ายกริด - ไม่มีที่ว่าง โซลูชันของ Sherif elKhatib ใช้ได้ผล
cdonner

119

อย่าเปลี่ยนแรงโน้มถ่วงของ LinearLayout เป็น "right" หากคุณไม่ต้องการให้ทุกอย่างถูกต้อง

ลอง:

  1. เปลี่ยน TextView ของความกว้างไปfill_parent
  2. เปลี่ยน TextView ของแรงโน้มถ่วงที่จะright

รหัส:

    <TextView 
              android:text="TextView" 
              android:id="@+id/textView1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"   
              android:gravity="right">
    </TextView>

1
ขอบคุณสำหรับสิ่งนี้ - มันเป็นความกว้างของ fill_parent ที่ทำให้ฉันถูกทิ้ง
dldnh

2
โครงร่างเชิงเส้นถูกออกแบบมาเพื่อให้บรรลุสิ่งนี้หรือไม่? ไม่ควรใช้เพียงแค่ใช้รูปแบบสัมพัทธ์เพื่อให้บรรลุนี้ โซลูชันนี้ไม่ใช่แฮ็คหรือไม่
2635088

สิ่งนี้จะไม่ทำงานหากคุณมีการควบคุม TextView หลายรายการใน LinearLayout ดูคำตอบจาก @alcsan
Felix

นี่ควรเป็นคำตอบที่ยอมรับได้ วิธีการนี้ไม่ได้ใช้มุมมองเพิ่มเติมใด ๆ และที่สำคัญกว่านั้นไม่ได้ใช้ layout_weight ที่แสดงประสิทธิภาพการทำงานลงอย่างมาก
Sermilion

android:layout_weight = "1"เคียงข้างandroid:gravity="right"กันควรทำเคล็ดลับ
Vassilis

63

เป็นอาหารเสริมเพื่อตอบ alcsan ของคุณสามารถใช้Spaceตั้งแต่ 14 API (Android 4.0 ICE_CREAM_SANDWICH) เอกสารที่นี่

Space เป็นคลาสย่อย View ที่มีน้ำหนักเบาซึ่งอาจใช้เพื่อสร้างช่องว่างระหว่างส่วนประกอบในโครงร่างของวัตถุประสงค์ทั่วไป

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="horizontal" >

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <TextView
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:text="TextView"
        android:gravity="right" />

</LinearLayout>

สำหรับแอพที่รองรับระดับ API ที่ต่ำกว่า 14 มีandroid.support.v4.widget.Spaceตั้งแต่ Android Support Library r22.1.0


สิ่งสำคัญคือคุณต้องตั้งค่า layout_weight = "1"
code4j

ทำงานได้อย่างสมบูรณ์แบบ! รักษาความกว้างของแต่ละองค์ประกอบ
phatmann

วิธีนี้ใช้ได้ผล ว้าวความอัปลักษณ์ของ Android ไม่เคยทำให้ฉันประหลาดใจเลย
Chris Neve

31

ด้วยเค้าโครงแบบเส้นตรง

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/select_car_book_tabbar"
        android:gravity="right" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/my_booking_icon" />
    </LinearLayout>

ป้อนคำอธิบายรูปภาพที่นี่

ด้วยFrameLayout

<FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/select_car_book_tabbar">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:src="@drawable/my_booking_icon" />
    </FrameLayout>

ด้วยRelativeLayout

<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/select_car_book_tabbar">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:src="@drawable/my_booking_icon" />
    </RelativeLayout>

21

การตั้งค่ามุมมองlayout_weight="1"จะเป็นการหลอกลวง!

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" />

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>


2
วิธีง่ายๆเช่นนี้ +1
Alex

1
หากมีใครยังคงมองนี้เป็นทางออกที่เหมาะสม :)
passatgt

นี่คือเวทมนตร์! คุณค้นพบมันได้อย่างไร?
andreikashin

@ andreikashin, พิจารณาการโหวตถ้ามันช่วยได้ ขอบคุณ
Saad Mahmud

13

เพิ่มandroid:gravity="right"ลงใน LinearLayout สมมติว่าTextViewมีlayout_width="wrap_content"


2
เขากล่าวโดยเฉพาะเพื่อจัดองค์ประกอบเดียวภายใน LinearLayout ไม่ใช่โครงร่างเชิงเส้นเอง: โครงร่างเองถูกกำหนดเป็น fill_parent
RichieHH


4

ฉันทำได้โดยวิธีที่ง่ายที่สุด:

เพียงแค่ใช้RelativeLayoutหนึ่งรายการและวางมุมมองลูก ของคุณไว้ในนั้นซึ่งคุณต้องการวางไว้ที่ด้านขวา

    <LinearLayout
        android:id="@+id/llMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f5f4f4"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingBottom="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="20dp">

        <ImageView
            android:id="@+id/ivOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />


        <TextView
            android:id="@+id/txtOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="Hiren"
            android:textAppearance="@android:style/TextAppearance.Medium"
            android:textColor="@android:color/black" />

        <RelativeLayout
            android:id="@+id/rlRight"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right">


            <ImageView
                android:id="@+id/ivRight"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/ic_launcher" />

        </RelativeLayout>
    </LinearLayout>

หวังว่ามันจะช่วยคุณ


3

คุณควรใช้ RelativeLayout และเพียงแค่ลากมันจนกว่ามันจะดูดี :)

    <ImageView
        android:id="@+id/button_info"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="10dp"
        android:contentDescription="@string/pizza"
        android:src="@drawable/header_info_button" />

</RelativeLayout>

2
"ลากพวกเขา" ไม่แนะนำสำหรับหน้าจอความละเอียดหลาย
โมเสส Aprico

3

linear layoutด้วยlayout_width="fill_parent"และวิดเจ็ตที่มีlayout width+ เดียวกันgravity as rightจะจัดแนวทางด้านขวา

ฉันใช้ 2 TextViews ในตัวอย่างต่อไปนี้topicTitleด้านซ้ายและtopicQuestionsด้านขวา

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

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

    <TextView
        android:id="@+id/topicTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/topicQuestions"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textSize="18sp"
        android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>

เอาท์พุต


2

ลองเปลี่ยน layout_width เป็นandroid:layout_width="match_parent"เพราะgravity:"right"จัดแนวข้อความภายใน layout_width และถ้าคุณเลือกเนื้อหาที่ถูกตัดมันจะไม่มีตำแหน่งที่จะไป แต่ถ้าคุณเลือกจับคู่พาเรนต์มันสามารถไปทางขวา


2

ไม่จำเป็นต้องใช้มุมมองหรือองค์ประกอบเพิ่มเติม:

// นั่นง่ายและง่ายมาก

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

// นี่คือการจัดแนวซ้าย

<TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="No. of Travellers"
      android:textColor="#000000"
      android:layout_weight="1"
      android:textStyle="bold"
      android:textAlignment="textStart"
      android:gravity="start" />

// นี่คือการจัดตำแหน่งที่ถูกต้อง

<TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Done"
      android:textStyle="bold"
      android:textColor="@color/colorPrimary"
      android:layout_weight="1"
      android:textAlignment="textEnd"
      android:gravity="end" />

</LinearLayout>

0

ในกรณีที่มี TextView:

<TextView 
    android:text="TextView" 
    android:id="@+id/textView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"   
    android:gravity="right"
    android:textAlignment="gravity">    
</TextView>

0

การเพิ่มมุมมองนั้นค่อนข้างยากและครอบคลุมความกว้างหน้าจอทั้งหมดเช่นนี้:

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

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_weight="1" />                

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

ลองรหัสนี้:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Create Account"/>

</LinearLayout>

-1

นี่คือตัวอย่าง กุญแจสำคัญในการจัดเรียงมีดังนี้

android:layout_width="0dp"
android:layout_weight="1"

รหัสสมบูรณ์

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp">

    <TextView
        android:id="@+id/categoryName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="abcd" />

    <TextView
        android:id="@+id/spareName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="efgh" />

</LinearLayout>

ป้อนคำอธิบายรูปภาพที่นี่


-1

ใช้ match_parent และแรงโน้มถ่วงเพื่อตั้งค่าข้อความ TextView ไปทางขวาดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView android:text="TextView" android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right">
    </TextView>

</LinearLayout>

-2

ลองนี้ ..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="horizontal" 
    android:gravity="right" >



    <TextView android:text="TextView" android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>

</LinearLayout>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.