0

이렇게 디자인을 구현하는 방법은 모호한 이미지에 대해서는 미안합니다.행 스팬과 열 스팬 디자인에 가장 적합한 레이아웃

나는 세 가지 옵션

  1. weightsum와

    선형 레이아웃 (하드)

  2. TableLayout을 (안 지원 열 범위)

  3. GridLayout과는 (몰라)

enter image description here

나는

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

    <TextView 
     android:id="@+id/space1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="3dp" 
     android:text="Fir 08 Jul 10:44GMT +01 " /> 

    <TableLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:shrinkColumns="*" 
     android:stretchColumns="*"> 

     <TableRow 
      android:id="@+id/tableRow1" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" 
      android:padding="5dp"> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:layout_span="4" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:padding="3dp" 
       android:text="ATP Singles Winmbeldon" 
       android:textColor="#000000" /> 
     </TableRow> 

     <TableRow 
      android:id="@+id/tableRow2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal"> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="A" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="B" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="C" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="D" 
       android:textColor="#000000" /> 
     </TableRow> 

     <TableRow 
      android:id="@+id/tableRow3" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal"> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="E" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="F" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="G" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="H" 
       android:textColor="#000000" /> 
     </TableRow> 

     <TableRow 
      android:id="@+id/tableRow4" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal"> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="I" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="J" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="K" 
       android:textColor="#000000" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="1dp" 
       android:background="#FFFFFF" 
       android:gravity="center" 
       android:text="L" 
       android:textColor="#000000" /> 
     </TableRow> 

    </TableLayout> 


</LinearLayout> 
+0

내가 당신 때문에 거의 같은 2 데이터 ... 2 수평으로 먼저 선형 레이아웃 풋 텍스트 뷰에 다른 레이아웃 넣어 목록보기에 선형 레이아웃 나누기를 사용하여 생각 – sushildlh

답변

2

android.support.v7.widget.GridLayout 귀하의 상황에 맞는이 테이블 레이아웃을 시도했다. 당신의 build.gradle에서

(모든 버전 확인 할 수있다) : 당신의 style.xml에서

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/white" 
     android:orientation="vertical" 
     android:padding="16dp"> 

    <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:paddingTop="3dp" 
      android:paddingBottom="3dp" 
      android:text="Fir 08 Jul 10:44GMT +01"/> 

    <android.support.v7.widget.GridLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@android:color/darker_gray" 
      app:columnCount="8"> 

     <!-- 
      Header Row 
     --> 

     <TextView 
       style="@style/CellStyle" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       app:layout_columnSpan="7" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:padding="3dp" 
       android:background="@android:color/darker_gray" 
       android:text="ATP Singles Winmbeldon" 
       android:textColor="@android:color/white"/> 

     <!-- Spacer for green --> 
     <View 
       style="@style/CellSpacerStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1"/> 


     <!-- 
      First Row SF 13:00 
     --> 

     <!-- Title --> 
     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="2" 
       android:text="SF\n13:00"/> 

     <!-- Sore 1 --> 
     <TextView 
       style="@style/CellStyle" 
       android:layout_height="@dimen/row_height" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="1" 
       android:text="Raonic M. (6)"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="6"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="3"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="5"/> 

     <!-- GreenView --> 
     <FrameLayout 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:layout_marginLeft="@dimen/border_size" 
       android:paddingTop="@dimen/border_size" 
       android:background="@android:color/white"> 

      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/green_circle"/> 

     </FrameLayout> 


     <!-- Sore 2 --> 
     <TextView 
       style="@style/CellStyle" 
       android:layout_height="@dimen/row_height" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="1" 
       android:text="Federer R. (3)"/> 


     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="6"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="7"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="7"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="5"/> 


     <!-- GreenView --> 
     <FrameLayout 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:layout_marginLeft="@dimen/border_size" 
       android:paddingTop="@dimen/border_size" 
       android:background="@android:color/white"> 

      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/green_circle"/> 

     </FrameLayout> 


     <!-- 
     Second Row SF 15:00 
     --> 

     <!-- Title --> 
     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="2" 
       android:text="SF\n15:00"/> 

     <!-- Sore 1 --> 
     <TextView 
       style="@style/CellStyle" 
       android:layout_height="@dimen/row_height" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="1" 
       android:text="Berdych T.(10)"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="6"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="3"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="5"/> 


     <!-- GreenView --> 
     <FrameLayout 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:layout_marginLeft="@dimen/border_size" 
       android:paddingTop="@dimen/border_size" 
       android:background="@android:color/white"> 

      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/green_circle"/> 

     </FrameLayout> 


     <!-- Sore 2 --> 
     <TextView 
       style="@style/CellStyle" 
       android:layout_height="@dimen/row_height" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       app:layout_rowSpan="1" 
       android:text="Murray A (2)"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="4"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="6"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:gravity="center" 
       android:text="7"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="7"/> 

     <TextView 
       style="@style/CellStyle" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:text="5"/> 

     <!-- GreenView --> 
     <FrameLayout 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:layout_marginLeft="@dimen/border_size" 
       android:paddingTop="@dimen/border_size" 
       android:background="@android:color/white"> 

      <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:src="@drawable/green_circle"/> 

     </FrameLayout> 

     <!-- 
     Bottom Brders 
     --> 
     <View 
       android:layout_width="0dp" 
       android:layout_height="@dimen/border_size" 
       app:layout_columnSpan="7" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1"/> 

     <View 
       android:layout_width="0dp" 
       android:layout_height="@dimen/border_size" 
       android:layout_marginLeft="@dimen/border_size" 
       app:layout_columnWeight="1" 
       app:layout_rowWeight="1" 
       android:background="@android:color/white"/> 

    </android.support.v7.widget.GridLayout> 

</LinearLayout> 

:

<resources> 
    ... 
    <style name="CellStyle"> 
     <item name="android:layout_marginTop">@dimen/border_size</item> 
     <item name="android:layout_marginLeft">@dimen/border_size</item> 
     <item name="android:background">@android:color/white</item> 
     <item name="android:gravity">center</item> 
    </style> 

    <style name="CellSpacerStyle"> 
     <item name="android:layout_width">0dp</item> 
     <item name="android:layout_height">0dp</item> 
     <item name="android:layout_marginLeft">@dimen/border_size</item> 
     <item name="android:background">@android:color/white</item> 
    </style> 
    ... 
</resources> 

레이아웃 XML 파일에

compile "com.android.support:gridlayout-v7:24.1.1" 

귀하의 dimens.xml에서 :

결과 0 이하이다 GridLayout과 [document]

enter image description here

특성

  • app:columnCount GridLayout과의 열 수이다.
  • app:rowCount은 Gridlayout의 행 수입니다. GridLayout과 '어린이 [document]

    • app:layout_columnSpan

    속성이보기에 의해 점유 된 컬럼의 수입니다.

  • app:layout_rowSpan은이보기에서 차지하는 스팬의 수입니다.
+0

이이 녹색 이미지 뷰를 추가 할 수 있습니다 답변이 늦어 죄송합니다 더 도움이 될만한 테이블. 내 screeenshot 참조 –

+0

그리고 내가 이해할 수 있도록 gridlayout에 대한 몇 가지 설명을 추가합니다. like app : columnCount = "7" app : rowCount = "2" –

+0

OK 녹색 이미지 뷰를 추가하고 나중에 설명하려고합니다. – nshmura

관련 문제