[Android][透明遮罩]

1.落筆緣由

之前有遇到要做透明遮罩的需求,現在來好好總結一下。實現遮罩的方式我這里總結了四種,分別是使用FrameLayout實現,PopupWindow實現,Dialog實現和WindowManager實現。

2.例子解析

1)FrameLayout實現

FrameLayout實現的遮罩能夠控制遮罩大小,但是無法控制位置。而且能設置動畫,但是FrameLayout實現的遮罩有個需要處理的問題,就是透過透明遮罩,是點擊下一層的按鈕是能觸發該按鈕的點擊事件的。解決這個問題的方法是在透明遮罩的布局里設置android:clickable="true",或者在代碼里直接設置setClickable(true);

/**
 * 遮罩
 * 1.是否可以控制遮罩大小和位置
 * 2.是否有動畫 有
 *FrameLayout作為底布局,可以控制遮罩大小,但是無法控制遮罩的位置,例如你無法讓遮罩居中,因為FrameLayout只能從左上角開始布置布局,而且,你可以點擊遮罩下布局的按鈕
 * FrameLayout兩布局重疊,如何讓下層不響應事件?可以在上層布局設置android:clickable="true",經過測試是有效的
 */
public class TestFramelayoutActivity extends Activity{

    private View translucenceLayut = null;
    private Button btnShow,btnHide,btnClose;
    private FrameLayout body = null;
    private Animation inAnimation ,outAnimation;
    private LinearLayout llbody = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.test_framelayout);
        body = (FrameLayout) findViewById(R.id.framebody);
        llbody = (LinearLayout) findViewById(R.id.body);
        inAnimation = AnimationUtils.loadAnimation(this,R.anim.top_in2);
        outAnimation = AnimationUtils.loadAnimation(this,R.anim.top_out2);
        translucenceLayut = LayoutInflater.from(this).inflate(R.layout.translucence_layer_framelayout_layout,null,false);
        body.addView(translucenceLayut,new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
        translucenceLayut.setVisibility(View.INVISIBLE);
        btnHide = (Button) findViewById(R.id.btn_hide);
        btnHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                translucenceLayut.startAnimation(outAnimation);
                translucenceLayut.setVisibility(View.INVISIBLE);
            }
        });
        btnShow = (Button) findViewById(R.id.btn_show);
        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                translucenceLayut.startAnimation(inAnimation);
                translucenceLayut.setVisibility(View.VISIBLE);
            }
        });

        btnClose = (Button) translucenceLayut.findViewById(R.id.close);
        btnClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                translucenceLayut.startAnimation(outAnimation);
                translucenceLayut.setVisibility(View.INVISIBLE);
            }
        });
    }
}

2)PopupWindow實現

PopupWindow實現的遮罩,可以控制大小和位置,可以設置動畫效果,通過 popup.setAnimationStyle(R.style.popwin_anim_style)設置。但是也有一些需要注意的地方,這些在代碼中指出。

/**
 * 可以控制大小和位置
 * 可以設置動畫效果,通過 popup.setAnimationStyle(R.style.popwin_anim_style)設置
 */

public class TestPopupWindowActivity extends Activity {

    private Button btnShow = null;
    private PopupWindow popup = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test_popupwindow);

        btnShow = (Button) findViewById(R.id.btnShow);
        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (popup!=null)
                {
                    popup.showAtLocation(TestPopupWindowActivity.this.findViewById(R.id.body), Gravity.CENTER, 0, 0);
                }
            }
        });

        popup = new PopupWindow(this);

        View popView = LayoutInflater.from(this).inflate(R.layout.popupwindow_translucence_layer_layout, null);
//        設置透明度setAlpha,在popupWindow里最好設置,因為popupWindow透明效果不是很好
//        popView.setAlpha(0.5f);
        popup.setContentView(popView);
        popup.setAnimationStyle(R.style.popwin_anim_style);
//        popup.setEnterTransition(inAnimation);
//        popup.setExitTransition(outAnimation);

        popup.setFocusable(true);
        //需要設置這個,否則popup的遮罩無法撐滿整個屏幕(邊上會有漏光)
        popup.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));// 設置背景圖片,不能在布局中設置,要通過代碼來設置
        DisplayMetrics metric = new DisplayMetrics();

        getWindowManager().getDefaultDisplay().getMetrics(metric);

        int width = metric.widthPixels; // 屏幕寬度(像素)

        int height = metric.heightPixels; // 屏幕高度(像素)


//        popup.setWidth(Integer.parseInt(new DecimalFormat("0").format(width * 0.8)));
//
//        popup.setHeight(Integer.parseInt(new DecimalFormat("0").format(height * 0.8)));

//        popup.setWidth(width);
//        popup.setHeight(height);
        popup.setWidth(WindowManager.LayoutParams.MATCH_PARENT);
        popup.setHeight(WindowManager.LayoutParams.MATCH_PARENT);
        Button btnHide = (Button) popView.findViewById(R.id.btn_hide);
        btnHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                popup.dismiss();
            }
        });
    }
}

