Android
スナックバー
サーチ…
構文
- Snackbar make(ビュー表示、CharSequenceテキスト、int継続時間)
- スナックバーメイク(表示ビュー、int resId、int duration)
パラメーター
パラメータ | 説明 |
---|---|
見る | ビュー:親を見つけるためのビュー。 |
テキスト | CharSequence:表示するテキスト。フォーマットされたテキストにすることができます。 |
resId | int:使用する文字列リソースのリソースID。フォーマットされたテキストにすることができます。 |
期間 | int:メッセージを表示する時間。これは、LENGTH_SHORT、LENGTH_LONGまたはLENGTH_INDEFINITEになります。 |
備考
Snackbarは操作に関する軽量なフィードバックを提供します。モバイルの画面の下部に、大きなデバイスの左下に簡単なメッセージが表示されます。スナックバーは画面上の他のすべての要素の上に表示され、一度に表示できるのは1つだけです。
タイムアウト後や画面上の他の場所でのユーザーのやりとり後、特に新しいサーフェスやアクティビティを呼び出す操作の後に自動的に消えます。 Snackbarは画面からスワイプできます。
SnackBar
を使用する前に、 build.gradle
ファイルにデザインサポートライブラリの依存関係を追加する必要があります。
dependencies {
compile 'com.android.support:design:25.3.1'
}
公式文書
https://developer.android.com/reference/android/support/design/widget/Snackbar.html
シンプルなSnackbarの作成
Snackbar
を作成するには、次のようにします。
Snackbar.make(view, "Text to display", Snackbar.LENGTH_LONG).show();
このview
は、 Snackbar
表示に使用するのに適した親を見つけるために使用されSnackbar
。通常、これはXMLで定義したCoordinatorLayout
で、スワイプなどの機能を追加したり、他のウィジェット( FloatingActionButton
)を自動的に移動したりすることができます。 CoordinatorLayout
がない場合は、ウィンドウ装飾のコンテンツビューが使用されます。
非常に頻繁に、 Snackbar
アクションを追加しSnackbar
。一般的な使用例は、「取り消し」アクションです。
Snackbar.make(view, "Text to display", Snackbar.LENGTH_LONG)
.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
// put your logic here
}
})
.show();
Snackbar
を作成して後で表示することができます:
Snackbar snackbar = Snackbar.make(view, "Text to display", Snackbar.LENGTH_LONG);
snackbar.show();
Snackbar
のテキストの色を変更したい場合:
Snackbar snackbar = Snackbar.make(view, "Text to display", Snackbar.LENGTH_LONG);
View view = snackbar .getView();
TextView textView = (TextView) view.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.parseColor("#FF4500"));
snackbar.show();
デフォルトでは、Snackbarは右のスワイプを解除します。 Snackbar
例では、スワイプが左にスワイプされたときにsnackBarを解除する方法を示しています。
カスタムスナックバー
スナックバーをカスタマイズする機能
public static Snackbar makeText(Context context, String message, int duration) {
Activity activity = (Activity) context;
View layout;
Snackbar snackbar = Snackbar
.make(activity.findViewById(android.R.id.content), message, duration);
layout = snackbar.getView();
//setting background color
layout.setBackgroundColor(context.getResources().getColor(R.color.orange));
android.widget.TextView text = (android.widget.TextView) layout.findViewById(android.support.design.R.id.snackbar_text);
//setting font color
text.setTextColor(context.getResources().getColor(R.color.white));
Typeface font = null;
//Setting font
font = Typeface.createFromAsset(context.getAssets(), "DroidSansFallbackanmol256.ttf");
text.setTypeface(font);
return snackbar;
}
フラグメントまたはアクティビティから関数を呼び出す
SnackBar.makeText(MyActivity.this, "Please Locate your address at Map", Snackbar.LENGTH_SHORT).show();
コールバック付きスナックバー
Snackbar.Callbackを使用して、スナップバーがユーザーまたはタイムアウトによって切断されたかどうかを確認できます。
Snackbar.make(getView(), "Hi snackbar!", Snackbar.LENGTH_LONG).setCallback( new Snackbar.Callback() {
@Override
public void onDismissed(Snackbar snackbar, int event) {
switch(event) {
case Snackbar.Callback.DISMISS_EVENT_ACTION:
Toast.makeText(getActivity(), "Clicked the action", Toast.LENGTH_LONG).show();
break;
case Snackbar.Callback.DISMISS_EVENT_TIMEOUT:
Toast.makeText(getActivity(), "Time out", Toast.LENGTH_LONG).show();
break;
}
}
@Override
public void onShown(Snackbar snackbar) {
Toast.makeText(getActivity(), "This is my annoying step-brother", Toast.LENGTH_LONG).show();
}
}).setAction("Go!", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}).show();
カスタムスナックバー
この例では、カスタムUndoアイコン付きの白いSnackbarを示しています。
Snackbar customBar = Snackbar.make(view , "Text to be displayed", Snackbar.LENGTH_LONG);
customBar.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
//Put the logic for undo button here
}
});
View sbView = customBar.getView();
//Changing background to White
sbView.setBackgroundColor(Color.WHITE));
TextView snackText = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
if (snackText!=null) {
//Changing text color to Black
snackText.setTextColor(Color.BLACK);
}
TextView actionText = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_action);
if (actionText!=null) {
// Setting custom Undo icon
actionText.setCompoundDrawablesRelativeWithIntrinsicBounds(R.drawable.custom_undo, 0, 0, 0);
}
customBar.show();
スナックバーとトースト:どちらを使うべきですか?
トーストは一般に、成功した(または起こらなかった)何らかのアクションに関してユーザーに情報を表示する場合に使用され、このアクションではユーザーが他のアクションをとる必要はありません。メッセージが送信されたときのように、たとえば:
Toast.makeText(this, "Message Sent!", Toast.LENGTH_SHORT).show();
スナックバーは情報の表示にも使用されます。しかし今回は、ユーザーに行動を起こす機会を与えることができます。たとえば、ユーザーが間違って画像を削除した場合、その画像を元に戻したいとします。スナックバーに「取り消し」アクションを提供することができます。このような:
Snackbar.make(getCurrentFocus(), "Picture Deleted", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View view) {
//Return his picture
}
})
.show();
結論:トーストはユーザーとのやりとりが必要ないときに使用されます。スナックバーは、ユーザーが別のアクションを取るか、前のアクションを元に戻すことができるようにするために使用されます。
カスタムスナックバー(不要なビュー)
Snackbarへのビューを渡す必要なしにSnackbarを作成すると、すべてのレイアウトはandroid.R.id.contentのandroidで作成されます。
public class CustomSnackBar {
public static final int STATE_ERROR = 0;
public static final int STATE_WARNING = 1;
public static final int STATE_SUCCESS = 2;
public static final int VIEW_PARENT = android.R.id.content;
public CustomSnackBar(View view, String message, int actionType) {
super();
Snackbar snackbar = Snackbar.make(view, message, Snackbar.LENGTH_LONG);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.parseColor("#ffffff"));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
textView.setGravity(View.TEXT_ALIGNMENT_CENTER);
textView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
switch (actionType) {
case STATE_ERROR:
snackbar.getView().setBackgroundColor(Color.parseColor("#F12B2B"));
break;
case STATE_WARNING:
snackbar.getView().setBackgroundColor(Color.parseColor("#000000"));
break;
case STATE_SUCCESS:
snackbar.getView().setBackgroundColor(Color.parseColor("#7ED321"));
break;
}
snackbar.show();
}
}
コールクラス用
新しいCustomSnackBar(findViewById(CustomSnackBar.VIEW_PARENT)、 "message"、CustomSnackBar.STATE_ERROR);