2016-04-09 33 views
5

Tôi là rất Phát triển ứng dụng mới cho Android và đang cố gắng đạt được bố cục nút sau trong Android Studio.Android Studio cách tạo LinearLayout 2 cột

[App design[1]

Ive đã cố gắng sử dụng một Linear Layout, nhưng tôi không thể làm cho nó đúng.

<LinearLayout 
    android:orientation="horizontal" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_alignParentTop="true" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentEnd="true" 
    android:weightSum="1"> 

    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="New Button" 
     android:id="@+id/button" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentEnd="true" 
     android:background="#016eff" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_margin="10dp" 
     android:textColor="#ffffff" 
     android:layout_weight="0.48" /> 

    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="New Button" 
     android:id="@+id/button2" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentEnd="true" 
     android:background="#016eff" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_margin="10dp" 
     android:textColor="#ffffff" 
     android:layout_weight="0.48" /> 
</LinearLayout> 

Vấn đề với điều này là, nếu tôi thêm nút khác vào Bố cục tuyến tính, thì chúng sẽ bị gộp lại với nhau, thay vì thêm nút vào hàng tiếp theo.

Ai đó có thể vui lòng chỉ cho tôi để làm cho LinearLayout của tôi chỉ có 2 tiện ích con trên mỗi hàng hoặc cung cấp một bản sửa lỗi khác.

Bất kỳ trợ giúp nào sẽ được đánh giá cao nhờ :-)

+1

thử với tablelayout thay vì linearlayout – Vishwa

+0

Được rồi, bị bệnh và thử ngay bây giờ. –

+0

@Vishwa Cảm ơn rất nhiều, tôi đã cố gắng làm cho nó hoạt động! –

Trả lời

8

LinearLayout là tốt cho những gì bạn đang cố gắng đạt được. Vui lòng xem các thuộc tính trọng số và định hướng của đối tượng LinearLayout. Linear Layout

Và những gì bạn muốn, bạn có thể làm ví dụ như thế này:

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:gravity="center"> 

     <TextView 
      android:text="Whatever You Want Here" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center" 
      android:textSize="36sp"/> 
    </LinearLayout> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center"> 

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

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

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center"> 

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

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

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center"> 

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

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

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center"> 

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

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

Output:

Linear Layout 2 Columns

Và xem ra, bởi vì làm tổ quá nhiều trọng lượng thuộc tính có thể có một số tiêu cực vấn đề hiệu năng.

1

Được rồi, tôi đã tìm được cách khắc phục nhờ nhận xét của Vishwa. Tuy nhiên, tôi đã không thực sự tìm thấy một cách để thực hiện một LinearLayout có 2 cột.

Thay vào đó, tôi đã thay đổi thành TableLayout và streched colums 0 & 1 để chụp toàn bộ màn hình. Heres cách XML của tôi đã kết thúc tìm kiếm. (Nó có thêm nội dung trong nó để có được thiết kế của tôi)

<TableLayout 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentEnd="true" 
    android:stretchColumns="0,1"> 

    <TableRow 
     android:layout_width="match_parent" 
     android:paddingBottom="8dp" 
     android:layout_height="match_parent"> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Events" 
      android:id="@+id/eventButton" 
      android:layout_column="0" 
      android:background="#016eff" 
      android:layout_marginRight="8dp" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Absentee" 
      android:id="@+id/absenteeButton" 
      android:layout_column="1" 
      android:background="#016eff" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 

    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:paddingBottom="8dp" 
     android:layout_height="match_parent" > 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Contacts" 
      android:id="@+id/contactsButton" 
      android:layout_column="0" 
      android:background="#016eff" 
      android:layout_marginRight="8dp" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Alerts" 
      android:id="@+id/alertButton" 
      android:layout_column="1" 
      android:background="#016eff" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:paddingBottom="8dp" 
     android:layout_height="match_parent" > 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Links" 
      android:id="@+id/linksButton" 
      android:layout_column="0" 
      android:background="#016eff" 
      android:layout_marginRight="8dp" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Newsletter" 
      android:id="@+id/newsletterButton" 
      android:layout_column="1" 
      android:background="#016eff" 
      android:textColor="#ffffff" 
      android:textSize="40px" 
      android:textStyle="normal" /> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:paddingBottom="8dp" 
     android:layout_height="match_parent" > 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Kamar" 
      android:id="@+id/kamarButton" 
      android:layout_column="0" 
      android:background="#016eff" 
      android:layout_marginRight="8dp" 
      android:textColor="#ffffff" 
      android:textStyle="normal" 
      android:textSize="40px" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="News" 
      android:id="@+id/newsButton" 
      android:layout_column="1" 
      android:background="#016eff" 
      android:textColor="#ffffff" 
      android:textSize="40px" 
      android:textStyle="normal" /> 
    </TableRow> 

</TableLayout> 
1

Bạn chỉ cần đặt một LinearLayout riêng biệt với android:orientation="horizontal" xung quanh mỗi cặp nút. Sau đó, LinearLayaout mẹ nên có android:orientation="vertical" và trọng số phải nằm trong mỗi LinearLayout nằm ngang.

+0

Cảm ơn sự giúp đỡ, tốt để có nhiều giải pháp cho một vấn đề. –

+1

Tôi thấy việc sử dụng LinearLayouts lồng nhau cho phép bạn linh hoạt hơn TableLayout, như khi bạn cần một hàng nút để xếp hàng khác nhau hoặc để có một dòng với số lượng bố cục khác nhau. – Christine

Các vấn đề liên quan