3)Dialog實現

Dialog實現的遮罩需要處理的問題比較多,不太建議作為遮罩使用。

/**
 * Created by LGY on 2017/4/30.
 * 1.使用dialog確實能控制遮罩大小和位置,dialog本來就自帶透明背景,所以如果遮罩如果小于被遮布局,那么看起來效果不好
 * 而且要實現透明的dialog,需要設置dialog的透明度,但是這會使dialog里的控件也都擁有透明度,
 * 即使里面的控件設置了背景色和透明度也沒有效果
 * 2.dialog不太適合做遮罩,要處理的細節太多
 */

public class OutlineDialog extends Dialog {


    private  Button btn_hide = null;
    private OnBtnHideClickListner mListner = null;
    public OutlineDialog(Context context) {
        super(context);
    }


    /**
     * @param context
     * @param theme
     */
    public OutlineDialog(Context context, int theme) {
        super(context, theme);
    }


    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_translucence_layout);

        Window dialogWindow = getWindow();
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        lp.width = LayoutParams.MATCH_PARENT; // 寬度
        lp.height = LayoutParams.MATCH_PARENT; // 高度
        lp.alpha = 0.7f;
        dialogWindow.setAttributes(lp);
        dialogWindow.setWindowAnimations(R.style.popwin_anim_style);
        btn_hide = (Button) findViewById(R.id.btn_hide);
        btn_hide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mListner!=null )
                {
                    mListner.OnBtnHideClick();
                }
            }
        });
    }

    public void setOnBtnHideClickListner(OnBtnHideClickListner mListner)
    {
        this.mListner  = mListner;
    }

    public interface OnBtnHideClickListner
    {
        public void OnBtnHideClick();
    }
}

4)WindowManager實現

WindowManager實現的遮罩可以控制遮罩大小和位置,但是沒有動畫,至少我還沒發現如何實現動畫。

/*
* WindowManager可以控制遮罩大小和位置
* 但是,它不適合給遮罩添加轉場動畫
*
* */
public class TestWindowManagerActivity extends Activity {

    private  WindowManager windowManager = null;
    private LinearLayout translucenceLayout = null;
    private Button btnShow,btnClose;
    WindowManager.LayoutParams params = null;
    private Animation inAnimation ,outAnimation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test_window_manager);
        initTranslucenceLayout();
        initWindowManager();


        inAnimation = AnimationUtils.loadAnimation(this,R.anim.top_in);
        outAnimation = AnimationUtils.loadAnimation(this,R.anim.top_out);

        btnClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.e("lgy","123");
                if (windowManager!=null)
                {
//                    translucenceLayout.startAnimation(outAnimation);
                    windowManager.removeView(translucenceLayout);
                }
            }
        });
        btnShow = (Button) findViewById(R.id.btnShow);
        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (windowManager!=null&&params!=null)
                {
                    windowManager.addView(translucenceLayout,params);
//                    translucenceLayout.setVisibility(View.INVISIBLE);
//                    translucenceLayout.startAnimation(inAnimation);
//                    translucenceLayout.setVisibility(View.VISIBLE);
                }
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    private void initTranslucenceLayout()
    {
        translucenceLayout = new LinearLayout(this);
        if (translucenceLayout!=null){
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
            translucenceLayout.setLayoutParams(params);
            translucenceLayout.setBackgroundColor(Color.parseColor("#e0999999"));
            translucenceLayout.setOrientation(LinearLayout.VERTICAL);
            translucenceLayout.setGravity(Gravity.CENTER_VERTICAL);
            btnClose = new Button(this);
            if (btnClose!=null)
            {
                params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
                btnClose.setLayoutParams(params);
                btnClose.setText("隱藏");
                translucenceLayout.addView(btnClose);
            }

        }
    }


    private void initWindowManager() {
        windowManager = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);

        // 設置LayoutParams參數
        params = new WindowManager.LayoutParams();
        // 設置顯示的類型,TYPE_PHONE指的是來電話的時候會被覆蓋,其他時候會在最前端,顯示位置在stateBar下面,其他更多的值請查閱文檔
        params.type = WindowManager.LayoutParams.TYPE_APPLICATION_PANEL  ;
        // 設置顯示格式
        params.format = PixelFormat.RGBA_8888;
        // 設置對齊方式
        params.gravity = Gravity.LEFT | Gravity.TOP;
        // 設置寬高
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.MATCH_PARENT;
        //在進行 windowManager.addView操作前,務必要確定當前的activity已經創建運行,否則
        //會報錯WindowManager$BadTokenException: Unable to add window -- token null is not valid; is your activity running?
//        windowManager.addView(translucenceLayout,params);
//        translucenceLayout.setVisibility(View.INVISIBLE);
    }
}

3.源碼地址
http://download.csdn.net/detail/lgywsdy/9851645

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容