web-dev-qa-db-ja.com

Android Design Support Libraryの新機能とそのスナックバーの使用方法は何ですか？

開発者向けのAndroid M Previewが昨日リリースされました。いつものように、多くの驚くべき新機能が導入されています。 Snackbarもその1つであることに気付きました。

Snackbarに関するドキュメントを読みましたが、そこからSnackbarがAndroid Design Support Libraryの絶対パスが Android.support.design.widget.Snackbar 。

そして文書はそれを言います：

スナックバーは、操作に関する簡単なフィードバックを提供します。モバイルでは画面の下部に、大きなデバイスでは左下に短いメッセージが表示されます。スナックバーは画面上の他のすべての要素の上に表示され、一度に1つしか表示できません。

それらは、タイムアウト後、または画面上の他の場所でのユーザー操作の後、特に新しいサーフェスまたはアクティビティを呼び出す操作の後、自動的に消えます。スナックバーは画面外にスワイプできます。

それで、SnackbarはToastまたはDialogのように振る舞いますか？ Snackbarsはレイアウトファイルで使用できますか？プログラムでどのように使用できますか？

P.S.:

  • Snackbarの使用に関するサンプルは大歓迎です。
  • Android Design Support Libraryは新しいサポートライブラリですが、誰かがこのライブラリの詳細を教えてもらえますか？
androidmaterial-designandroid-support-libraryandroid-design-libraryandroid-snackbar
34
SilentKnight

Snackbarに関しては、Toastのように動作しますが、Toastとは異なります。 スナックバーは画面の下部に表示され、オプションの単一アクションを含むテキストが含まれます。画面をアニメートすることで、指定された時間の後に自動的にタイムアウトします。さらに、ユーザーはタイムアウト前にそれらをスワイプすることができます。これは別の軽量フィードバックメカニズムであるトーストよりもかなり強力です。

次のようにプログラムで使用できます。

Snackbar snackbar = Snackbar
  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener);
snackbar.setActionTextColor(Color.CYAN);
View snackbarView = snackbar.getView();
snackbarView.setBackgroundColor(Color.YELLOW);//change Snackbar's background color;
TextView textView = (TextView)snackbarView .findViewById(Android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.BLUE);//change Snackbar's text color;
snackbar.show(); // Don’t forget to show!

make()のメソッドでのビューの使用に注意してください-Snackbarは、ビューの下部に固定されていることを確認しようとします。

さらに、-Android Design Support LibraryはAndroid 2.1+（API 7 +）に使用されます-ナビゲーションドロワービュー、テキストを編集するためのフローティングラベル、フローティングアクションボタン、スナックバー、タブなど.

ナビゲーションビュー

ナビゲーションドロワーは、アプリ内でのIDとナビゲーションの重要な焦点となり、ここでのデザインの一貫性は、特に初めてのユーザーにとって、アプリのナビゲートの容易さを大きく変えることができます。 NavigationViewは、ナビゲーションドロワーに必要なフレームワークを提供するだけでなく、メニューリソースを通じてナビゲーションアイテムを膨らませる機能を提供することにより、これを容易にします。

次のように使用できます。

<Android.support.v4.widget.DrawerLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true">
    <!-- your content layout -->
    <Android.support.design.widget.NavigationView
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
</Android.support.v4.widget.DrawerLayout>

引き出しメニューについては、次のとおりです。

<group Android:checkableBehavior="single">
    <item
        Android:id="@+id/navigation_item_1"
        Android:checked="true"
        Android:icon="@drawable/ic_Android"
        Android:title="@string/navigation_item_1"/>
    <item
        Android:id="@+id/navigation_item_2"
        Android:icon="@drawable/ic_Android"
        Android:title="@string/navigation_item_2"/>
</group>

または：

<item
    Android:id="@+id/navigation_subheader"
    Android:title="@string/navigation_subheader">
    <menu>
        <item
            Android:id="@+id/navigation_sub_item_1"
            Android:icon="@drawable/ic_Android"
            Android:title="@string/navigation_sub_item_1"/>
        <item
            Android:id="@+id/navigation_sub_item_2"
            Android:icon="@drawable/ic_Android"
            Android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>

SetNavigationItemSelectedListener（）を使用してOnNavigationItemSelectedListenerを設定することにより、選択したアイテムのコールバックを取得します。これにより、クリックされたMenuItemが提供され、選択イベントの処理、チェックステータスの変更、新しいコンテンツのロード、ドロワーのプログラムによるクローズ、またはその他の必要なアクションが可能になります。

テキスト編集用のフローティングラベル

謙虚なEditTextでさえ、材料設計を改善する余地があります。 EditTextのみでは、最初の文字が入力された後にヒントテキストが非表示になりますが、TextInputLayoutにラップして、ヒントテキストをフローティングにすることができます。 EditTextの上にあるlabel。ユーザーが入力内容のコンテキストを失わないようにします。ヒントを表示するだけでなく、setError()を呼び出すことで、EditTextの下にエラーメッセージを表示することもできます。

フローティングアクションボタン

フローティングアクションボタンは、インターフェースの主要なアクションを示す丸いボタンです。デザインライブラリのFloatingActionButtonは、デフォルトでテーマのcolorAccentを使用して色付けされた単一の一貫した実装を提供します。

FloatingActionButtonはImageViewを拡張するため、Android:srcまたはsetImageDrawable()などのメソッドのいずれかを使用して、FloatingActionButton内に表示されるアイコンを制御します。

