Androidで格好いいダイアログを表示する

完成形

このダイアログは一切の画像を使わずに実現可能なところが格好いい！必要なのは以下の定義。

レイアウト
色
ボタンの背景
テーマ
ダイアログクラス

ダイアログのレイアウト

構成はこんな感じ

LinearLayout
- TextView ( @+id/custom_dialog_title )
- ScrollView
  - TextView ( @+id/custom_dialog_text )
- Button ( @+id/custom_dialog_ok )

res/layout/custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="250dip" 
  android:layout_height="wrap_content" 
  android:layout_margin="50dip"
  android:orientation="vertical"
  android:gravity="center_horizontal"
  android:background="@color/custom_dialog_background">
  
  <TextView
    android:id="@+id/custom_dialog_title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingTop="10dip"
    android:paddingBottom="10dip"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center"
    android:background="@color/custom_dialog_title_background"
    android:textColor="@color/custom_dialog_title_foreground"/>
  
  <ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1">
    
    <TextView
      android:id="@+id/custom_dialog_text"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:padding="5dip"
      android:textColor="@color/custom_dialog_text_foreground"
      android:background="@color/custom_dialog_text_background"/>
    
  </ScrollView>
  
  <Button
    android:id="@+id/custom_dialog_ok"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dip"
    android:minWidth="80dip"
    android:paddingTop="10dip"
    android:paddingBottom="10dip"
    android:textColor="@color/custom_dialog_button_foreground"
    android:background="@drawable/custom_dialog_button_background"
    android:text="OK"/>
  
</LinearLayout>

色の定義

こんな感じに定義して、変更しやすくしておく

名前	ID	色
背景	custom_dialog_background	薄い茶色
タイトル部背景	custom_dialog_title_background	濃い茶色
タイトル部前景	custom_dialog_title_foreground	白
ボタン前景	custom_dialog_button_foreground	白
テキスト部背景	custom_dialog_text_background	白
テキスト部前景	custom_dialog_text_foreground	黒

res/values/colors_custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="custom_dialog_background">#e4dccc</color>
  <color name="custom_dialog_title_background">#34211d</color>
  <color name="custom_dialog_title_foreground">#ffffff</color>
  <color name="custom_dialog_button_foreground">#ffffff</color>
  <color name="custom_dialog_text_background">#ffffff</color>
  <color name="custom_dialog_text_foreground">#000000</color>
</resources>

ボタンの背景

画像を使わずに格好いい背景を定義する(概要は下記の通り)

selector
 + item ( 押下時の定義:緑色の角丸四角を定義 )
    + layer-list
       + item
          + shape ( 四角形を定義 )
             + gradient ( 縦にグラデーションで色を塗る )
             + corners ( 角丸 )
             + stroke ( 縁取り )
 
 + item ( 通常時の定義:茶色の角丸四角を定義 )
    + layer-list
       + item
          + shape ( 四角形を定義 )
             + gradient ( 縦にグラデーションで色を塗る )
             + corners ( 角丸 )
             + stroke ( 縁取り )

res/drawable/custom_dialog_button_background.xml

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

<item android:state_pressed="true">
<layer-list>

  <item>
    <shape 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
        
      <gradient
        android:angle="270"
        android:startColor="#b7ed36" 
        android:endColor="#649016"
        android:type="linear" />
      <corners 
        android:radius="5dip" />
        <stroke 
          android:width="2dip" 
          android:color="#649016"/>

    </shape>
  </item>

</layer-list>
</item>

<item android:state_checked="false" android:state_pressed="false">
<layer-list>

  <item>
    <shape 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
        
      <gradient 
        android:angle="270"
        android:startColor="#978d8b" 
        android:endColor="#382622"
        android:type="linear" />
        <corners 
          android:radius="5dip" />
        <stroke 
          android:width="2dip" 
          android:color="#34211d"/>
        
    </shape>
  </item>

</layer-list>
</item>

</selector>

テーマの定義

タイトル定義を削除したダイアログテーマを定義する

res/values/themes_custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style
    name="Theme.CustomDialog"
    parent="android:style/Theme.Dialog">
        <item
          name="android:windowNoTitle">true</item>
  </style>
</resources>

ダイアログクラスの定義

定義したテーマとレイアウトでダイアログを初期化するクラスを定義

public class CustomDialog extends Dialog
{
  /** タイトルビュー */
  private TextView iTitle;
  /** テキストビュー */
  private TextView iText;
  /** ボタンビュー */
  private Button iButton;
  
  /**
   * コンストラクタ
   * @param context
   */
  public CustomDialog(Context context, String title, String text)
  {
    super(context, R.style.Theme_CustomDialog);
    
    // レイアウトを決定
    setContentView(R.layout.custom_dialog);
    
    // タイトルビューを取得
    iTitle = (TextView)findViewById(R.id.custom_dialog_title);
    // テキストビューを取得
    iText = (TextView)findViewById(R.id.custom_dialog_text);
    // OKボタンビューを取得
    iButton = (Button)findViewById(R.id.custom_dialog_ok);
    
    // タイトルを設定
    iTitle.setText(title);
    // テキストを設定
    iText.setText(text);
    
    // ボタンビューにOnClickListenerを登録
    iButton.setOnClickListener(new View.OnClickListener()
    {
      public void onClick(View v)
      {
        dismiss();
      }
    });
  }
}

使い方

使い方は簡単

new CustomDialog(MyActivicty.this, "タイトル", "本文").show();

暇なメモ帳

2011年3月4日金曜日