2017-04-03 3 views
0

3つの水平な列と4つの垂直な行に分割されたxmlを書くにはどうすればよいですか?3つの水平な列と4つの垂直な行に分割されたXMLを書くにはどうすればよいですか?

3つの列に分割する必要がありますが、さらに3つの列をさらに4つの行に分割して、以下のスクリーンショットに示します。

添付ファイルのようなビューをXMLで取得するにはどうすればよいですか?水平の場合

enter image description here

<LinearLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="horizontal" android:layout_width="match_parent" 
     android:layout_marginTop="2dp" 
     android:layout_height="wrap_content" 
     android:weightSum="3" 
     android:id="@+id/l1" 
     android:background="#ffff"> 

     <ImageView 
      android:id="@+id/glassconsumed1" 
      android:src="@drawable/icon2" 
      android:layout_weight="1" 
      android:layout_width="wrap_content" 
      android:textColor="#ffff" 
      android:paddingLeft="40dp" 
      android:paddingRight="@dimen/desc_padding" 
      android:layout_height="20.7dp" /> 

     <ImageView 
      android:id="@+id/glassconsumed22" 
      android:src="@drawable/icon2" 
      android:layout_weight="1" 
      android:layout_width="wrap_content" 
      android:textColor="#ffff" 
      android:paddingLeft="40dp" 
      android:paddingRight="@dimen/desc_padding" 
      android:layout_height="20.7dp" /> 

     <ImageView 
      android:id="@+id/glassconsumed32" 
      android:src="@drawable/icon2" 
      android:layout_weight="1" 
      android:layout_width="wrap_content" 
      android:textColor="#ffff" 
      android:paddingLeft="40dp" 
      android:paddingRight="@dimen/desc_padding" 
      android:layout_height="20.7dp" /> 
     </LinearLayout> 

垂直

<LinearLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:orientation="vertical" android:layout_width="match_parent" 
      android:layout_marginTop="2dp" 
      android:layout_height="wrap_content" 
      android:weightSum="3" 
      android:layout_below="@+id/glassconsumed1" 
      android:id="@+id/l2" 
      android:background="#ffff"> 
     <TextView 
      android:layout_height="wrap_content" 
      android:inputType="textPersonName" 
      android:layout_weight="1" 
      android:layout_below="@+id/glassconsumed1" 
      android:hint=" 14/16" 
      android:textSize="16dp" 
      android:layout_width="wrap_content" 
      android:background="@color/white" 
      android:textColorHint="#8E8E8E" 
      android:layout_marginTop="2dp" 
      android:paddingLeft="@dimen/desc_padding" 
      android:paddingRight="@dimen/desc_padding" 
      android:textColor="#000000" 
      android:id="@+id/editTextvalue1" /> 
      <TextView 

       android:layout_height="wrap_content" 
       android:inputType="textPersonName" 
       android:layout_below="@+id/editTextvalue1" 
       android:layout_weight="1" 
       android:hint=" Glasses" 
       android:textSize="16dp" 
       android:layout_width="wrap_content" 
       android:background="@color/white" 
       android:textColorHint="#8E8E8E" 

       android:layout_marginTop="2dp" 
       android:paddingLeft="@dimen/desc_padding" 
       android:paddingRight="@dimen/desc_padding" 
       android:textColor="#000000" 
       android:id="@+id/editTextvalue2" /> 
      <TextView 

       android:layout_height="wrap_content" 
       android:inputType="textPersonName" 
       android:layout_below="@+id/editTextvalue2" 
       android:layout_weight="1" 
       android:hint="Consumed" 
       android:textSize="16dp" 
       android:layout_width="wrap_content" 
       android:background="@color/white" 
       android:textColorHint="#8E8E8E" 

       android:layout_marginTop="2dp" 
       android:paddingLeft="@dimen/desc_padding" 
       android:paddingRight="@dimen/desc_padding" 
       android:textColor="#000000" 
       android:id="@+id/editTextvalue3" /> 
      </LinearLayout> 
+0

は、ユースケースに依存し、TableLayoutのデータが動的であるか、すべての3つのレイアウトが異なっているか、また、使用することができた場合、あなたは、カウント3でrecyclerviewを使用することができますネストされたLinearLaoutまたはGridlayout。いくつかの研究を行う、それは難しいことではない。 –

答えて

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="match_parent" 
    android:orientation="horizontal" 
    android:weightSum="1"> 

    <LinearLayout 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight=".33" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_gravity="center" 
     android:background="@mipmap/ic_launcher" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="14/16" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Glasses" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Consumed" /> 

</LinearLayout> 

<View 
    android:layout_width="1dp" 
    android:layout_height="wrap_content" 
    android:background="@color/colorAccent" /> 

<LinearLayout 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight=".33" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_gravity="center" 
     android:background="@mipmap/ic_launcher" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="14/16" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Glasses" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Consumed" /> 

</LinearLayout> 

<View 
    android:layout_width="1dp" 
    android:layout_height="wrap_content" 
    android:background="@color/colorAccent" /> 

<LinearLayout 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight=".33" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_gravity="center" 
     android:background="@mipmap/ic_launcher" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="14/16" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Glasses" /> 

    <TextView 
     android:textColor="#cccccc" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="Consumed" /> 

    </LinearLayout> 

</LinearLayout> 
+0

これだけの画像は来るテキストは来ません – user6313669

+0

textviewの色を設定しようとしました –

+0

縦線が表示されません – user6313669

0
<Linear 
    orientation="vertical" 
     <Linear 
      orientation=horizontal 
       <Linear 
        orientation=vertical 
        <textview> 
        <imageview> 
        <textview> 
        <Textview> 
       </linear> 
       <Linear 
        orientation=vertical 
        <textview> 
        <imageview> 
        <textview> 
        <Textview> 
       </linear> 
       <Linear 
        orientation=vertical 
        <textview> 
        <imageview> 
        <textview> 
        <Textview> 
       </linear> 
     </Linear> 
</linear> 

このようにすることができます。

1

あなたはこれらの例を参照してください。GridLayoutのかTableLayout
を使用することができます。GridLayout

関連する問題