ImageButtonsはGridLayoutでオーバーラップしますが、これは不要です

Question

GridLayoutに問題があります。以下のレイアウトでは、phone_imageとvoip_imageが重なっていて、私はそれらを望んでいません。 phone_imageは、列0にあり、2

SSCCEはGithubの上欄に https://github.com/emnrd-ito/LayoutDemo

<HorizontalScrollView 
    android:id="@+id/container_scroll_view" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <GridLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto" 
     xmlns:tools="http://schemas.android.com/tools" 
     android:id="@+id/individual_gridlayout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 
     android:alignmentMode="alignBounds" 
     android:columnCount="4" 
     android:columnOrderPreserved="false" 
     android:rowCount="7"> 

     <ImageView 
      android:id="@+id/division_logo" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_columnSpan="3" 
      android:layout_margin="10dp" 
      android:layout_row="0" 
      android:layout_rowSpan="3" 
      android:background="@null" 
      android:layout_gravity="center_horizontal" 
      android:src="@mipmap/ic_launcher" /> 

     <TextView 
      android:id="@+id/employee_name" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="0" 
      android:text="Nobody Lastname" 
      tools:text="name" /> 

     <TextView 
      android:id="@+id/division" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="1" 
      android:text="My Division" 
      tools:text="division" /> 

     <TextView 
      android:id="@+id/title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="2" 
      android:text="My Title" 
      tools:text="position" /> 

     <TextView 
      android:id="@+id/address" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="3" 
      android:text="123 Sesame St." 
      tools:text="address" /> 

     <TextView 
      android:id="@+id/city_state" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="4" 
      android:text="mycity, mystate" 
      tools:text="city,state" /> 

     <TextView 
      android:id="@+id/phone_number" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="3" 
      android:layout_margin="10dp" 
      android:layout_row="5" 
      android:text="(555) 555-5555" 
      tools:text="phone" /> 

     <TextView 
      android:id="@+id/email" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="1" 
      android:layout_columnSpan="3" 
      android:layout_margin="10dp" 
      android:layout_row="6" 
      android:text="someone@somewhere.com" 
      tools:text="email" /> 


     <ImageButton 
      android:id="@+id/directions_image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_row="4" 
      android:background="@null" 
      android:src="@drawable/ic_directions_enabled" /> 

     <ImageButton 
      android:id="@+id/phone_image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_row="5" 
      android:background="@null" 
      android:src="@drawable/ic_phone_enabled" /> 

     <ImageButton 
      android:id="@+id/voip_image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="2" 
      android:layout_row="5" 
      android:background="@null" 
      android:src="@drawable/ic_voip_enabled" /> 

     <ImageButton 
      android:id="@+id/email_image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_row="6" 
      android:background="@null" 
      android:src="@drawable/ic_email_enabled" /> 

    </GridLayout> 
</HorizontalScrollView> 

編集voip_imageです：私はそうのようなSpaceを使用してみました
：

<android.support.v4.widget.Space 
android:layout_width="match_parent" 
android:layout_height="0dp" 
android:layout_weight="1" 
android:layout_column="1" 
android:layout_row="5"/> 

空白のイメージを使用すると、列全体が挿入されるのに対し、約1/2の列が挿入されているようです。しかし、Spaceコンポーネント内で再生するパラメータがあるかもしれません。

Answer 1

一つの解決策は白紙画像を作成して、描画可能なフォルダにそれを置くことです助けることができます。私は、あなたは、単にこのようvoip_imageのlayout_columnプロパティを変更することができ、あなたの問題を解決すると思います。 それで、レイアウトのスペースをこう使いましょう：

<ImageButton 
    android:id="@+id/phone_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="0" 
    android:layout_row="5" 
    android:background="@null" 
    android:src="@drawable/ic_phone_enabled" /> 

<ImageButton 
    android:id="@+id/blank_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="1" 
    android:layout_row="5" 
    android:background="@null" 
    android:src="@drawable/ic_blank" /> 

<ImageButton 
    android:id="@+id/voip_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="2" 
    android:layout_row="5" 
    android:background="@null" 
    android:src="@drawable/ic_voip_enabled" /> 

Answer 2

あなたはこのように、両方のvoipImageとphoneImageImageButton秒にandroid:maxWidth性を付与しようとすることができます：

<ImageButton 
    android:id="@+id/phone_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="0" 
    android:layout_row="5" 
    android:maxWidth="96dp" 
    android:background="@null" 
    android:src="@drawable/ic_phone_enabled" /> 

<ImageButton 
    android:id="@+id/voip_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_column="2" 
    android:layout_row="5" 
    android:maxWidth="96dp" 
    android:background="@null" 
    android:src="@drawable/ic_voip_enabled" /> 

更新

上記の変更は必要ありません。

android:layout_column="1" 

希望これは