2014-02-18 60 views
1

我有一個6列的網格佈局。有沒有辦法將一個網格佈局中的三列對齊一行?

對於頂行我已經給它合併單元格的6和第二行我已經給每個TextView中的2

一個合併單元格我希望這將讓一切成正比。然而,它看起來像這樣:

enter image description here

但我希望它看起來是這樣的:

enter image description here

我怎樣才能讓我在第二排三列propotional屏幕空間這樣第一個在左邊,第二個在中間,第三個在右邊?

我到目前爲止是這樣的:

<?xml version="1.0" encoding="utf-8"?> 
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:columnCount="6" 
    android:rowCount="4" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginTop="10dp" 
    android:orientation="horizontal" 
    android:layout_marginRight="10dp" 
    android:layout_marginLeft="10dp" 
    android:background="@drawable/rounded"> 

    <TextView 
     android:layout_gravity="center_horizontal" 
     android:text="Some Text" 
     android:textStyle="bold" 
     android:textColor="#000000" 
     android:textSize="30dp" 
     android:textAlignment="center" 
     android:layout_columnSpan="6" 
     android:paddingTop="10dp" 
     android:paddingBottom="10dp" 
     /> 



    <TextView 
     android:text="96" 
     android:textStyle="bold" 
     android:paddingRight="70dp" 
     android:textColor="#000000" 
     android:textSize="18dp" 
     android:layout_columnSpan="2" 
     android:paddingLeft="10dp" 
     android:paddingBottom="5dp"/> 

    <TextView 
     android:text="107" 
     android:textStyle="bold" 
     android:paddingRight="70dp" 
     android:layout_columnSpan="2" 
     android:textSize="18dp" 
     android:textColor="#000000"/> 

    <TextView 
     android:text="62" 
     android:textStyle="bold" 
     android:layout_columnSpan="2" 
     android:textSize="18dp" 
     android:paddingRight="10dp" 
     android:textColor="#000000"/> 

    <TextView 
     android:text="Text 1" 
     android:paddingRight="20dp" 
     android:paddingLeft="10dp" 
     android:layout_columnSpan="2" 
     android:textSize="18dp" 
     android:textColor="#ff565656" 
     android:paddingBottom="10dp"/> 

    <TextView 
     android:text="Text 2" 
     android:paddingRight="70dp" 
     android:layout_columnSpan="2" 
     android:textSize="18dp" 
     android:textColor="#ff565656"/> 

    <TextView 
     android:text="Text 3" 
     android:textColor="#ff565656" 
     android:layout_columnSpan="2" 
     android:textSize="18dp" 
     android:paddingRight="10dp"/> 

</GridLayout> 

回答

0

一個選擇,肯定會的工作將是把每個TextView中有一個屬性Android上的LinearLayout裏面:layout_weight =「1」,並且會自動分配等於每個LinearLayout的空間(以及相應的每個對應的TextView)。

雖然我不能肯定地說,另一種選擇是直接將屬性android:layout_weight =「1」添加到每個TextView中 - 我認爲它應該可以工作,但我之前沒有使用過。我有興趣看看這是否也適用。

1

我已經設法得到類似於你發佈的內容。儘管我使用View hack來獲得細微的分隔線。

佈局:

<?xml version="1.0" encoding="utf-8"?> 
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal" 
    android:background="@drawable/element_bg" 
    android:columnCount="3" 
    android:orientation="horizontal" 
    android:rowCount="4" > 

    <!-- Row 1 --> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_columnSpan="3" 
     android:layout_gravity="center_horizontal" 
     android:gravity="center" 
     android:paddingBottom="10dp" 
     android:paddingTop="10dp" 
     android:text="Some Text" 
     android:textAlignment="center" 
     android:textColor="#000000" 
     android:textSize="30sp" 
     android:textStyle="bold" /> 

    <!-- Row 2 --> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="1dp" 
     android:layout_columnSpan="3" 
     android:background="@android:color/darker_gray" /> 

    <!-- Row 3 --> 

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

     <!-- Column 1 --> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_gravity="left" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:padding="@dimen/row_padding" > 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="107" 
       android:textColor="#000000" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="Tweets" 
       android:textColor="#ff565656" 
       android:textSize="18sp" /> 
     </LinearLayout> 

     <View 
      android:layout_width="1dp" 
      android:layout_height="match_parent" 
      android:background="@android:color/darker_gray" /> 

     <!-- Column 2 --> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:padding="@dimen/row_padding" > 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="96" 
       android:textColor="#000000" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="Following" 
       android:textColor="#ff565656" 
       android:textSize="18sp" /> 
     </LinearLayout> 

     <View 
      android:layout_width="1dp" 
      android:layout_height="match_parent" 
      android:background="@android:color/darker_gray" /> 

     <!-- Column 3 --> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:padding="@dimen/row_padding" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="56" 
       android:textColor="#000000" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Followers" 
       android:textColor="#ff565656" 
       android:textSize="18sp" /> 
     </LinearLayout> 
    </LinearLayout> 

    <!-- Row 4 --> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="1dp" 
     android:layout_columnSpan="3" 
     android:background="@android:color/darker_gray" /> 

</GridLayout> 

element_bg.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <solid android:color="#ffffff" /> 

    <corners android:radius="4dp" /> 

</shape> 

或者,你可以嘗試普通邊框(容易處理):

border.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > 
    <solid android:color="#ffffff" /> 
    <corners android:radius="4dp"/> 
    <stroke android:width="1dip" android:color="@android:color/darker_gray"/> 
</shape> 

一毛錢ns.xml。您可以隨意調整填充值。

<resources> 

    <!-- Default screen margins, per the Android Design guidelines. --> 
    <dimen name="activity_horizontal_margin">16dp</dimen> 
    <dimen name="activity_vertical_margin">16dp</dimen> 
    <dimen name="row_padding">15dp</dimen> 

</resources> 

對於這最後一個,你可能會得到元素重疊其邊界,嘗試在這些情況下,一定的餘量。

在附註中,您可能希望使用TableLayout,因爲GridLayout只能在API 14+中使用,並且您無法獲得此「空間過剩」以使用它,除非您像使用LinearLayout那樣使用LinearLayout來切入重量屬性。
「通常,因此不可能配置GridLayout以在多個組件之間分配多餘的空間[...] [...]爲了完全控制行或列中多餘的空間分佈;使用LinearLayout子視圖來保存組件關聯的單元組「。 - http://developer.android.com/reference/android/widget/GridLayout.html

表 - http://developer.android.com/guide/topics/ui/layout/grid.html

+0

哪裏是'@繪製/ row_padding'來自哪裏? – Anthony

+0

對不起,造成巨大的延遲。 @ dimen/row_padding你的意思是,它是Android資源/res/values/dimens.xml中使用的一個簡單的dimen文件。它本質上是一個文件,用於在應用程序中保存不同視圖中使用的維度。我編輯了答案來反映這一點。 – Toguard

相關問題