2. 程式人生 > >Android自定義view之實現帶checkbox的Snackbar

Android自定義view之實現帶checkbox的Snackbar

阿新 • • 發佈：2018-12-30

前言

最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖：

在這裡插入圖片描述

1.要解決的問題

1.彈框裡面除了文字提示之外還有一個按鈕，這個按鈕是一個checkbox，分為選擇狀態和非選擇狀態。 2.彈框底部還有一個佈局，彈框要在底部佈局之上。 3.彈框消失的時間。 4.當有虛擬鍵的時候，彈框應該在虛擬鍵之上。

2、分析與實現

當在任何一個activity中時，自定義的Snackbar應該在activity 佈局的上面顯示，如下圖所示：

在這裡插入圖片描述
綠色部分是自定義的snackbar的佈局，紅色部分是activity佈局，部分已經被snackbar遮擋。要實現上面的效果，就要獲取到當前activity的佈局，流程很簡單：
在這裡插入圖片描述
1、獲取activity的根佈局： 

Window window=(Activity) context).getWindow();//獲取當前activity的window
ViewGroup decorView= (ViewGroup) window.getDecorView();//獲取activity的跟佈局
複製程式碼

activity的view的原理可以看下面的圖：

在這裡插入圖片描述
activity的頂級佈局是DecorView,其中DecorView類由PhoneWindow所持有，Phonewindow由Activity持有，所以上面獲取DecorView時要通過Activity獲取window，再由window獲取得到。其中DecorView中包括一個TitleVIew和ContentView，ContenView中的佈局是通過在Activity中的setContentView()來設定的。        因為自定義的snackbar要放在整個activity的根佈局之上，因此就是將snackbar的view加到DecorView上，而不是ContentView上面。 2、獲取snackbar的view

        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        //parent是上面的獲取的activity的跟佈局
        View snackbarView= inflater.inflate(R.layout.layout_mobile_notify_snackbar, parent, false);
        //R.layout.layout_mobile_notify_snackbar snackbar的佈局
複製程式碼

layout_mobile_notify_snackbar.xml佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="78dp"
    android:layout_gravity="bottom"
    android:gravity="center_vertical"
    android:orientation="vertical">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="@drawable/diffussion_background"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_gravity="bottom"
        android:background="@color/white"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >

    <TextView
        android:layout_weight="1"
        android:id="@+id/notify_text"
        android:layout_width="165dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:text="行動網路下視訊自動播放"
        android:textSize="15dp" />

    <CheckBox
        android:checked="true"
        android:id="@+id/notify_checkbox"
        style="@style/SettingsMobileNotifyCheckBoxStyle"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginRight="15dp" />
    </LinearLayout>
</LinearLayout>
複製程式碼

3、將snackbar的佈局加到activity的根佈局

獲取到了snackbar的佈局後，要在snackbar顯示的時候將snackbar的佈局顯示在activity的DecorView之上，snackbar消失的時候從activity的根佈局上移除。因此可以snackbar的show方法如下：

        public void show()
        {
			 ViewGroup.LayoutParams layoutParams = snackbarView.getLayoutParams();
        	 if (layoutParams instanceof FrameLayout.LayoutParams) {
            	FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) layoutParams;
            	lp.gravity = Gravity.BOTTOM;
           	 	snackbarView.setLayoutParams(lp);
        	}
       	 	//設定snackbar的佈局引數為從decorView的底部彈出
       		decorView.addView(snackbarView);
       		//將snackbarView加到Activity的根佈局上 
       		decorView.requestLayout();    
}
          
複製程式碼

snackbar一般是顯示一段時間後自動消失的，因此還要定時從decorView上移除。消失方法dismiss如下：

    public void dismiss() {  
        decorView.removeView(snackbarView);
    }
複製程式碼