タブ

トップレベルのナビゲーションパターンは、コンテンツのさまざまなグループを整理するために一般的に使用されます。デザインライブラリのTabLayoutは、ビューの幅がすべてのタブで均等に分割される固定タブと、タブが一定のサイズではなく水平にスクロールできるスクロール可能なタブの両方を実装します。

タブはプログラムで追加できます。

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

タブ間の水平ページングにViewPagerを使用する場合は、PagerAdapter’sgetPageTitle()から直接タブを作成し、setupWithViewPager()を使用して2つを接続できます。これにより、タブ選択イベントによりViewPagerが更新され、ページ変更により選択したタブが更新されます。

CoordinatorLayoutとアプリバー

designライブラリーはCoordinatorLayoutを導入します。これは、Designライブラリーの多くのコンポーネントが利用する、子ビュー間のタッチイベントをさらに制御するレベルを提供します。 AppBarLayoutを使用しようとすると、Toolbarおよびその他のビュー（TabLayoutで提供されるタブなど）がScrollingViewBehaviorでマークされた兄弟ビューのスクロールイベントに反応することができます。したがって、次のようなレイアウトを作成できます。

<Android.support.design.widget.CoordinatorLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

     <! -- Your Scrollable View -->
    <Android.support.v7.widget.RecyclerView
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">
   <Android.support.v7.widget.Toolbar
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">

        <Android.support.design.widget.TabLayout
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">
     </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>

ユーザーがRecyclerViewをスクロールすると、AppBarLayoutはこれらのイベントに応答して、子のスクロールフラグを使用して、入力（画面でスクロール）および終了（画面でスクロール）を制御できます。

デザインライブラリ、AppCompat、およびすべてのAndroidサポートライブラリは、モダンで見栄えの良いAndroidアプリを構築するために必要なビルディングブロックを提供する重要なツールですすべてをゼロから構築します。

20
SilentKnight

新しい SnackbarAndroid-Mを必要としない。

新しいデザインサポートライブラリ内にあり、今日使用できます。

SDKを更新するだけで、この依存関係をコードに追加できます。

compile 'com.Android.support:design:22.2.0'

次のようなコードを使用できます。

Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
        .setAction("Action", null)
        .show();

トーストのようなものです。

enter image description here

アクションを割り当てるには、OnClickListenerを設定する必要があります。

Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
        .setAction("Action", myOnClickListener)
        .show();

背景を変更色にしたい場合は、次のようなものを使用できます。

 Snackbar snackbar = Snackbar.make(view, "Here's a Snackbar",       
                   Snackbar.LENGTH_LONG);
 View snackBarView = snackbar.getView();
 snackBarView.setBackgroundColor(colorId);
 snackbar.show();

enter image description here

swipe-to-dismissジェスチャー、またはFAB scrollingをスナックバーの上に移動して、単に CoordinatorLayout ビュー階層内。

54
Gabriele Mariotti

Activityでは次を使用できます。

String s = "SnackBar"
Snackbar.make(findViewById(Android.R.id.content), s, Snackbar.LENGTH_LONG).show();

およびFragment：

Snackbar.make(getView(), s, Snackbar.LENGTH_LONG).show();

編集：

背景色を変更するには、次のようなものを使用します。

String s = "SnackBar"
Snackbar snack = Snackbar.make(getView(), s, Snackbar.LENGTH_LONG);
View view = snack.getView();
view.setBackgroundColor(Color.YELLOW); 
snack.show();

（テーマに関係なく）テキストの色を変更する場合：

View view = snack.getView();
TextView tv = (TextView) view.findViewById(Android.support.design.R.id.snackbar_text);
tv.setTextColor(Color.WHITE);

チャームのように動作します;-)

36
Mateusz Jablonski

コーディングを設定しました

Snackbar snackbar = Snackbar
        .make(getView(), text, Snackbar.LENGTH_INDEFINITE);

View sbView = Global.alert.getView();
sbView.setBackgroundColor(0xFF000000);

TextView textView = (TextView) sbView.findViewById(Android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.WHITE);
textView.setTextSize(30);

Global.alert.show();
0
Pong Petrung

http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html ？

サポートライブラリ全体を要約しています。

0
Anand Kumar

スナックバーはアイコンも表示できます。

例：ネットワークがない場合、このようなスナックバーを表示できます（Gmailと同じように）。

SpannableStringBuilder builder = new SpannableStringBuilder();
    builder.append(" ").setSpan(new ImageSpan(this, R.drawable.snackbar_icon), 0, 1, 0);
    builder.append(" No Network Available");
    Snackbar snackBar = Snackbar.make(findViewById(R.id.co_ordinate), builder, Snackbar.LENGTH_LONG);
    snackBar.setAction("RETRY", new View.OnClickListener() {
        @Override
        public void onClick(View v) { //Retry Code here 

        }
    });
    snackBar.show();
0
Neo

スナックバーのテキストの色と背景を変更することもできます

 Snackbar snackbar = Snackbar.make(view, "Text",
                            Snackbar.LENGTH_LONG);
                    View snackBarView = snackbar.getView();
                    TextView tv = (TextView) snackBarView.findViewById(Android.support.design.R.id.snackbar_text);
                    tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
                    snackBarView.setBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.colorPrimaryDark));
                    snackbar.show();
0
Jatin Devani