2. 程式人生 > >Android 懸浮在Activity內的可拖動View

Android 懸浮在Activity內的可拖動View

阿新 • • 發佈：2019-01-31

開發中經常會遇到要做一個可以懸浮在頁面內的View，以便展示活動或者提醒什麼的，跳出頁面懸浮的View就消失。一種方法是利用純程式碼後臺生成的方式，利用WindowManager和Imageview實現圖片的懸浮。但是這種方法需要SYSTEM_ALERT_WINDOW許可權，國內很多深度定製的系統，像MIUI，EMUI，Flyme等會把這個許可權關閉。因此這些系統下面就顯示不出來了，需要一直提醒使用者去開啟這個許可權，使用者體驗很不好。另一種比較簡單的方法就是直接在佈局裡面把View放置在固定的位置，這種方法有個弊端，就是不能拖動，會擋住下面的內容。

最近忙裡偷閒參考幾個技術大神寫的分散的功能，自己融合了一個可以自由拖動的懸浮窗效果，可以載入圖片，吸附到螢幕邊緣。這個只能在Activity內使用

，App內和桌面懸浮還是建議使用系統的懸浮窗。話不多說，下面上程式碼。

首先在onMeasure中獲取可拖動區域的寬和高

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(widthSize, 
 
heightSize);
width = widthSize;
heigh = heightSize;
rect = new Rect(width-WIDTH, heigh/2-WIDTH/2, width, heigh/2+WIDTH/2);//繪製矩形的區域，靠拖動區域右邊居中顯示
}
然後重寫onDraw方法繪製出來一個色塊，這時候是不能拖動 
protected void onDraw(Canvas canvas) {
    if (mBitmap != null){
        Rect rectF = new Rect();
rectF.set(0,0,mBitmap.getWidth(),
 
mBitmap.getHeight());
canvas.drawBitmap(mBitmap, rectF, rect, paint);
}else {
        paint.setColor(Color.RED);//填充紅色
canvas.drawRect(rect, paint);//畫矩形
}
}
要想拖動就只能處理觸控事件了 
public boolean onTouchEvent(MotionEvent event) {
    int x = (int) event.getX();
    int y = (int) event.getY();
    switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if(!rect.contains(x, y)) {
                return false;//沒有在矩形上點選，不處理觸控訊息
}
            mStartX = x;
mStartY = y;
deltaX = x - rect.left;
deltaY = y - rect.top;
            break;
        case MotionEvent.ACTION_MOVE:
            Rect old = new Rect(rect);
//更新矩形的位置
rect.left = x - deltaX;
            if (rect.left < 0){
                rect.left = 0;
}
            rect.top = y - deltaY;
            if (rect.top < 0){
                rect.top = 0;
}
            rect.right = rect.left + WIDTH;
            if (rect.right > width){
                rect.right = width;
rect.left = width - WIDTH;
}
            rect.bottom = rect.top + WIDTH;
            if (rect.bottom > heigh){
                rect.bottom = heigh;
rect.top = heigh - WIDTH;
}
            old.union(rect);//要重新整理的區域，求新矩形區域與舊矩形區域的並集
invalidate(old);//出於效率考慮，設定髒區域，只進行區域性重新整理，不是重新整理整個view
break;
        case MotionEvent.ACTION_UP:
            Rect oldl = new Rect(rect);
//更新矩形的位置，吸附左右邊界處理
if (rect.left + WIDTH / 2 < width / 2){
                rect.left = 0;
}else {
                rect.left = width - WIDTH;
}
            rect.top = y - deltaY;
            if (rect.top < 0){
                rect.top = 0;
}
            rect.right = rect.left + WIDTH;
rect.bottom = rect.top + WIDTH;
            if (rect.bottom > heigh){
                rect.bottom = heigh;
rect.top = heigh - WIDTH;
}
            oldl.union(rect);
invalidate(oldl);
            if (Math.abs(mStartX - x) < 10
&& Math.abs(y - mStartY) < 10) {//捕捉點選事件
if (mClickListener != null) {
                    mClickListener.onClick(this);
}
            }
            break;
}
    return true;//處理了觸控訊息，訊息不再傳遞
}
註釋中都寫了，我就不再講解了，到這裡色塊就可以拖動了，我把它做了吸附在邊界的處理，如果不需要可以把程式碼註釋掉

