読者です 読者をやめる 読者になる 読者になる

さまよえる、Android

Androidのプログラミングで便利なことや残しておきたいことを残しておく。もしオススメのライブラリがあったら教えてくださいね。

Androidのダイアログライブラリ、material-dialogsを触ってみた。

フラグメント

フラグメントの登場でダイアログの実装が面倒くさい。もうライブラリでよいね。

github.com

android {
    ~ 省略 ~
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    repositories {
        maven { url "https://jitpack.io" }
    }
}


dependencies {
  ~ 省略 ~
    compile('com.github.afollestad.material-dialogs:commons:0.8.5.0@aar') {
        transitive = true
    }
}

ベーシック

f:id:araiyusukej:20151101105840p:plain

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        new MaterialDialog.Builder(this)
                .title("タイトル")
                .content("内容")
                .positiveText("はい")
                .negativeText("いいえ")
                .show();

    }

アイコンをつける

f:id:araiyusukej:20151101110006p:plain

 new MaterialDialog.Builder(this)
                .title("タイトル")
                .content("内容")
                .positiveText("はい")
                .iconRes(R.mipmap.ic_launcher)
                .limitIconToDefaultSize() // limits the displayed icon size to 48dp
                .show();

クリックイベント

 new AlertDialogWrapper.Builder(this)
                .setTitle("タイトル")
                .setMessage("内容")
                .setNegativeButton("はい", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(getApplication(), "クリックイベント", Toast.LENGTH_LONG).show();
                        dialog.dismiss();

                    }
                }).show();

はい、いいえの選択肢がが長文になると、縦並びで表示される

f:id:araiyusukej:20151101110226p:plain

  new MaterialDialog.Builder(this)
                .title("タイトル")
                .content("内容")
                .positiveText("はい、わかったけどね。ちょっと長いけど対応してるから大丈夫")
                .negativeText("いいえ、ちょっと長いけど対応してるから大丈夫")
                .show();

3択

f:id:araiyusukej:20151101110348p:plain

 new MaterialDialog.Builder(this)
                .title("タイトル")
                .content("内容")
                .positiveText("はい")
                .negativeText("いいえ")
                .neutralText("真ん中")
                .show();

リスト形式

f:id:araiyusukej:20151101110457p:plain

  String[] list = {"Apple", "Lemon", "Orange", "Strawberry"};

        new MaterialDialog.Builder(this)
                .title("タイトル")
                .items(list)
                .itemsCallback(new MaterialDialog.ListCallback() {
                    @Override
                    public void onSelection(MaterialDialog dialog, View view, int which, CharSequence text) {
                        Toast.makeText(getApplication(), text, Toast.LENGTH_SHORT).show();
                    }
                })
                .show();

複数選択できるリスト

f:id:araiyusukej:20151101110601p:plain

 String[] list = {"Apple", "Lemon", "Orange", "Strawberry"};

        new MaterialDialog.Builder(this)
                .title("タイトル")
                .items(list)
                .itemsCallbackMultiChoice(null, new MaterialDialog.ListCallbackMultiChoice() {
                    @Override
                    public boolean onSelection(MaterialDialog dialog, Integer[] which, CharSequence[] text) {

                        Toast.makeText(MainActivity.this, String.valueOf(which.length) + "個も選択したの?" , Toast.LENGTH_SHORT).show();
                        for (int i = 0; i < which.length; i++) {
                            Toast.makeText(MainActivity.this, text[i], Toast.LENGTH_SHORT).show();
                        }
                        return true;
                    }
                })
                .positiveText("確定")
                .show();

指定回数を越えてチェックしたら、アラートを表示する

 String[] list = {"Apple", "Lemon", "Orange", "Strawberry"};
        //標準でアップルを選択
        int apple  = 0;
        new MaterialDialog.Builder(this)
                .title("2つまで選んでね")
                .items(list)
                .itemsCallbackMultiChoice(new Integer[]{apple}, new MaterialDialog.ListCallbackMultiChoice() {
                    @Override
                    public boolean onSelection(MaterialDialog dialog, Integer[] which, CharSequence[] text) {
                        boolean allowSelection = which.length <= 2; // limit selection to 2, the new selection is included in the which array
                        if (!allowSelection) {
                            Toast.makeText(MainActivity.this, "だめじゃん", Toast.LENGTH_SHORT).show();
                        }
                        return allowSelection;
                    }
                })
                .positiveText("キャンセル")
                .alwaysCallMultiChoiceCallback() // the callback will always be called, to check if selection is still allowed
                .show();

