android - ボタンの間隔

Question

ボタンの余白を 0 に設定しようとしています (したがって、ボタン間の間隔はありません)。

基本的に、ボタンをそのように見せたいです（次のスタイルと色で）：

この種のタスクをどのように達成できますか? 私は自分で 9 パッチ イメージを作成したくありません (それを行う知識がないため)。

Answer 1

この特定のケースでは、XML を使用してこのタスクを簡単に実行できます。これは、2 つのステップでそれを達成する方法です。

ステップ1

drawable フォルダーに 3 つの形状を作成します。

• 最初の形状は左ボタン用です: shape_button_left.xml。この形状には、放射状の左隅とグラデーションの背景があります。

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <corners
          android:bottomLeftRadius="10dp"
          android:topLeftRadius="10dp" >
      </corners>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

• 2 番目の形状は中央のボタン用です: shape_button_center.xml。この形状は角を定義しておらず、グラデーションの背景も持っています。

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

• 3 番目の形状は右ボタン用です: shape_button_right.xml。この形状には、放射状の右隅とグラデーションの背景があります。

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <corners
          android:bottomRightRadius="10dp"
          android:topRightRadius="10dp" >
      </corners>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

ステップ2

これで、これらの形状を単純なビューで使用して、ボタンの効果を得ることができます。レイアウト XML に次のコードを追加します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <!-- Button Left -->

    <LinearLayout
        android:id="@+id/button_left"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_left"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Left -->


    <!-- Button Center -->

    <LinearLayout
        android:id="@+id/button_center"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_center"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Center"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Center -->


    <!-- Button Right -->

    <LinearLayout
        android:id="@+id/button_right"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_right"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Right -->

</LinearLayout>

以上で、コードに onClick リスナーをLinearLayouts に追加して、ボタンのように操作できるようになりました。

---

このコードをモバイルでテストすると、次の結果が得られます。

Answer 2

この種のタスクをどのように達成できますか？自分で9パッチイメージを作成したくありません（それを行う知識がないため）。

選択肢が少ないのではないかと思います。各ボタンの間に見られる固有の間隔は、フレームワークが使用する既存の9パッチの背景に直接組み込まれた余分な透明なピクセルの結果です。この動作を置き換えるには、ボタンの背景を、この固有の間隔を含まない別の値に設定する必要があります。Drawable

コードで実行できるもう1つのオプションは、各背景に使用するXMLドローアブルシェイプを作成することです。画像と同じように、コーナー半径、塗りつぶしグラデーション、およびストロークを持つ個別のシェイプを作成できます。XML Drawableの作成について詳しくは、ドキュメントをご覧ください。