有了顯示和消失的方法後，就要考慮怎樣實現snackbar顯示後如何定時的自動消失，完善後的show方法如下：

    public void show(Activity activity) {
		ViewGroup.LayoutParams layoutParams = snackbarView.getLayoutParams();
        if (layoutParams instanceof FrameLayout.LayoutParams) {
            FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) layoutParams;
            lp.gravity = Gravity.BOTTOM;
           	snackbarView.setLayoutParams(lp);
        }
       //設定snackbar的佈局引數為從decorView的底部彈出
       	decorView.addView(snackbarView);
       	//將snackbarView加到Activity的根佈局上 
        snackbarView.bringToFront();//將snackbar的view移動到最上面，以免被其他的view遮擋
        snackbarView.requestLayout();
        dercorView.invalidate();
        //設定定時消失
        dercorView.postDelayed(mDelayedDismissAction, 5000);//snackbar消失的時間
    }
	//延時消失	
    private Runnable mDelayedDismissAction = new Runnable() {
        @Override
        public void run() {
            dismiss();//消失
        }
    };
複製程式碼

在show程式碼中通過dercorView.postDelayed(mDelayedDismissAction, 5000);丟擲一個定時消失的Runnable，這樣就可以實現snackbar顯示一定時間後自動消失。 注意：上面程式碼中的snackbarView.bringToFront();的作用是將snackbar的view放到最上面，防止被其他的view遮擋。 4、將snackbar的佈局設定在activity的某個位置上面 上面實現了snackbar的顯示和消失都是在activity的底部彈出，位置固定，既然是自己實現的snackbar當然可以將它設定顯示在任何位置，下面的方法可以將snackbar顯示在activity佈局中的view的上方。

    private void above(View snackbarView, View targetView, int contentViewTop, Activity activity) {
        if (snackbarView!= null) {
            int[] locations = new int[2];
            targetView.getLocationOnScreen(locations);
            int snackbarHeight = 52;
            //必須保證指定View的頂部可見 且 單行Snackbar可以完整的展示
            if (locations[1] >= contentViewTop + snackbarHeight) {
                ViewGroup.LayoutParams params = mContentView.getLayoutParams();
                ((ViewGroup.MarginLayoutParams) params).setMargins(0, 0, 0, snackbarView.getResources().getDisplayMetrics().heightPixels - locations[1]);
                mContentView.setLayoutParams(params);
            }
        }
    }
複製程式碼

上面通過獲取制定view的位置，然後設定snackbarView的LayoutParams 引數，從而實現snackbarView展示在指定view的上方。某些手機上有虛擬鍵，這個時候可以通過獲取虛擬鍵的高度，再設定上面的引數值就可以了，如下：

    private void above(View mContentView, View targetView, int contentViewTop, Activity activity) {
        if (mContentView != null) {
            int[] locations = new int[2];
            targetView.getLocationOnScreen(locations);
            int snackbarHeight = 52;
            //必須保證指定View的頂部可見 且 單行Snackbar可以完整的展示
            if (locations[1] >= contentViewTop + snackbarHeight) {
                ViewGroup.LayoutParams params = mContentView.getLayoutParams();
                ((ViewGroup.MarginLayoutParams) params).setMargins(0, 0, 0, mContentView.getResources().getDisplayMetrics().heightPixels - locations[1] + getNavigationBarHeight(activity));
                mContentView.setLayoutParams(params);
            }
        }
    }
複製程式碼

上面的getNavigationBarHeight(activity)獲取虛擬鍵的高度程式碼：

    private int getNavigationBarHeight(Activity activity) {
        WindowManager windowManager = activity.getWindowManager();
        Display d = windowManager.getDefaultDisplay();
        DisplayMetrics realDisplayMetrics = new DisplayMetrics();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            d.getRealMetrics(realDisplayMetrics);
        }
        int realHeight = realDisplayMetrics.heightPixels;
        DisplayMetrics displayMetrics = new DisplayMetrics();
        d.getMetrics(displayMetrics);
        int displayHeight = displayMetrics.heightPixels;
        return realHeight - displayHeight > 0 ? (realHeight - displayHeight) : 0;
    }
複製程式碼

5、給snackbar中的按鈕設定點選監聽事件

為了控制snackbar中的checkbox給snackbar中的checkbox設定點選監聽