後面就是載入圖片的處理了，就不貼具體程式碼了，直接上完整程式碼

/**
 * Created by ton on 17/5/18.
 * 懸浮可拖拽View
 */
public class DragView extends View {

    private int WIDTH = 160;//拖動色塊的大小    private int heigh, width;
    private Rect rect = new Rect(0, 0, WIDTH, WIDTH);//繪製矩形的區域
private int deltaX,deltaY;//點選位置和圖形邊界的偏移量
private static Paint paint = new Paint();//畫筆
private Bitmap mBitmap = null;
    private String imgUrl;
    private OnClickListener mClickListener;
    private int mStartX,mStartY;
    public DragView(Context context, AttributeSet attrs) {
        super(context, attrs);
WIDTH = 150;
paint = new Paint();
}

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(widthSize, heightSize);
width = widthSize;
heigh = heightSize;
rect = new Rect(width-WIDTH, heigh/2-WIDTH/2, width, heigh/2+WIDTH/2);//繪製矩形的區域
}

    /**
     * Implement this to do your drawing.
     *
     * @param canvas the canvas on which the background will be drawn
     */
@Override
protected void onDraw(Canvas canvas) {
        if (mBitmap != null){
            Rect rectF = new Rect();
rectF.set(0,0,mBitmap.getWidth(),mBitmap.getHeight());
canvas.drawBitmap(mBitmap, rectF, rect, paint);
}else {
            paint.setColor(Color.RED);//填充紅色
canvas.drawRect(rect, paint);//畫矩形
}
    }

    @Override
public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch(event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(!rect.contains(x, y)) {
                    return false;//沒有在矩形上點選，不處理觸控訊息
}
                mStartX = x;
mStartY = y;
deltaX = x - rect.left;
deltaY = y - rect.top;
                break;
            case MotionEvent.ACTION_MOVE:
                Rect old = new Rect(rect);
//更新矩形的位置
rect.left = x - deltaX;
                if (rect.left < 0){
                    rect.left = 0;
}
                rect.top = y - deltaY;
                if (rect.top < 0){
                    rect.top = 0;
}
                rect.right = rect.left + WIDTH;
                if (rect.right > width){
                    rect.right = width;
rect.left = width - WIDTH;
}
                rect.bottom = rect.top + WIDTH;
                if (rect.bottom > heigh){
                    rect.bottom = heigh;
rect.top = heigh - WIDTH;
}
                old.union(rect);//要重新整理的區域，求新矩形區域與舊矩形區域的並集
invalidate(old);//出於效率考慮，設定髒區域，只進行區域性重新整理，不是重新整理整個view
break;
            case MotionEvent.ACTION_UP:
                Rect oldl = new Rect(rect);
//更新矩形的位置
if (rect.left + WIDTH / 2 < width / 2){
                    rect.left = 0;
}else {
                    rect.left = width - WIDTH;
}
                rect.top = y - deltaY;
                if (rect.top < 0){
                    rect.top = 0;
}
                rect.right = rect.left + WIDTH;
rect.bottom = rect.top + WIDTH;
                if (rect.bottom > heigh){
                    rect.bottom = heigh;
rect.top = heigh - WIDTH;
}
                oldl.union(rect);
invalidate(oldl);
                if (Math.abs(mStartX - x) < 10
&& Math.abs(y - mStartY) < 10) {//捕捉點選事件
if (mClickListener != null) {
                        mClickListener.onClick(this);
}
                }
                break;
}
        return true;//處理了觸控訊息，訊息不再傳遞
}

    @Override
