第2天PopupWindow弹出窗体
PopupWindow
显示方法 | 显示位置 |
---|---|
showAsDropDown(View anchor, int xoff, int yoff) | 显示在anchor控件的下方 |
showAtLocation(View parent, int gravity, int x, int y) | 显示在parent控件的某个位置 |
一.PopupWindow介绍
PopupWindow弹出窗体可以在任意位置弹出窗体,而对话框只能出现屏幕最中间。
二.如何自定义窗体
(1)构造方法:public PopupWindow (Context context):context上下文对象
(2)必须设置的3大要素:
setContentView():设置自定义布局
setWidth():设置宽度
setHeight():设置高度
(3)显示窗体:
a。显示在某个指定控件的下方
showAsDropDown(View anchor):
showAsDropDown(View anchor, int xoff, int yoff);//xoff和yoff都是偏移量
b。指定父视图,显示在父控件的某个位置(Gravity.TOP,Gravity.RIGHT等)
showAtLocation(View parent, int gravity, int x, int y);
//gravity可以是Gravity.TOP、Gravity.BOTTOM、Gravity.LEFT、Gravity.RIGHT
三.底部弹出窗体
主要应用于抖音点击分享,打字弹出键盘等
(1)xml布局文件:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center">
<Button
android:onClick="click"
android:text="弹出窗体"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
(2)弹出窗体xml布局文件:layout3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F0E8F0"
android:orientation="vertical">
<TextView
android:id="@+id/camera_tv"
android:textAlignment="center"
android:textSize="30sp"
android:text="拍照"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:background="#969696"
android:layout_width="match_parent"
android:layout_height="5dp"></View>
<TextView
android:textAlignment="center"
android:textSize="30sp"
android:text="从手机相册选择"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:background="#969696"
android:layout_width="match_parent"
android:layout_height="5dp"></View>
<TextView
android:textAlignment="center"
android:textSize="30sp"
android:text="保存图片"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:background="#969696"
android:layout_width="match_parent"
android:layout_height="15dp"></View>
<TextView
android:textAlignment="center"
android:textSize="30sp"
android:text="取消"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
(3)java 代码:MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void click(View view) {
show_popupwindow();
}
//弹出窗体
public void show_popupwindow(){
//TODO 1:实例化对象
PopupWindow popupWindow = new PopupWindow(MainActivity.this);
//TODO 2:设置属性
View view=LayoutInflater.from(this).inflate(R.layout.layout3,null);
final TextView textView = view.findViewById(R.id.camera_tv);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, textView.getText().toString().trim(), Toast.LENGTH_SHORT).show();
}
});
popupWindow.setContentView(view);
popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
popupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
//设置点击外部消失
popupWindow.setOutsideTouchable(true);
//TODO 3:展示
/**
* @param parent 父布局
* @param gravity gravity可以是Gravity.TOP、Gravity.BOTTOM、Gravity.LEFT、Gravity.RIGHT。。。。
* @param x x轴偏移量
* @param y y轴偏移量
*/
View parent=LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,null);
popupWindow.showAtLocation(parent, Gravity.BOTTOM,0,0);
}
}
五.弹出窗体背景半透明
安卓中,控件都有透明度alpha属性,取值范围为0-1的float类型,半透明就是0.5f
示例代码:
PopupWindow popupWindow= new PopupWindow(Main3Activity.this);
popupWindow.setHeight(300);
popupWindow.setWidth(400);
View view1=LayoutInflater.from(Main3Activity.this).inflate(R.layout.pop,null);
popupWindow.setContentView(view1);
//设置点击外部,窗体消失
popupWindow.setOutsideTouchable(true);
//1.获得当前窗体的属性
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
//2.设置透明度为0.5f,半透明状态
layoutParams.alpha=0.5f;
//3.为窗体设置新属性
getWindow().setAttributes(layoutParams);
//4.当窗体消失的时候,恢复透明度
popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.alpha=1f;
getWindow().setAttributes(layoutParams);
}
});
popupWindow.showAtLocation(view1, Gravity.BOTTOM,0,0);
六.设置动画
1.在res/anim文件夹下定义进场动画
入场动画anim_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="2000" android:fromYDelta="100%" android:toYDelta="0"></translate>
</set>
出场动画anim_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="3000" android:fromYDelta="0" android:toYDelta="100%"></translate>
</set>
2.定义进出场动画
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<!-- 弹出窗体动画 -->
<style name="pop">
<item name="android:windowEnterAnimation">@anim/anim_in</item>//入场动画
<item name="android:windowExitAnimation">@anim/anim_out</item>//出场动画
</style>
</resources>
3.为popupwindow设置动画
setAnimationStyle(R.style.pop);
六.实现微信QQ支付宝右上角加号弹出窗体
1.步骤流程:
步骤1.实例化PopupWindow对象
步骤2.设置自定义布局、宽度和高度
步骤3.指定位置显示: showAsDropDown() showAtLocation()
2代码:
(1)xml布局文件:activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main2Activity"
android:orientation="vertical"
>
<RelativeLayout
android:background="#393A3F"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
>
<TextView
android:gravity="center_vertical"
android:textColor="#fff"
android:textSize="30sp"
android:text="微信"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<ImageView
android:layout_alignParentRight="true"
android:layout_marginRight="50dp"
android:src="@drawable/search"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/add"
android:layout_alignParentRight="true"
android:src="@drawable/add"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</RelativeLayout>
<ListView
android:id="@+id/lv"
android:layout_weight="8"
android:layout_width="match_parent"
android:layout_height="0dp"></ListView>
<RadioGroup
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal">
<RadioButton
android:textAlignment="center"
android:drawableTop="@drawable/selector1"
android:button="@null"
android:textSize="20sp"
android:text="微信"
android:textColor="@drawable/selector2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textAlignment="center"
android:drawableTop="@drawable/selector1"
android:button="@null"
android:textSize="20sp"
android:text="微信"
android:textColor="@drawable/selector2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textAlignment="center"
android:drawableTop="@drawable/selector1"
android:button="@null"
android:textSize="20sp"
android:text="微信"
android:textColor="@drawable/selector2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textAlignment="center"
android:drawableTop="@drawable/selector1"
android:button="@null"
android:textSize="20sp"
android:text="微信"
android:textColor="@drawable/selector2"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
</RadioGroup>
</LinearLayout>
(2)自定义弹出窗体布局xml文件:layout_weixin_popupwindow.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#45494A"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:src="@drawable/chat"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent" />
<TextView
android:textColor="#fff"
android:textSize="20sp"
android:text="发起群聊"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#fff">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:src="@drawable/chat"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent" />
<TextView
android:textColor="#fff"
android:textSize="20sp"
android:text="发起群聊"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#fff">
</View>
</LinearLayout>
(3)Java代码:Main2Activity.java
public class Main2Activity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//TODO 去除自带的bar
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main2);
imageView = (ImageView) findViewById(R.id.add);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
show_popupwindow();
}
});
}
//弹出窗体
public void show_popupwindow(){
//TODO 1:实例化对象
PopupWindow popupWindow = new PopupWindow(Main2Activity.this);
//TODO 2:设置属性
View view= LayoutInflater.from(this).inflate(R.layout.layout_weixin_popupwindow,null);
popupWindow.setContentView(view);
popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
popupWindow.setWidth(600);
//设置点击外部消失
popupWindow.setOutsideTouchable(true);
//TODO 3:展示
popupWindow.showAsDropDown(imageView,-100,-100);
}
}
七.自定义PopupWindow
public class MyPopupWindow extends PopupWindow {
Context mContext;
private LayoutInflater mInflater;
private View mContentView;
public MyPopupWindow(Context context) {
super(context);
this.mContext=context;
//打气筒
mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//打气
mContentView = mInflater.inflate(R.layout.layout_dialog,null);
//设置View
setContentView(mContentView);
//设置宽与高
setWidth(WindowManager.LayoutParams.MATCH_PARENT);
setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
/**
* 设置进出动画
*/
setAnimationStyle(R.style.MyPopupWindow);
/**
* 设置背景只有设置了这个才可以点击外边和BACK消失
*/
setBackgroundDrawable(new ColorDrawable());
/**
* 设置可以获取集点
*/
setFocusable(true);
/**
* 设置点击外边可以消失
*/
setOutsideTouchable(true);
/**
*设置可以触摸
*/
setTouchable(true);
/**
* 设置点击外部可以消失
*/
setTouchInterceptor(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
/**
* 判断是不是点击了外部
*/
if(event.getAction()==MotionEvent.ACTION_OUTSIDE){
return true;
}
//不是点击外部
return false;
}
});
/**
* 初始化View与监听器
*/
initView();
initListener();
}
private void initView() {
}
private void initListener() {
}
}