Popup Window的创建及其基本属性
一:功能概述
PopupWindow 是一个可以在Activity
之上显示任意View
的控件。在Android
经常使用,效果跟Dialog
效果类似,不同点在于可以控制显示的位置,比如底部显示等,侧边显示等。
二:创建基本流程
1:创建XML布局文件(要展示的弹出布局)
(这里展示的仅仅是布局而已,随意写的,读者不要认为代码太长、太复杂放弃了,实际上在activity里怎么写的布局就在这里面写布局。这里模仿的是qq浏览器底部菜单栏的弹出界面)
<?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="wrap_content"
android:background="@color/colorAccent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/layout_1"
android:layout_marginTop="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_1"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_1"
android:text="Page Ctrl"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_2"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_2"
android:text="Download Pic"
android:textSize="11sp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_3"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_3"
android:textSize="12sp"
android:text="Add Bookmark"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_4"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_4"
android:text="History/Bookmark"
android:textSize="10sp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_5"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_5"
android:text="Share"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/layout_2"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_6"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_6"
android:text="Refresh"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_7"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_7"
android:text="Soul"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_8"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_8"
android:text="Translate"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_9"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_9"
android:text="Night Mode"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_10"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_10"
android:text="Settings"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
效果图:
2:创建私有方法来编写Popup Window逻辑代码
private void showPopupWindow(){
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
PopupWindow popupWindow = new PopupWindow(contentView,
WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);
ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());
}
说明:第一步先创建view对象来绑定xml布局,接着创建PopupWindow实例。对于接下来的控件的加载注册与碎片很相似,都是依附于开头提到的view对象。
最后两行代码是将要展示的Popup Window设定展示的位置。如若想让展示的控件点击有效果,只需设置监听即可:
private void showPopupWindow(){
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
popupWindow = new PopupWindow(contentView,
WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT,true);
ImageView imageViewOne = (ImageView)contentView.findViewById(R.id.image_1);
ImageView imageViewTwo = (ImageView)contentView.findViewById(R.id.image_2);
ImageView imageViewThree = (ImageView)contentView.findViewById(R.id.image_3);
ImageView imageViewFour = (ImageView)contentView.findViewById(R.id.image_4);
ImageView imageViewFive = (ImageView)contentView.findViewById(R.id.image_5);
ImageView imageViewSix = (ImageView)contentView.findViewById(R.id.image_6);
ImageView imageViewSeven = (ImageView)contentView.findViewById(R.id.image_7);
ImageView imageViewEight = (ImageView)contentView.findViewById(R.id.image_8);
imageViewOne.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewTwo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewThree.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewFour.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewFive.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
showSecondPopupWindow();
popupWindow.dismiss();
}
});
imageViewSix.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewSeven.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
imageViewEight.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"MB_OK.",Toast.LENGTH_SHORT).show();
}
});
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
popupWindow.showAtLocation(view, Gravity.BOTTOM,0,getLayoutHeight());
}
3:在合适地方弹出该Popup Window(或动作监听内)
showPopupWindow();
注意该方法是我们自定义提出的,不是系统提供的。
如果想关闭,只需如下即可:
popupWindow.dismiss();
另外还需注意的是这里的PopupWindow对象应该是类成员变量而非方法,否则在其它地方是访问不了该属性的。我这里为了方便演示,在一开始的java代码里写成方法变量,实际上应该写成类成员变量来访问。
三:基本属性
1:PopupWindow可以设置弹出/消失动画,且简单
java代码如下:
popupWindow.setAnimationStyle(R.style.MyPopupWindow_anim_style);
这里需要在res目录i下新建anim文件夹,接着原封不动把这两个文件拷过去(一个控制弹出动画参数,一个控制弹出)即可
poupwindow_hidden_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="160"
android:fromYDelta="0"
android:toYDelta="10%p" />
<alpha
android:duration="160"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>
poupwindow_show_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="160"
android:fromYDelta="10%p"
android:toYDelta="0" />
<alpha
android:duration="160"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
2:PopupWindow可以设置弹出位置(居中、顶部、底部、动态指定高度)
PopupWindow的showAtLocation()
第二个参数可以控制弹出位置
参数 | 说明 |
---|---|
Gravity.BOTTOM |
底部 |
Gravity.TOP |
顶部 |
Gravity.CENTER |
中央 |
Gravity.RIGHT |
左侧 |
Gravity.LEFT |
右侧 |
这里只是指定固定的位置(相对于屏幕),但要想动态地指定高度,例如指定该PopupWindow位于某控件上方,某控件上方偏移多少dp,需要自定义一个私有方法,在第四个参数内调用该方法即可。
例如,该自定义方法是计算某LinearLayout的高度:
private int getLayoutHeight(){
int height;
layout2 = (LinearLayout)findViewById(R.id.layout_2);
height = layout2.getHeight();
return height;
}
showAtLocation()
第四个参数为y
,意为PopupWindow偏移第二个参数的位置,即向上或向下偏移多少
四:注意事项
PopupWindow布局不要设置为透明,否则必须点击非透明部分才会起作用。初学者在练习该内容时,注意要把PopupWindow变量设置为类成员变量,否则在其它地方调用dismiss()
方法时会报错。
来源:oschina
链接:https://my.oschina.net/u/4340796/blog/4712338