private void addListenerOnCheckBox(Listener listener) {
        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.onCheck(((CheckBox) view).isChecked());//listener中監聽checkbox的按鈕是否點選
            }
        });
    }
interface Listener{
	void oncheck(boolean isChecked);
}
複製程式碼

在addListenerOnCheckBox中加了監聽Listener ，使用者可以監聽到checkbox的點選事件，呼叫的時候只用傳入listener就可以了。

完整程式碼

1.snackbar.java檔案

package com.xunlei.downloadprovider.homepage.choiceness;

import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.os.Build;
import android.support.v7.widget.RecyclerView;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.CheckBox;
import android.widget.FrameLayout;
import android.widget.TextView;


/**
 * Created by hanking on 2018/8/29.
 * @author hanking
 */
public class MobileNotifySnackbar {
    private View mContentView;
    private ViewGroup mParentView;
    private static RecyclerView mRcyclerView;
    private static CheckBox checkBox;
    private Runnable mDelayedDismissAction = new Runnable() {
        @Override
        public void run() {
            dismiss();
        }
    };
    private View.OnClickListener mListener;

    public MobileNotifySnackbar(ViewGroup parent, View content) {
        mParentView = parent;
        mContentView = content;
        mContentView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.onClick(mContentView);
                }
            }
        });
    }

    /**
     * @throws Resources.NotFoundException 如果停留在外掛的Activity, getCurrentTopActivity返回的是外掛中的Activity, inflater#inflate方法也就找不到佈局資源，會丟擲Resources.NotFoundException
     */
    public static MobileNotifySnackbar make(Window window, String text, Context context) {
        ViewGroup parent = (ViewGroup) window.getDecorView();
        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        final View content = inflater.inflate(R.layout.layout_mobile_notify_snackbar, parent, false);
        checkBox = content.findViewById(R.id.notify_checkbox);
        MobileNotifySnackbar snackbar = new MobileNotifySnackbar(parent, content);
        snackbar.setText(text);
        snackbar.addListenerOnCheckBox(checkBox, context);
        return snackbar;
    }

    public static MobileNotifySnackbar make(Window window, String text) throws Resources.NotFoundException {
        ViewGroup parent = (ViewGroup) window.getDecorView();
        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        final View content = inflater.inflate(R.layout.layout_mobile_notify_snackbar, parent, false);
        checkBox = content.findViewById(R.id.notify_checkbox);
        MobileNotifySnackbar snackbar = new MobileNotifySnackbar(parent, content);
        snackbar.setText(text);
        mRcyclerView = recyclerView;
        snackbar.addListenerOnCheckBox(checkBox);
        return snackbar;
    }



    public MobileNotifySnackbar addListenerOnCheckBox(CheckBox checkBox, Context context) {
        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!((CheckBox) view).isChecked()) {

                } else {
                }
            }
        });
        return this;
    }

    public void show(Activity activity) {
        mParentView.addView(mContentView);
        ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();
        if (layoutParams instanceof FrameLayout.LayoutParams) {
            FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) layoutParams;
            lp.gravity = Gravity.BOTTOM;
            mContentView.setLayoutParams(lp);
        }
        mMobileNotifyHelper.notifyLoginObservers(true);
        mMobileNotifyHelper.isShow = true;
        //R.id.layout_tab是在snackbar下面的佈局
        above(mContentView, mParentView.findViewById(R.id.layout_tab), 0, activity);
       //解決snackbar被其他佈局遮擋
        mContentView.bringToFront();
        mContentView.requestLayout();
        mParentView.invalidate();
        mParentView.removeCallbacks(mDelayedDismissAction);
        mParentView.postDelayed(mDelayedDismissAction, 4000);
    }

    public void dismiss() {
        mParentView.removeCallbacks(mDelayedDismissAction);
        mParentView.removeView(mContentView);

    }

    public MobileNotifySnackbar setText(String text) {
        TextView textView = mContentView.findViewById(R.id.notify_text);
        textView.setText(text);
        return this;
    }

    public MobileNotifySnackbar setAction(View.OnClickListener listener) {
        mListener = listener;
        return this;
    }

    public void above(View mContentView, View targetView, int contentViewTop, Activity activity) {
        if (mContentView != null) {
            int[] locations = new int[2];
            targetView.getLocationOnScreen(locations);
            int snackbarHeight = 52;
            //必須保證指定View的頂部可見 且 單行Snackbar可以完整的展示
            if (locations[1] >= contentViewTop + snackbarHeight) {
                ViewGroup.LayoutParams params = mContentView.getLayoutParams();
                ((ViewGroup.MarginLayoutParams) params).setMargins(0, 0, 0, mContentView.getResources().getDisplayMetrics().heightPixels - locations[1] + getNavigationBarHeight(activity));
                mContentView.setLayoutParams(params);
            }
        }
    }
