如何整合Android Snackbar?


Snackbar 類似於 Android 中的 Toast,但它可以與操作互動。它會在螢幕底部顯示訊息,不會與其他檢視互動,並在超時後自動關閉。

此示例演示如何整合 Android Snackbar。

步驟 1 - 在 Android Studio 中建立一個新專案,轉到檔案 ⇒ 新建專案,並填寫所有必需的詳細資訊以建立新專案。

步驟 2 - 開啟 build.gradle 並新增設計支援庫依賴項。

apply plugin: 'com.android.application'
android {
   compileSdkVersion 28
   defaultConfig {
      applicationId "com.example.andy.myapplication"
      minSdkVersion 19
      targetSdkVersion 28
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
      release {
         minifyEnabled false
         proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
   }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support:design:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

步驟 3 - 將以下程式碼新增到 res/layout/activity_main.xml 中。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:id="@+id/layout"
   android:layout_height="match_parent">
   <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:text="Click here" />
</android.support.design.widget.CoordinatorLayout>

在以上程式碼中,我們聲明瞭佈局 ID,因為 snackback 需要父檢視。當用戶點選按鈕時,它將在底部開啟 Snackbar。

步驟 4 - 將以下程式碼新增到 src/MainActivity.java 中

import android.annotation.TargetApi;
import android.content.Intent;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
   CoordinatorLayout coordinatorLayout;
   @TargetApi(Build.VERSION_CODES.O)
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      coordinatorLayout=findViewById(R.id.layout);
      Button button=findViewById(R.id.button);
      button.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Snackbar snackbar = Snackbar
            .make(coordinatorLayout, "Welcome to tutorialspoint.com", Snackbar.LENGTH_LONG)
            .setAction("Click", new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                  String url = "https://tutorialspoint.tw";
                  Intent i = new Intent(Intent.ACTION_VIEW);
                  i.setData(Uri.parse(url));
                  startActivity(i);
               }
            });
            // 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();
         }
      });
   }
}

在以上程式碼中,當用戶點選按鈕時,它將顯示如下所示的 Snackbar -

Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Welcome to tutorialspoint.com", Snackbar.LENGTH_LONG)
.setAction("Click", new View.OnClickListener() {
   @Override
   public void onClick(View view) {
      String url = "https://tutorialspoint.tw";
      Intent i = new Intent(Intent.ACTION_VIEW);
      i.setData(Uri.parse(url));
      startActivity(i);
   }
});
// 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();

在以上程式碼中,我們聲明瞭 Snackbar,其訊息為 welcome to tutorialspoint.com,並帶有一個名為“click”的按鈕。當用戶點選“click”按鈕時,它將在預設瀏覽器中開啟 tutorialspoint 網站。

步驟 5 - 將以下程式碼新增到 manifest.xml 中

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.andy.myapplication">
   <uses-permission android:name="android.permission.INTERNET" />
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
   </application>
</manifest>

在以上程式碼中,我們聲明瞭網際網路許可權以顯示網站。

讓我們嘗試執行您的應用程式。我假設您已將您的實際 Android 移動裝置連線到您的計算機。要從 Android Studio 執行應用程式,請開啟專案的一個活動檔案,然後點選工具欄中的執行  圖示。選擇您的移動裝置作為選項,然後檢查您的移動裝置,它將顯示您的預設螢幕 -

當您點選按鈕時,它將顯示帶有“click”按鈕的 Snackbar 訊息,如上所示。

當您點選“click”按鈕時,它將在預設瀏覽器中開啟 tutorialspoint.com 網站。

點選 這裡 下載專案程式碼

更新於: 2019-07-30

435 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.