1. 程式人生 > >ViewOverlay 浮層

ViewOverlay 浮層

ViewOverlay 看似挺陌生的,其實android在4.3的時候就已經供給了,它是view上面的的一個浮層,這個浮層與當前View檢視大小一致,可以理解一個上下兩層的樓房,但是上層的內容並不影響整個佈局.

API:新增覆蓋

 /**
     * Adds a Drawable to the overlay. The bounds of the drawable should be relative to
     * the host view. Any drawable added to the overlay should be removed when it is no longer
     * needed or no longer visible.
     *
     * @param drawable The Drawable to be added to the overlay. This drawable will be
     * drawn when the view redraws its overlay.
     * @see #remove(Drawable)
     */
    public void add(Drawable drawable) {
        mOverlayViewGroup.add(drawable);
    }

API: 移除覆蓋
    /**
     * Removes the specified Drawable from the overlay.
     *
     * @param drawable The Drawable to be removed from the overlay.
     * @see #add(Drawable)
     */
    public void remove(Drawable drawable) {
        mOverlayViewGroup.remove(drawable);
    }

API: 清除所有覆蓋
  /**
     * Removes all content from the overlay.
     */
    public void clear() {
        mOverlayViewGroup.clear();
    }
API: 覆蓋是否為空
 boolean isEmpty() {
        return mOverlayViewGroup.isEmpty();
    }
ViewOverlay還有個子類,主要提供給ViewGroup的,增加了兩個方法 

add(view) ;remove(view) 新增浮層檢視和移除浮沉檢視

 * @param view The View to be added to the overlay. The added view will be
     * drawn when the overlay is drawn.
     * @see #remove(View)
     * @see ViewOverlay#add(Drawable)
     */
    public void add(View view) {
        mOverlayViewGroup.add(view);
    }

    /**
     * Removes the specified View from the overlay.
     *
     * @param view The View to be removed from the overlay.
     * @see #add(View)
     * @see ViewOverlay#remove(Drawable)
     */
    public void remove(View view) {
        mOverlayViewGroup.remove(view);
    }



最大的作用就是穿越層次

下面將會給出例子:

1:移動的範圍 左邊擴充套件範圍為整個窗體,而右邊預設屬於父親範圍大小

 private void overlayWindow(final View v) {
        if (Build.VERSION.SDK_INT < 18) return;
        final ViewGroup group = ((ViewGroup) getWindow().getDecorView());
        group.getOverlay().add(v);

        //簡單位移動畫
        ObjectAnimator anim = ObjectAnimator.ofFloat(v, "translationY", group.getHeight());
        anim.setDuration(2000);
        anim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                group.getOverlay().remove(v);
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                group.getOverlay().remove(v);
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        anim.start();
    }

    private void animWiew(View v) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(v, "translationY", 15 * (v.getHeight()));
        anim.setDuration(2000);
        anim.start();
    }


可以看到左邊的移動返回為整個窗體,而右邊移動返回屬於紅色區域(預設父親窗體大小)

例子2:展現view預設的移動範圍,是他父親的大小範圍

 private void overlayWindow2(final View v) {
        if (Build.VERSION.SDK_INT < 18) return;
        final ViewGroup group = (ViewGroup) v.getParent();
        ObjectAnimator anim = ObjectAnimator.ofFloat(v, "translationY", group.getHeight());
        anim.setDuration(2000);
        anim.start();
    }

這裡並未新增浮層