//獲取底部虛擬鍵的高度，如果沒有就返回0
    public int getNavigationBarHeight(Activity activity) {
        WindowManager windowManager = activity.getWindowManager();
        Display d = windowManager.getDefaultDisplay();
        DisplayMetrics realDisplayMetrics = new DisplayMetrics();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            d.getRealMetrics(realDisplayMetrics);
        }
        int realHeight = realDisplayMetrics.heightPixels;
        DisplayMetrics displayMetrics = new DisplayMetrics();
        d.getMetrics(displayMetrics);
        int displayHeight = displayMetrics.heightPixels;
        return realHeight - displayHeight > 0 ? (realHeight - displayHeight) : 0;
    }
}

複製程式碼

2.使用方法

MobileNotifySnackbar snackbar = MobileNotifySnackbar.make(getActivity().getWindow(), "行動網路下視訊自動播放");
snackbar.Show(getActivity());
                 
複製程式碼

相關推薦

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View的實現方法，帶你一步步深入瞭解View(四)

不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些

Android自定義View的實現方法 帶你一步步深入瞭解View 四

                不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些原

我的Android進階之旅------>Android自定義View來實現解析lrc歌詞並同步滾動、上下拖動、縮放歌詞的功能

前言 最近有個專案有關於播放音樂時候，關於歌詞有以下幾個功能： 1、實現歌詞同步滾動的功能，即歌曲播放到哪句歌詞，就高亮地顯示出正在播放的這個歌詞； 2、實現上下拖動歌詞時候，可以拖動播放器的進度。即可以不停地上下拖動歌詞，

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖： 我們這裡的側

Android自定義View之導航欄(Fragment實現)

安卓輕量級底部導航欄 目前安卓開發中常常會用到底部導航欄這個控制元件，但是自己從零開始做一個又太麻煩。因此，我封裝了一個底部導航欄，同時，也做了一些修改，用於頂部也十分合適。下面是示例圖： 使用方法： 1.新增依賴 首先，在build.gradle檔案下加入 maven

Android自定義View之ListView實現時間軸效果：我只是個送快遞的。

先上效果圖： 實現時間軸的原理 listview的基本使用，相信大家都很熟悉。先在layout下新建一個xml佈局檔案，對應一個子項的listView的顯示內容。在上面的圖我們可以看到，每一項都是 有3個 textview控制元件

Android自定義 view之圖片裁剪從設計到實現

android圖片剪下是常用的功能，因為部落格開發的是SDK不涉及到activity，所以就需要自定義裁剪功能，參閱了網上的大部分資料後，在github上一個封裝好的裁剪庫cropper，正好符合要求，本著拿來主義的思想，直接把原始碼clone嵌入到專案裡，然後

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

Android 自定義View,繪製一個帶比例的環形進度條

最近專案有一個需求，要在首頁顯示三個環形餅狀圖，要求可以顯示比例大小，中間顯示文字部分，並且需要可以自定義顏色。設計圖如下： 思路： 繪製一個帶百分比的圓環，一共分了四個部分： 1.背景圓（就是底圖圓） 2.預設圓環 3.繪製的圓環（就是比例圓環） 4.中心文字 下面我們開始進行繪製，先準

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有