リストメニューに画像を追加するカスタマイズ

f:id:araiyusukej:20151101112546p:plain

   final MaterialSimpleListAdapter adapter = new MaterialSimpleListAdapter(this);
        adapter.add(new MaterialSimpleListItem.Builder(this)
                .content("username@gmail.com")
                .icon(R.mipmap.ic_launcher)
                .backgroundColor(Color.WHITE)
                .build());
        adapter.add(new MaterialSimpleListItem.Builder(this)
                .content("user02@gmail.com")
                .icon(R.mipmap.ic_launcher)
                .backgroundColor(Color.WHITE)
                .build());
        adapter.add(new MaterialSimpleListItem.Builder(this)
                .content("アカウント追加")
                .icon(R.mipmap.ic_launcher)
                .iconPaddingDp(8)
                .build());

        new MaterialDialog.Builder(this)
                .title("バックアップ")
                .adapter(adapter, new MaterialDialog.ListCallback() {
                    @Override
                    public void onSelection(MaterialDialog dialog, View itemView, int which, CharSequence text) {
                        MaterialSimpleListItem item = adapter.getItem(which);
                        Toast.makeText(MainActivity.this, item.toString(), Toast.LENGTH_SHORT).show();
                    }
                })
                .show();

パスワードの入力を表示

f:id:araiyusukej:20151101112654p:plain

  new MaterialDialog.Builder(this)
                .title("パスワードを入力")
                .content("内容")
                .inputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD)
                .input("ヒント", "", new MaterialDialog.InputCallback() {
                    @Override
                    public void onInput(MaterialDialog dialog, CharSequence input) {
                        // Do something
                        Toast.makeText(MainActivity.this, input, Toast.LENGTH_SHORT).show();
                    }
                }).show();

入力文字数の制限つき

 new MaterialDialog.Builder(this)
                .title("タイトル")
                .inputRangeRes(2, 20, R.color.md_divider_black)
                .input(null, null, new MaterialDialog.InputCallback() {
                    @Override
                    public void onInput(MaterialDialog dialog, CharSequence input) {
                        Toast.makeText(MainActivity.this, input, Toast.LENGTH_SHORT).show();
                    }
                }).show();

テーマを変える

f:id:araiyusukej:20151101112746p:plain

 new MaterialDialog.Builder(this)
                .content("Hi")
                .title("タイトル")
                .positiveText("はい")
                .negativeText("いいえ")
                .theme(Theme.DARK)
                .show();

カスタムビュー

f:id:araiyusukej:20151101112912p:plain

 EditText passwordInput;
    CheckBox checkbox;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        MaterialDialog dialog = new MaterialDialog.Builder(this)
                .title("タイトル")
                .customView(R.layout.dialog_customview, true)
                .positiveText("はい")
                .negativeText("いいえ")
                .onPositive(new MaterialDialog.SingleButtonCallback() {
                    @Override
                    public void onClick(@NonNull MaterialDialog dialog, @NonNull DialogAction which) {
                        Toast.makeText(MainActivity.this, passwordInput.getText() + ":" + checkbox.isChecked(), Toast.LENGTH_SHORT).show();

                    }
                }).build();
        dialog.show();
        passwordInput = (EditText) dialog.getCustomView().findViewById(R.id.password);
        passwordInput.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
        checkbox = (CheckBox) dialog.getCustomView().findViewById(R.id.showPassword);
        checkbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                Toast.makeText(MainActivity.this, String.valueOf(isChecked), Toast.LENGTH_SHORT).show();
            }
        });

    }

dialog_customview.xml

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ぼけ"
        android:textColor="#80000000"
        android:textSize="16dp" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:inputType="textPassword"
        android:textColor="#000000"
        android:textSize="16dp" />

    <CheckBox
        android:id="@+id/showPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:text="パスワード"
        android:textColor="#000000"
        android:textSize="16dp" />



</LinearLayout>