เค้าโครง Android พร้อม ListView และปุ่ม


101

เอาล่ะเลย์เอาต์เฉพาะนี้ทำให้ฉันรำคาญ และดูเหมือนจะหาวิธีที่จะมี listView ไม่ได้โดยมีแถวของปุ่มที่ด้านล่างเพื่อไม่ให้มุมมองรายการขยายไปด้านบนของปุ่มดังนั้นปุ่มต่างๆจะถูกจัดเรียงไว้ที่ด้านล่างของหน้าจอเสมอ นี่คือสิ่งที่ฉันต้องการ:

ลบลิงก์ ImageShack ที่ตายแล้ว

ดูเหมือนว่ามันจะง่ายมาก แต่ทุกอย่างที่ฉันพยายามล้มเหลว ความช่วยเหลือใด ๆ

นี่คือรหัสปัจจุบันของฉัน:

    RelativeLayout container = new RelativeLayout(this);
    container.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));

    //** Add LinearLayout with button(s)

    LinearLayout buttons = new LinearLayout(this);

    RelativeLayout.LayoutParams bottomNavParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    bottomNavParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    bottomNavParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
    buttons.setLayoutParams(bottomNavParams);


    ImageButton newLayer = new ImageButton(this);
    newLayer.setImageResource(R.drawable.newlayer);
    newLayer.setLayoutParams(new LinearLayout.LayoutParams(45, LayoutParams.FILL_PARENT));
    buttons.addView(newLayer);

    container.addView(buttons);

    //** Add ListView

    layerview = new ListView(this);

    RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
    listParams.addRule(RelativeLayout.ABOVE, buttons.getId());

    layerview.setLayoutParams(listParams);

    container.addView(layerview);

คำถามที่ดีนักพัฒนาจำนวนมากจะติดอยู่กับสิ่งนี้
Signcodeindie

โชคดีที่นักออกแบบใน Android สวยหวานจริงๆ ดังนั้นเมื่อสร้างเค้าโครง / UI ให้ลองใช้ตัวออกแบบ / XML โดยเฉพาะอย่างยิ่งสำหรับสถานการณ์นี้เนื่องจากเป็นเพียงชุดปุ่มและ ListView
Subby

คำตอบ:


137

ฉันคิดว่านี่คือสิ่งที่คุณกำลังมองหา

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

    <Button android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:id="@+id/testbutton"
        android:text="@string/hello" android:layout_alignParentBottom="true" />

    <ListView android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:id="@+id/list"
        android:layout_alignParentTop="true" android:layout_above="@id/testbutton" />

</RelativeLayout>

นั่นคือสิ่งที่ฉันใช้โดยทั่วไปแม้ว่าฉันจะเขียนเค้าโครงใน Java listView ยังคงขยายอยู่เหนือปุ่มต่างๆ
Kleptine

1
สิ่งเดียวที่ฉันเปลี่ยนแปลงคือฉันกำลังเพิ่ม relativeLayout รอบ ๆ ListView เพราะฉันไม่สามารถเรียก addRule (RelativeLayout.ABOVE) บน ListView ได้
Kleptine

2
รหัสนี้ควรใช้งานได้ดี android:layout_above="@id/testbutton"จะคงไว้ListViewข้างต้นButton.
CommonsWare

เมื่อฉันใช้สิ่งนี้ฉันได้รับรายการเพื่อหยุดเหนือปุ่มจากนั้นเริ่มเลื่อนภายใน
ลาร์ส

7
คุณไม่ได้โทรหาaddRule(RelativeLayout.ABOVE)a RelativeLayoutเช่นกัน คุณเรียกมันว่าRelativeLayout.LayoutParams. จากนั้นคุณเพิ่มListViewไปที่RelativeLayoutการจัดหาสิ่งRelativeLayout.LayoutParamsนั้น โปรดพิจารณาเปลี่ยนเป็น XML และขยายเพื่อให้สามารถบำรุงรักษาได้ในระยะยาว
CommonsWare

57

ฉันมีปัญหาเดียวกันมานานแล้ว

วิธีแก้ปัญหาในการทำให้ ListView อยู่เหนือปุ่ม แต่ป้องกันไม่ให้มันบังเมื่อรายการมีความยาวคือการตั้งค่า android: layout_weight = "1.0" บน ListView ปล่อย Layout_weight บนปุ่มโดยไม่ได้ตั้งค่าเพื่อให้ยังคงมีขนาดตามธรรมชาติมิฉะนั้นปุ่มจะถูกปรับขนาด สิ่งนี้ใช้ได้กับ LinearLayout

มีตัวอย่างใน Android ApiDemos: ApiDemos / res / layout / linear_layout_9.xml


แค่ช่วยฉันเพิ่มอีกสองสามชั่วโมง ไม่เข้าใจว่าทำไมปุ่มไม่ปรากฏ :)
หนาวจัด

ฉันไม่เข้าใจอย่างถ่องแท้ว่าทำไมถึงได้ผล แต่มันใช้ได้ :)
Bevor

20

ฉันแค่ค้นหาคำตอบสำหรับคำถามนี้และนี่เป็นหนึ่งในผลลัพธ์แรก ฉันรู้สึกราวกับว่าคำตอบทั้งหมดรวมถึงคำตอบที่ได้รับเลือกให้เป็น "คำตอบที่ดีที่สุด" ในขณะนี้ไม่ได้ระบุถึงปัญหาที่ถูกถามถึง ปัญหาที่ระบุไว้คือมีการทับซ้อนกันของทั้งสององค์ประกอบButtonและListViewใน ListView นั้นกินพื้นที่หน้าจอทั้งหมดและปุ่มนั้นลอยอยู่เหนือ (ด้านหน้า) ListView (มุมมองการปิดกั้น / การเข้าถึงล่าสุด รายการในListView)

