您的位置:首页 > 移动开发 > Android开发

Android使用popwindow高仿IOS底部弹框

2017-01-17 15:11 260 查看
   我们使用苹果手机的时候会发现IOS中有底部弹框效果,重底部向上弹出效果,下面是通过PopWindow来实现仿IOS弹框:

效果图:



项目工程目录:



1、首页布局就一个按钮

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="点击提示" />

</RelativeLayout>


2、设置popwindow要弹出的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:id="@+id/dialog_ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#33000000"
android:gravity="bottom"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/popup_window_bg"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="选择图片"
android:textColor="#838383" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:background="#ececec" />

<TextView
android:id="@+id/tv_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:gravity="center"
android:onClick="click"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="相册"
android:textColor="#3AC0FA"
android:textSize="17sp" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ececec" />

<TextView
android:id="@+id/tv_photograph"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:gravity="center"
android:onClick="click"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="拍照"
android:textColor="#3AC0FA"
android:textSize="17sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/popup_window_bg" >

<TextView
android:id="@+id/tv_cancle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:gravity="center"
android:onClick="click"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="取消"
android:textColor="#3AC0FA"
android:textSize="17sp" />
</Li
a28c
nearLayout>
</LinearLayout>

</RelativeLayout>


3、在res文件夹下创建drawable文件夹,在drawable中创建xml文件 popup_window_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 背景色 -->
<solid android:color="#FFFFFF" />

<!-- 圆角 -->
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />

</shape>


4、在res文件夹下创建 anim文件夹,用来弹出动画调用,在anim文件夹下创建xml文件hide_to_bottom.xml和show_from_bottom.xml

hide_to_bottom.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
android:duration="200"
android:fromYDelta="0"
android:toYDelta="100%p"/>

<alpha
android:duration="200"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
</set>

show_from_bottom.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="200"
android:fromYDelta="100%p"
android:toYDelta="0"/>

<alpha
android:duration="200"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
</set>


5、在values里的styles.xml文件里加入代码:

 就是刚刚创建的2个动画文件

<style name="popupwindow_anim_style">

<!-- 指定显示的动画xml -->
<item name="android:windowEnterAnimation">@anim/show_from_bottom</item>
<!-- 指定消失的动画xml -->
<item name="android:windowExitAnimation">@anim/hide_to_bottom</item>
</style>


6、下面就是最后一步MainActivity中使用popwindow:

private	PopupWindow pw;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button bt=(Button) findViewById(R.id.button);
bt.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

showEditPhotoWindow(v);

}
});

}

private void showEditPhotoWindow(View view) {
View contentView=getLayoutInflater().inflate(R.layout.popup_window_title_image, null);
pw=new PopupWindow(contentView, getWindowManager().getDefaultDisplay().getWidth(), getWindowManager().getDefaultDisplay().getHeight(), true);
//设置popupwindow弹出动画
pw.setAnimationStyle(R.style.popupwindow_anim_style);
//设置popupwindow背景
pw.setBackgroundDrawable(new ColorDrawable());
pw.showAtLocation(getWindow().getDecorView(), Gravity.CENTER,0,0);

//处理popupwindow
popupwindowselectphoto(contentView);
}
//初始化控件和控件的点击事件
private void popupwindowselectphoto(View contentView) {
TextView tv_select_pic=(TextView) contentView.findViewById(R.id.tv_photo);
TextView tv_pai_pic=(TextView) contentView.findViewById(R.id.tv_photograph);
TextView tv_cancl=(TextView) contentView.findViewById(R.id.tv_cancle);
LinearLayout layout=(LinearLayout) contentView.findViewById(R.id.dialog_ll);
tv_select_pic.setOnClickListener(pop);
tv_pai_pic.setOnClickListener(pop);
tv_cancl.setOnClickListener(pop);
layout.setOnClickListener(pop);

}
private OnClickListener pop=new OnClickListener() {

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_photo:
Toast.makeText(MainActivity.this, "相册 ", Toast.LENGTH_SHORT).show();
break;
case R.id.tv_photograph:
Toast.makeText(MainActivity.this, "拍照 ", Toast.LENGTH_SHORT).show();
break;

case R.id.tv_cancle:
if(pw!=null){
pw.dismiss();
}
break;
//点击提示框以外的地方关闭
case R.id.dialog_ll:
if(pw!=null){
pw.dismiss();
}
break;

}

}

};

源码下载地址:Demo下载
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