public void setOnClickListener(OnClickListener l) {
        this.mClickListener = l;
}

    /***
     * 載入資源圖片
     * @param resId
*/
public void setImageResource(int resId){
        InputStream is = getContext().getResources().openRawResource(resId);
Bitmap bmp = BitmapFactory.decodeStream(is);
//圖片重新裁剪，原圖從中心點按顯示大小裁剪
int bw = bmp.getWidth(), bh = bmp.getHeight();
        int w = WIDTH, h = WIDTH;
        if (bw / w >= bh / h) {
            mBitmap = Bitmap.createBitmap(bmp,(bw-bh)/2,0,w*bh/h,bh);
}
        else {
            mBitmap = Bitmap.createBitmap(bmp,0,(bh-bw)/2,bw,h*bw/w);
}
        invalidate();
}

    /****
     * 使用網路圖片
     * @param imageUrl
*/
public void setImageUrl(String imageUrl){
        if (imageUrl.startsWith("http://")||imageUrl.startsWith("https://")){
            imgUrl = imageUrl;
}else {
            Log.d("DragViewDemo","image url error !");
            return;
}
        if (mBitmap == null && imgUrl.length() > 0){
            ImageLoader.getInstance().loadImage(imgUrl, new ImageLoadingListener() {
                @Override
public void onLoadingStarted(String s, View view) {

                }

                @Override
public void onLoadingFailed(String s, View view, FailReason failReason) {

                }

                @Override
public void onLoadingComplete(String s, View view, Bitmap bitmap) {

                    int bw = bitmap.getWidth(), bh = bitmap.getHeight();
                    int w = WIDTH, h = WIDTH;
                    if (bw / w >= bh / h) {
                        mBitmap = Bitmap.createBitmap(bitmap,(bw-bh)/2,0,w*bh/h,bh);
}
                    else {
                        mBitmap = Bitmap.createBitmap(bitmap,0,(bh-bw)/2,bw,h*bw/w);
}
                    invalidate();
}

                @Override
public void onLoadingCancelled(String s, View view) {

                }
            });
}
    }
}
專案已上傳到GitHub，有需要的自己去下載Git地址。怕磚，各位輕點，多多指教～

參考資料：https://www.oschina.net/code/snippet_54100_6262

http://blog.csdn.net/tianjian4592/article/details/45031663

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(widthSize, heightSize);
width = widthSize;
heigh = heightSize;
rect = new Rect(width-WIDTH, heigh/2-WIDTH/2, width, heigh/2+WIDTH/2);//繪製矩形的區域
}

相關推薦

Android 懸浮在Activity內的可拖動View

開發中經常會遇到要做一個可以懸浮在頁面內的View，以便展示活動或者提醒什麼的，跳出頁面懸浮的View就消失。一種方法是利用純程式碼後臺生成的方式，利用WindowManager和Imageview實現圖片的懸浮。但是這種方法需要SYSTEM_ALERT_WINDOW許可權

Android可拖動懸浮按鈕

最近專案需要使用可拖拽的懸浮按鈕，所以實現了一個小demo 因為是模擬器的緣故，拖動的時候看起來有點卡頓，如果在真機上執行時非常完美的 技術要突破的難點有下面幾個： 1 如何懸浮？ 使用相對佈局或者幀佈局，按鈕放在最外層即可 2 如何拖動？ 對按鈕進行移動監聽

Android 可拖動的懸浮按鈕

