Today, there was a problem with the pop-up menu when you clicked the plus sign in the upper right corner of the imitation WeChat, so recording the needs can also be useful
to you. First look at the renderings:
Ok, the above implementation effect is mainly implemented using PopupWindow, among which the interesting knowledge points are 1. Click the plus button to pop up the menu, and the overall color becomes gray . 2. Click the plus button again to collapse the menu , 3. Open the menu Click on the external implementation to collapse the menu.
Ok, let’s look at the code without much nonsense
First, declare a class to inherit from PopupWindow (here you can also use new PopupWindow in the activity/Fragment you are using)
public class DevicePopWindow extends PopupWindow {
public DevicePopWindow(){
super(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
//这里要注意设置setOutsideTouchable之前要设置 setBackgroundDrawable()
//否则点击外部无法关闭pop
setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
setOutsideTouchable(true);
//获取焦点设置为true 这样再次点击菜单时 就隐藏菜单
setFocusable(true);
View inflate = LayoutInflater.from(BaseApplication.getAppContext()).inflate(R.layout.pop_window_device, null);
setContentView(inflate);
//设置窗口进入和退出的动画
setAnimationStyle(R.style.pop_add);
}
}
R.layout.pop_window_device.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="@drawable/shape_device_pop"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingEnd="16dp"
android:paddingStart="26dp"
android:paddingTop="20dp">
<TextView
android:id="@+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="发起群聊"
android:textColor="@color/colorBlack"
android:textSize="16sp"/>
<TextView
android:id="@+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="添加朋友"
android:textColor="@color/colorBlack"
android:textSize="16sp"/>
<TextView
android:id="@+id/tv_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="扫一扫"
android:textColor="@color/colorBlack"
android:textSize="16sp"/>
<TextView
android:id="@+id/tv_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="收付款"
android:textColor="@color/colorBlack"
android:textSize="16sp"/>
<TextView
android:id="@+id/tv_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="帮助与反馈"
android:textColor="@color/colorBlack"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
R.style.pop_add style
<style name="pop_add" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/pop_add_show</item>
<item name="android:windowExitAnimation">@anim/pop_add_hide</item>
</style>
@anim/pop_add_show.xml pop pop-up animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
<scale
android:duration="300"
android:fromXScale="0"
android:fromYScale="0"
android:interpolator="@android:anim/decelerate_interpolator"
android:pivotX="85%"
android:pivotY="0%"
android:toXScale="1.0"
android:toYScale="1.0"/>
</set>
@anim/pop_add_hide.xml pop hide animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
<scale
android:duration="300"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:pivotX="85%"
android:pivotY="0%"
android:toXScale="0"
android:toYScale="0"/>
</set>
Use in our page
class DeviceFragment : Fragment() {
lateinit var devicePopWindow: DevicePopWindow
lateinit var rootView: View
lateinit var successView:View
override fun onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState): View {
rootView = inflater.inflate(R.layout.base_device_fragment_layout,container,false)
initView(inflater)
initListener()
return rootView
}
fun initView(inflate: View) {
devicePopWindow = DevicePopWindow()
}
fun initListener() {
rootView.findViewById<ImageView>(R.id.device_head_add).setOnClickListener {
//设置pop显示位置
devicePopWindow.showAsDropDown(it,-150,10)
backgroundAlpha(0.8f)
}
//pop消失的监听
devicePopWindow.setOnDismissListener {
backgroundAlpha(1.0f)
}
}
/**
* 此方法用于改变背景的透明度，从而达到“变暗”的效果
*/
private fun backgroundAlpha(bgAlpha: Float) {
val lp: WindowManager.LayoutParams = activity!!.window.attributes
// 0.0-1.0
lp.alpha = bgAlpha
activity!!.window.attributes = lp
// everything behind this window will be dimmed.
// 此方法用来设置浮动层，防止部分手机变暗无效
activity!!.window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
}
}
Ok. This is the end, everything is quite simple and detailed comments are no longer burdensome in the code