2016年1月15日 星期五

[Android] Snackbar

Snackbars are just like Toast messages except they provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped off in order to dismiss them.

開了一個新的專案,target sdk 設為23.,然候在build.gradle(Module: app)應該會有以下的內容,醬就可以了。

dependencies {

 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:23.1.1'
 compile 'com.android.support:design:23.1.1'
}



接下來在你的layout中加入以下3個Button

<Button
    android:id="@+id/btnSimpleSnackbar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:text="Simple Snackbar" />

<Button
    android:id="@+id/btnActionCallback"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="With Action Callback" />

<Button
    android:id="@+id/btnCustomSnackbar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="Custom Color" />

記得幫CoordinatorLayout 加入android:id="@+id/coordinatorLayout"


最後是程式碼加入以下內容


private CoordinatorLayout coordinatorLayout;
private Button btnSimpleSnackbar;
private Button btnActionCallback;
private Button btnCustomView;

btnSimpleSnackbar = (Button) findViewById(R.id.btnSimpleSnackbar);
btnActionCallback = (Button) findViewById(R.id.btnActionCallback);
btnCustomView = (Button) findViewById(R.id.btnCustomSnackbar);


btnSimpleSnackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout, 
"Welcome to AndroidHive", Snackbar.LENGTH_LONG);
 
                snackbar.show();
            }
        });




btnActionCallback.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout,
                                "Message is deleted",
                                Snackbar.LENGTH_LONG)
                        .setAction("UNDO", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Snackbar snackbar1 = Snackbar.
                                        make(coordinatorLayout,
                                        "Message is restored!",
                                                Snackbar.LENGTH_SHORT);
                                snackbar1.show();
                            }
                        });

                snackbar.show();
            }
        });



btnCustomView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout,
                                "No internet connection!",
                                Snackbar.LENGTH_LONG)
                        .setAction("RETRY", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                            }
                        });

                // Changing message text color
                snackbar.setActionTextColor(Color.RED);

                // Changing action button text color
                View sbView = snackbar.getView();
                TextView textView = (TextView) sbView.
                        findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);

                snackbar.show();
            }
        });

最後注意一個新的東西LENGTH_INDEFINITE 

When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off.

當設定LENGTH_INDEFINITE 時,snackbar會一直停在那裡,直到你下dismiss或是用swipe (左往右滑之類的動作,才會被關閉)


而Snackbar 確定是可以向下相容的,目前實測在老機子S2(4.1.2)上運行是OK的。

因為有了它---》 com.android.support:appcompat-v7 

可以向下支援到API  Level 7 Android 2.1

參考來源:

http://www.androidhive.info/2015/09/android-material-design-snackbar-example/

Android 兼容包詳解

http://stormzhang.com/android/2015/03/29/android-support-library/

沒有留言:

張貼留言