Androidでios風Dialogを表示する

iosのダイアログは格好いいですが、Androidのはいかんともしがたいところがあります。
さらにTimePickerDialogについては問題があったりといろいろありますね。

カスタムダイアログでiosぽくする

ということで完成表示はこんな感じです。

dialog like ios

Activityクラス

とりあえずボタンで表示するとしてイベントを登録します。
Dialogクラスはインスタンス生成したらshowで表示するだけのインターフェースです。

final Activity self = this;
((Button)findViewById(R.id.button))
	.setOnClickListener(new View.OnClickListener() {
		@Override
		public void onClick(View v) {
		DialogLikeIos dlg = new DialogLikeIos(self);
		dlg.show();
	}
});

Dialogクラス

public class DialogLikeIos {
    final String TAG = DialogLikeIos.class.getSimpleName();
    protected Rect displayRect;
    protected Dialog dlg;
    DialogLikeIos(Context context){
        displayRect = new Rect();
        Window window = ((Activity)context).getWindow();
        window.getDecorView().getWindowVisibleDisplayFrame(displayRect);

        dlg = new Dialog(context);
        dlg.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        dlg.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
        dlg.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        dlg.setTitle("");
        dlg.setContentView(R.layout.dialog_like_ios);

        TextView dialogTitle = (TextView)dlg.findViewById(R.id.title);
        dialogTitle.setText("dialog like ios");
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(context, R.layout.list_item_like_ios, new String[]{"item1", "item2", "item3"});
        ListView snsList = (ListView)dlg.findViewById(R.id.sns_list);
        snsList.setAdapter(adapter);
        snsList.setItemsCanFocus(true);
        snsList.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
    }
    public void show(){
        dlg.show();
    }
}

dlg.setContentView(R.layout.dialog_like_ios);
でレイアウトを指定しています。

dialogTitle.setText("dialog like ios");
タイトルを指定。

さらにListViewのアイテムのレイアウトもlist_item_like_iosを指定しています。
ArrayAdapter<String> adapter = new ArrayAdapter<String>(context, R.layout.list_item_like_ios, new String[]{"item1", "item2", "item3"});

ダイアログのレイアウト dialog_like.ios.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="20sp"
    android:background="@drawable/dialog_like_ios_shape"
    >
    <TextView
        android:textColor="#000"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:layout_margin="10sp"
        android:id="@+id/title"
        android:text=""/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0.2sp"
        android:background="#ccc"/>
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#ccc"
        android:background="@drawable/dialog_like_ios_shape"
        android:dividerHeight="0.2sp"
        android:id="@+id/sns_list">
    </ListView>
</LinearLayout>

どちらもdialog_like_ios_shape.xmlを読み込んでいます。

スタイルを指定して角を丸める

dialog_like_ios_shape.xml

rectangleを指定して少し丸めています。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#fff"/>
</shape>

listviewのアイテム用レイアウト

list_item_like_ios.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/sns"
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:paddingBottom="10sp"
          android:paddingTop="10sp"
          android:gravity="center"
          android:layout_margin="4sp"
          android:layout_gravity="center"
          android:textSize="18sp"
          android:textColor="#1987E5"
          android:singleLine="true" />

ここでは文字色を変えるなどの装飾をしています。

これでiosぽくなりました(´ω`)b