จากคำตอบที่ฉันได้เห็นที่นี่และในฟอรัมอื่น ๆ ในที่สุดฉันก็ได้ข้อสรุปเกี่ยวกับวิธีแก้ไขปัญหานี้

เดิมทีฉันมี:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#FF394952">

  <ListView
    android:id="@+id/game_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    />

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    style="@android:style/ButtonBar">

    <Button
      android:id="@+id/new_game"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/new_game"
      android:textColor="#FFFFFFFF"
      android:background="@drawable/button_background" />
  </LinearLayout>

</RelativeLayout>

สังเกตการใช้RelativeLayoutเป็นโหนดรูท

นี่เป็นเวอร์ชันสุดท้ายที่ใช้งานได้ซึ่งปุ่มไม่ทับซ้อนกับListView:

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

  <ListView
    android:id="@+id/game_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_weight="1.0" />

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    style="@android:style/ButtonBar">

    <Button
      android:id="@+id/new_game"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/new_game"
      android:textColor="#FFFFFFFF"
      android:background="@drawable/button_background" />
  </LinearLayout>

</LinearLayout>

มีเพียงสองข้อแตกต่าง ก่อนอื่นฉันเปลี่ยนมาใช้ไฟล์LinearLayout. สิ่งนี้จะช่วยในบิตถัดไปซึ่งเพิ่มandroid:layout_weightในไฟล์ListView

ฉันหวังว่านี่จะช่วยได้.


เรื่องนี้แก้ แต่ใครจะเดา!? เมื่อคุณให้android:layout_alignParentBottomภายในLinearLayoutผู้ปกครอง ADT จะบอกว่า "พารามิเตอร์การจัดวางไม่ถูกต้องใน LinearLayout: layout_alignParentBottom"!
Aswin Kumar

8

วิธีที่ดีที่สุดคือเค้าโครงสัมพัทธ์ที่ตั้งค่าปุ่มด้านล่างมุมมองรายการ ในตัวอย่างนี้ปุ่มต่างๆยังอยู่ในเลย์เอาต์เชิงเส้นเพราะง่ายกว่าที่จะวางไว้ข้างกันในขนาดที่เท่ากัน

<RelativeLayout android:id="@+id/RelativeLayout01" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent">

<ListView android:id="@+id/ListView01" 
android:layout_alignParentTop="true"
android:layout_width="fill_parent" 
android:layout_height="fill_parent">
</ListView>

<LinearLayout android:id="@+id/LinearLayout01" 
android:layout_below="@+id/ListView01" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true">
<Button android:id="@+id/ButtonJoin" 
android:text="Join"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true">
</Button>
<Button android:id="@+id/ButtonJoin" 
android:layout_alignRight="@id/ButtonCancel" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"
android:layout_alignParentBottom="true">
</Button>
</LinearLayout>

</RelativeLayout>

ปัญหาคือมันขยายไปด้านบนของปุ่มที่ด้านล่างหากมุมมองรายการยาวเกินไป ฉันคิดไม่ออกว่าจะให้มันหยุดเหนือปุ่มได้อย่างไร
Kleptine

2
หากคุณใช้ (ฉันคิดว่า 1.5 อาจถึง 1.6) คุณต้องมีปุ่มก่อน ListView เมื่อใช้กฎ RelativeLayout มิฉะนั้นเค้าโครงจะไม่ทราบถึงปุ่มเนื่องจากอ่านตามลำดับซึ่งเป็นสาเหตุที่ ListView ของคุณขยายออกไป ผ่านพวกเขา
Tim H

สิ่งนี้ไม่ได้ผลสำหรับฉัน เหมือนที่ Tim H พูดสำหรับฉันฉันต้องวาง ListView ไว้หลัง LinearLayout แล้วสร้าง ListView layout_above เหมือนคำตอบของ repoc ด้านบน
Nemi

สิ่งนี้จะไม่ทำงานปุ่มไม่อยู่บนหน้าจอและจะไม่เลื่อน
Vaibhav Mishra

1

ฉันรู้ว่าโพสต์นี้ค่อนข้างเก่า แต่เพื่อตอบคำถามของผู้โพสต์ต้นฉบับสาเหตุที่โค้ดใช้ไม่ได้คือปุ่ม getId () คืนค่า -1 หากคุณจะทำสิ่งนี้คุณต้องตั้งค่าทำบางอย่างเช่นปุ่มโทร setId (10) หากคุณทำเช่นนั้นรหัสจะทำงานได้ดี


0

สิ่งนี้ควรใช้งานได้ หากต้องการมีปุ่มเหนือมุมมองรายการให้วางปุ่มไว้ในรูปแบบเชิงเส้นอื่น

<LinearLayout> main container // vertical

<LinearLayout> scrollview must be contained in a linear layout //vertical - height to fill parent

    <ScrollView> set the height of this to fill parent

        <ListView> will be contained in the scrollview
        </ListView>

    </ScrollView>

</LinearLayout>

<LinearLayout> //horizontal - height to wrap content

<Button>

</Button>

</LinearLayout>

</LinearLayout>

0

วิธีแก้ปัญหาที่ง่ายที่สุดคือการสร้างเลย์เอาต์เชิงเส้นสองแบบอันหนึ่งมีปุ่มและอีกอันที่มีมุมมองรายการ (ตัดเนื้อหาที่ความสูงของปุ่มและจับคู่พาเรนต์กับความสูงของเค้าโครงรายการ) จากนั้นสร้างเฉพาะมุมมองแบบเลื่อนบนเค้าโครงด้วยมุมมองรายการและเค้าโครงปุ่มจะถูกละเว้น หวังว่ามันจะช่วยได้ขอโทษฉันไม่รู้สึกอยากเขียนโค้ด

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