例子3: 凌波微步的效果:

 /**
     * 先展示一個消失動畫
     * <p/>
     * 再在窗體中位移
     * <p/>
     * 凌波微步的效果
     *
     * @param v
     */
    private void CombinationOverlay(final View v) {
        if (Build.VERSION.SDK_INT < 18) return;

        ObjectAnimator fade = ObjectAnimator.ofFloat(button3, "alpha", 1f, 0f);
        fade.setDuration(1000);


        fade.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                FrameLayout fram_greent = (FrameLayout) findViewById(R.id.fram_greent);
                v.setAlpha(1.0f);
                fram_greent.getOverlay().add(v);

                final ViewGroup group = ((ViewGroup) getWindow().getDecorView());
                ObjectAnimator anim = ObjectAnimator.ofFloat(v, "translationY", -group.getHeight());
                anim.setDuration(2000);
                anim.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        group.getOverlay().remove(v);
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {
                        group.getOverlay().remove(v);
                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
                anim.start();

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        fade.start();


    }


相關推薦

ViewOverlay

ViewOverlay 看似挺陌生的,其實android在4.3的時候就已經供給了,它是view上面的的一個浮層,這個浮層與當前View檢視大小一致,可以理解一個上下兩層的樓房,但是上層的內容並不影響整個佈局. API:新增覆蓋 /** * Adds a Dra

Selenium-js彈窗

單擊 cli 字符串類型 pytho javascrip clas .cn bdr 對話 學習過js的小夥伴會發現,我們在一些實例中用到了alert()方法、prompt()方法、prompt()方法,他們都是在屏幕上彈出一個對話框,並且在上面顯示括號內的內容,使用這種方法

ios滑動不流暢解決方案

viewport -c tle log capable ext cap col 技術分享 前段時間做了一個浮層,但在ios上,浮層滑動不流暢,基本上是隨著手指的移動而移動,經研究加上-webkit-overflow-scrolling: touch即可 eg: <

CSS篇之2---如何保持水平垂直居中

img 才會 寬高 true 類型 webkit block clas lock 如何保持浮層水平垂直居中.notehttp://www.cnblogs.com/yaliu/p/5190957.html (一)利用絕對定位與transform        

蒙版加載中實現方式

bka mil QQ bpf sym ued radius db4 span <html> <style> #paneloading{ display:none; position:fixed;

20181127——CSS保持水平居中

元素水平居中 正常的margin後面是跟padding一樣的,跟著4個引數,margin: 0 auto;0為上下外間距為0px auto代表左右自動適應。 居中不好使的原因: 1、元素沒有設定寬度,沒有寬度怎麼居中嘛! 2、設定了寬度依然不好使,你設定的是行內元素吧,行內元素和塊元素的區別

HTML div 盒子 新增/刪除——

      1、clear語法:clear : none | left|right| both 2、clear引數值說明:none :  允許兩邊都可以有浮動物件both :  不允許有浮動物件left :  不允許左邊有浮動物件right :  不允許右邊有浮動

html實現加php圖片下載至本地

.button-code{ background-color: #ffffff; width: 115px; height: 35px; border: 1px solid #32a9ff;

去掉CSDN部落格右邊討厭的二維碼

經常在CSDN看部落格,但是最近CSDN右邊的移動客戶端的推廣二維碼嚴重的影響了閱讀體驗,所以需要想辦法把它去掉。 使用一個叫做stylish的chrome外掛就可以搞定了。這個外掛可以很方便的修改網頁裡面的CSS。這裡通過chrome的debug工具,查詢到了廣告的class i

CSS3清除浮動 保持水平垂直居中

1)清除浮動,什麼時候需要清除浮動,清除浮動都有哪些方法     1、在非IE瀏覽器(如Firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而

水平垂直居中的方法

(一)利用絕對定位與transform          <div class="parent">       <div class="children"></div>     </div>   將父元素定位,子元素

Android 引導頁挖洞

使用者第一次進入應用需要顯示引導,有的按鈕位置由於解析度不同,沒法簡單的用UI扣好的圖片遮蓋,而且也浪費記憶體。 程式碼如下: int canvasWidth = canvas.getWidth(); int canvasHeight

Android引導蒙版(

在我們的專案中或多或少都會用到引導蒙層,每當一個專案開發一個新功能,總會想辦法及時讓使用者得知有這樣一個新功能,這時通常會採用引導頁或者蒙版(浮層)的方式提心使用者,這裡有需要關注的新內容。 先上圖:         引入: build.gra

推薦一個好用小巧的Android引導蒙版()庫

前言 每當一個專案開發一個新功能,總會想辦法及時讓使用者得知有這樣一個新功能,這時通常會採用引導頁或者蒙版(浮層)的方式提心使用者,這裡有需要關注的新內容。 遇到這種需求,最簡單的想法就是將引導的佈局直接寫在對應的頁面中,在首次開啟時顯示,之後隱藏。但是用這

Android Studio:增加蒙板/特效

寫在前面的話:每一個例項的程式碼都會附上相應的程式碼片或者圖片,保證程式碼完整展示在部落格中。最重要的是保證例程的完整性!!!方便自己也方便他人~歡迎大家交流討論~ 接下來要在自定義相機上新增取景框,即中間掏空旁邊半透明的浮層/蒙板。我一開始搜尋的是“蒙板”,

CSS篇之3. 如何保持水平垂直居中

垂直水平居中是日常前端開發當中一個常見的需求,在支援 CSS3 屬性的現代瀏覽器當中,有一個利用 CSS3 屬性的垂直水平居中方法: .center { position: absolute; top: 50%;

手機端彈窗阻止介面滾動

今天遇到了一個手機端浮層彈窗的需求 要實現這個彈窗效果不麻煩,麻煩的是實現了這個效果之後只讓浮層裡面的內容滑動而不讓底下的內容滑動。 我從網上搜到的實現方法,據說也是bootstrap的實現方法:當彈窗的時候將body的overflow樣式設定為hidd

HTML5基礎加強css樣式篇(css過度效果:介面的遮罩和消失)(十九)

1最終效果圖: . 1.靜態頁面佈局: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

android 簡單實現、activity設定Theme

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent

position:fixed;實現底層頁面不跟隨模組滾動

          程式碼如下:<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"