這是控制元件的主程式碼，在你的專案裡面，新建一個同名的類，把程式碼直接複製進去就能用了。另外，這個類裡面引用了工具類的一些程式碼。工具類在這個主類的原始碼下面也有貼出，直接把工具類的相關程式碼，複製到你自己的工具類裡就行了，有問題可以加我QQ諮詢：326257241。 /** * @C

android筆記之可拖動的不要許可權的懸浮框

<span style="font-size:24px;color:#ff6666;">呼叫的話直接呼叫begin方法就可以了，自己的筆記沒有太多解釋，程式碼很簡單的</span>package com.tianxia.administrator.c

Android新增可拖動、點選的懸浮視窗

原文地址：http://mobile.9sssd.com/android/art/1288，貌似這個地址也不是原創不過我是看的這個。。就這個吧。。。這個例子蠻不錯，簡單易懂，註釋也很全，只是執行之後發現有個小bug，往左上角拖動的時候會執行點選事件，造成的原因也很簡單，就是

Android實現可拖動的懸浮按鈕控制元件

有時候，我們需要一個可移動的選單，Android本身並沒有這樣的控制元件，小弟不才，最近研究了下，並參考了網上的一些資料，自己動手封裝了個，因為是第一個版本，可能會有一些bug，歡迎留言指導。我們先簡單來說一下原理： 隨著我們的手勢移動，控制元件就隨著

Android 可拖動可點選懸浮窗

Android 懸浮窗在5.0以上，特別是小米手機，魅族手機，就算給到了<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"> 2 </uses-permission&

Android 在所有應用的上層彈出可拖動的View

                 最近facebook Messenger添加了一個新的特性chatHead，這個圖示可以脫離所有的介面，顯示在android手機的所有應用的最上面。研究了下。記錄如下。              首先想到的是用一個透明的Activity來

android自定義可拖動的懸浮按鈕

在頁面上隨意拖動的按鈕public class MoveScaleRotateView extends RelativeLayout { private Context mContext; //預設的觸控點ID private static fina

Android 自定義View可拖動移動位置及邊緣拉伸放大縮

首先說一下定義這樣一個View有什麼用?在一些app中,需要設定頭像,而使用者選擇的圖片可能是使用攝像頭拍攝,也可能是選擇的相簿裡面的圖片,總之,這樣的圖片大小不一,就比如在使用某個聊天軟體的時候,設定頭像,需要對圖片進行擷取. 要實現這樣一個功能,首先,需

android自己定義進度值可拖動的seekbar

anim 一段時間 技術 新項目 progress near perl 文件 div 近期忙找實習，加上實驗室在推新項目，須要學習新知識。所以非常長一段時間沒去整理了官博客了，github也蠻久沒更新。非常羞愧。接下來還是要堅持寫。今天就簡單的寫一下我在

Android 自定義可拖拽View，界面渲染刷新後不會自動回到起始位置

AD att starty attrs floating blog body .get dmi 以自定義ImageView為例： /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class

可拖動的懸浮球(增加螢幕邊界判斷)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=

Android自定義可拖動進度條__SeekBar

Android裡自帶的進度條滿足不了我們的需求，在這篇文章中，我們拖動的滑塊為自定義的一張圖片，背景也是自己定義的，廢話不多說，先上效果圖： 1.先在project的drawable下定義一個layer-list的xml檔案作為背景 <?xml vers

可拖動 全域性懸浮框

Android手機內的全域性懸浮框，可拖動。而且不需要系統許可權！下面的是主要程式碼： package cn.net.owen.floatview; import android.app.Service; import android.content.I

Android 實現高仿iOS桌面效果之可拖動的GridView（上）

     最近專案中遇到一個LIstview的拖動效果，github上一搜發現有叫DragListview的開源專案，然後自己再小手一搜拖動排序的GridView，卻沒發現什麼很全很好的開源專案，後

WindowManager實現懸浮可拖動效果

現在360手機衛士有個流量統計的效果，開啟流量統計後，在桌面上會出現一個顯示流量的窗體，在任何介面都可以自由拖動。 模仿這個功能，做了一個統計手機訊號強度的Demo, 介面效果如下: 從上面的截圖可

Android 自定義可拖動尺子控制元件

之所以要寫這個控制元件，是一朋友面試時候被問到了，自己覺得好玩就琢磨了一下！廢話不多說先看效果圖是不是想要的效果 因為自己不會弄動態圖所以就截了一張圖，這個控制元件是可以左右拖動的！！好了，直接上程式碼吧！ 首先是建立一個類繼承View，重寫三個構造方法，預設呼叫第三個

android 新聞欄目管理（可拖動排序的gridview）

一用到的知識 1.GridView的一些內部方法，如：怎麼通過觸控的座標獲取對應的position等（這裡我採用的是繼承GridView控制元件） 3.位移動畫Animation，本DEMO中主要用到：TranslateAnimation  平移動畫 4.WindowMa

android自定義進度值可拖動的seekbar

最近忙找實習，加上實驗室在推新專案，需要學習新知識。所以很長一段時間沒去整理了官部落格了，github也蠻久沒更新，很慚愧。接下來還是要堅持寫。今天就簡單的寫一下我在專案中用到的算自定義seekbar的部落格，需求是這樣的，seekbar需要顯示最左和最右值，進