从标题栏下面弹出的popupwindow 带背景遮罩

先上效果  相信许多项目都需要这种效果的

从标题栏下面弹出的popupwindow 带背景遮罩_第1张图片

拿到这个需求  就有了几个解决方案  一种是用 布局隐藏 加 属性动画实现 后来发现这种方法的点击事件比较麻烦  适合从上弹出沾满整个屏幕  像这种有可能的出现一部分的内容的情况就不怎么适应了   

所以我果断选择用popupwindow来实现这种需求

说说用popupwindow的思路吧  让popupwindow弹出很容易 可是背景遮罩确实不好加  还需要这样比较美观的  在网上看了看  大概有两种方案  一种是讲popupwindow占满全屏 下面没有内容部分的空间加上遮罩背景   这种方案弹出时明显可以看出整个空间的弹出效果  不太符合要求   

第二种方案

privatevoidbackgroundAlpha(floatf) {

WindowManager.LayoutParams lp =getWindow().getAttributes();

lp.alpha = f;

getWindow().setAttributes(lp);

}


这种方法全局加遮罩  可是这样popupwindow的上面的空间也加上了 遮罩  不太美观

下面就说说我实现的思路吧

我将title以下的部分除了显示内容的控件以外 又加了个同样大小的遮罩控件  开始是隐藏的

activity_main.xml  布局


android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

android:gravity="top"

android:background="#EFEFF4">

android:id="@+id/line"

android:layout_width="match_parent"

android:layout_height="0.5dp"

android:layout_below="@+id/spread_toolbar"

android:background="#dfdfdf"/>


android:layout_width="match_parent"

android:layout_height="match_parent"

android:dividerHeight="0.2dp"

android:layout_below="@+id/line">

android:id="@+id/view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#44000000"

android:visibility="gone"

android:layout_below="@+id/line"/>





然后当 popupwindow弹出时  将背景显示  popupwindow消失时背景隐藏

MainActivity.java


packagecom.sujun.machenike.popupwindow_demo;

importandroid.graphics.Color;

importandroid.graphics.drawable.ColorDrawable;

importandroid.os.Bundle;

importandroid.support.v4.app.FragmentActivity;

importandroid.view.LayoutInflater;

importandroid.view.MotionEvent;

importandroid.view.View;

importandroid.view.WindowManager;

importandroid.widget.ListView;

importandroid.widget.PopupWindow;

public classMainActivityextendsFragmentActivity {

privateViewline;

privateListViewmListView;

privateViewmView;

@Override

protected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

}

//初始化控件

private voidinitView() {

line=findViewById(R.id.line);

mView=findViewById(R.id.view);

mListView= (ListView) LayoutInflater.from(this).inflate(R.layout.popupwindow_layout, null);

mListView.setAdapter(newMyAdapter(this));

findViewById(R.id.spread_layout_title).setOnClickListener(newView.OnClickListener() {

@Override

public voidonClick(View v) {

showPopupWindow(line);

}

});

}

//控件下方弹出窗口

private voidshowPopupWindow(View view) {

PopupWindow    window =newPopupWindow(mListView,WindowManager.LayoutParams.MATCH_PARENT,WindowManager.LayoutParams.WRAP_CONTENT, true);

window.setTouchable(true);

window.setTouchInterceptor(newView.OnTouchListener() {

@Override

public booleanonTouch(View v,MotionEvent event) {

return false;

//这里如果返回true的话,touch事件将被拦截

//拦截后 PoppWindow的onTouchEvent不被调用,这样点击外部区域无法dismiss

}

});

//(注意一下!!)如果不设置popupWindow的背景,无论是点击外部区域还是Back键都无法弹框

window.setBackgroundDrawable(newColorDrawable(Color.TRANSPARENT));

window.setOnDismissListener(newPopupWindow.OnDismissListener() {

@Override

public voidonDismiss() {

mView.setVisibility(View.GONE);

}

});

//设置popwindow的显示和消失动画

window.setAnimationStyle(R.style.toppopwindow_anim_style);

window.showAsDropDown(view);

mView.setVisibility(View.VISIBLE);

}

}


然后这里面用到的布局

popupwindow_layout.xml

从标题栏下面弹出的popupwindow 带背景遮罩_第2张图片

item.xml


从标题栏下面弹出的popupwindow 带背景遮罩_第3张图片

spread_toolbar.xml


xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/spread_toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="#ffffff"

app:contentInsetStart="0dp"

android:layout_gravity="center">

android:id="@+id/spread_layout_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:paddingTop="5dp"

android:paddingBottom="5dp"

android:paddingLeft="7dp"

android:paddingRight="7dp"

android:orientation="horizontal"

android:background="@drawable/spread_toolbar_titlebg">

android:id="@+id/spread_toolbar_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:clickable="false"

android:text="妹子"

android:textColor="#2EBDFF"

android:textSize="16sp"/>

android:id="@+id/spread_toolbar_triangle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="3dp"

android:layout_gravity="center_vertical"

android:clickable="false"

android:src="@drawable/icon_xiala"/>



当然 styles 里面 的显示和隐藏 动画

从标题栏下面弹出的popupwindow 带背景遮罩_第4张图片

还有动画

popup_hide.xml


从标题栏下面弹出的popupwindow 带背景遮罩_第5张图片

popup_show.xml


从标题栏下面弹出的popupwindow 带背景遮罩_第6张图片

adapter那些就不需要了吧  

当然 如果嫌麻烦可直接下载

我会将demo过会上传 

感谢支持

附上下载地址   不知道怎么设置不需要积分  所以设置了一个积分 

有时间将上传至git上

http://download.csdn.net/download/sujun751943509/9945706

你可能感兴趣的:(从标题栏下面弹出的popupwindow 带背景遮罩)