Material Design学习之 Snackbars(详细分析,Toast的加强版)
轉載請注明出處:王亟亟的大牛之路
昨天把Material Design Button部分的內容分析完了,不知道大家理解了他的實現沒有。如果沒看的話,可以看下,傳送門:http://blog.csdn.net/ddwhan0123/article/details/50555958
這幾篇關于Material Design文章的代碼幾乎都是Git上摘錄的,我做的事主要是分享給大家+解釋分析。
昨天有小伙伴看完后希望我像以前一樣把按鈕那一部分的代碼單獨提取出來單獨打成一個包,想單獨使用或者學習而不是去扣源碼看(懶人打屁股),那既然有需求我也就做了,今天的事例代碼我單獨做了一個包了,大家可以直接去下載,地址:https://github.com/ddwhan0123/BlogSample/blob/master/MaterialDesignToast.zip 直接下載然后解壓就行了,可以run,我2臺機器都試過了,并未出現問題(記得點個贊,支持下勞動成果,謝謝)
廢話結束,開始我們具體內容,還是分為2部分,P1為概念講解,P2為實例分析。
Snackbars
Snackbar 是一種針對操作的輕量級反饋機制,常以一個小的彈出框的形式,出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方,包括浮動操作按鈕。
它們會在超時或者用戶在屏幕其他地方觸摸之后自動消失。Snackbar
可以在屏幕上滑動關閉。當它們出現時,不會阻礙用戶在屏幕上的輸入,并且也不支持輸入。屏幕上同時最多只能現實一個 Snackbar。
Android 也提供了一種主要用于提示系統消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似,但是 Toast
并不包含操作也不能從屏幕上滑動關閉。
我們來上下效果圖,看看是怎么樣的:
從屏幕底部彈出的一個試圖,一種是有交互的,一種是沒有交互的。跟我們的Toast一樣會自動消失,他消失的方式跟入場時的效果相反。
看完效果我們來讀一些理論知識。
通常 Snackbar 的高度應該僅僅用于容納所有的文本,而文本應該與執行的操作相關。Snackbar
中不能包含圖標,操作只能以文本的形式存在。
樣式盡量的精簡不要附帶復雜的布局內容
盡量不要附帶過多的操作(樣例里為一個點擊事件),注意Snackbar不要打斷任何UI界面其他元素正操進行的行為,就是如果有個dialog在跑,不要用Snackbar把他dimiss掉。
也不要遮蔽我們的懸浮按鈕,盡量 讓懸浮按鈕置于Snackbar的上方。
原文地址:http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs
理論講完了,我們來看一下代碼是如何實現的。
先貼下目錄結構
正好Snackbar的布局里需要我們昨天用到的按鈕,我就整合進來了,然后就是一些素材文件,大家根據自己的需求操作吧,Button部分的實現,這篇不解釋了,大家往前翻吧。
public class SnackBar extends Dialog24行,我們的SnackBar是一個Dialog的實現,而不是昨天的Rel的實現了(重要的是,要一看到繼承Dialog就意識到,他有show() dismiss() 之類的功能)
String text;float textSize = 14;//Roboto Regular 14spString buttonText;View.OnClickListener onClickListener;Activity activity;View view;ButtonFlat button;int backgroundSnackBar = Color.parseColor("#333333");int backgroundButton = Color.parseColor("#1E88E5");OnHideListener onHideListener;// Timerprivate boolean mIndeterminate = false;private int mTimer = 3 * 1000;26-39行,一系列的初始化,定義了顏色啊,聲明了一些參數的變量,設置了默認的持續時間
// With action buttonpublic SnackBar(Activity activity, String text, String buttonText, View.OnClickListener onClickListener) {super(activity, android.R.style.Theme_Translucent);this.activity = activity;this.text = text;this.buttonText = buttonText;this.onClickListener = onClickListener;}// Only textpublic SnackBar(Activity activity, String text) {super(activity, android.R.style.Theme_Translucent);this.activity = activity;this.text = text;}41-55行,2種不同的構造函數,一種是帶按鈕,帶監聽的。還有種事更純粹的文本內容提示。
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.snackbar);setCanceledOnTouchOutside(false);((TextView) findViewById(R.id.text)).setText(text);((TextView) findViewById(R.id.text)).setTextSize(textSize); //set textSizebutton = (ButtonFlat) findViewById(R.id.buttonflat);if (text == null || onClickListener == null) {button.setVisibility(View.GONE);} else {button.setText(buttonText);button.setBackgroundColor(backgroundButton);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {dismiss();onClickListener.onClick(v);}});}view = findViewById(R.id.snackbar);view.setBackgroundColor(backgroundSnackBar);}58-83行,對一系列所需的控件進行初始化操作,設置了背景顏色,設置了監聽,設置了標題文字內容等。
@Overridepublic boolean onTouchEvent(MotionEvent event) {return activity.dispatchTouchEvent(event);}@Overridepublic void onBackPressed() {}85-92,進行了事件分發的操作,如果不太清楚可以看 http://blog.csdn.net/xyz_lmn/article/details/12517911
@Overridepublic void show() {super.show();view.setVisibility(View.VISIBLE);view.startAnimation(AnimationUtils.loadAnimation(activity, R.anim.snackbar_show_animation));if (!mIndeterminate) {dismissTimer.start();}}94-102行,呈現我們視圖,并且是執行了慢慢上升的動畫,動畫結束后開始計時
Thread dismissTimer = new Thread(new Runnable() {@Overridepublic void run() {try {Thread.sleep(mTimer);} catch (InterruptedException e) {e.printStackTrace();}handler.sendMessage(new Message());}});Handler handler = new Handler(new Handler.Callback() {@Overridepublic boolean handleMessage(Message msg) {if (onHideListener != null) {onHideListener.onHide();}dismiss();return false;}});105-127行,線程睡到相應事件,然后關閉我們的SnackBar
@Overridepublic void dismiss() {Animation anim = AnimationUtils.loadAnimation(activity, R.anim.snackbar_hide_animation);anim.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {SnackBar.super.dismiss();}});view.startAnimation(anim);}133-152行,具體消失的方法,動畫結束后 dismiss控件
@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// TODO 自動生成的方法存根if (keyCode == KeyEvent.KEYCODE_BACK) {dismiss();}return super.onKeyDown(keyCode, event);}154-161行,返回鍵的操作。
再接下來就是一系列的set方法了,這里不做解釋,下面貼個MainActivity的操作,大家就理解了。
public class MainActivity extends AppCompatActivity {ButtonFlat button,button1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);button = (ButtonFlat) findViewById(R.id.button);button1=(ButtonFlat)findViewById(R.id.button1);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {SnackBar snackbar = new SnackBar(MainActivity.this, "這是一段很長的文字", "按鈕的文字內容",new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "按鈕被點擊后吐出的內容", Toast.LENGTH_SHORT).show();}});snackbar.setDismissTimer(9000);snackbar.show();}});button1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {SnackBar snackBar=new SnackBar(MainActivity.this,"只有文字");snackBar.setBackgroundSnackBar(getResources().getColor(R.color.BrulyWood));snackBar.setMessageTextSize(20);snackBar.show();}});}}如何調用,如何設置看這里就理解了,很簡單易懂。
建議修改下默認的持續時間,感覺有點短。
相比昨天的Button這部分還算簡單,大家一定也可以做出類似的效果。
以下廣告為廣告可不看:
博主微博:http://weibo.com/u/5298245888
微信:
一般我QQ回復會比較慢,微信可以隨時找我。
總結
以上是生活随笔為你收集整理的Material Design学习之 Snackbars(详细分析,Toast的加强版)的全部內容,希望文章能夠幫你解決所遇到的問題。