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

Android仿ios风格底部弹框

2017-05-31 17:19 417 查看
最近在项目中遇到一个需求,让Android的菜单类弹框和ios一样从底部弹出来,产品考虑到Android和ISO风格要统一,但是作为开发人员知道,这种是两种不同操作系统下各自的风格,虽然个人觉得有点不伦不类,但是产品与开发之间,你懂的,做就做吧,做完之后感觉效果还不错,使用起来也挺方便,所以和大家分享一下。

话不多说,先看效果:



好了 下面具体看看怎么实现的 ,我的想法是既然要实现一个菜单,那么就要考虑到它的易用性和便用性,所以要做到菜单里面的选项可以穿进去,取消按钮一般是“取消”二字,但是不排除用到这个框的时候会有一些其他功能,所以要实现所有内容都可以用参数的方式传进去。我的思路是用pop做,上面一个listview,下面一个textview,看布局:

代码是这样的:

<?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="match_parent"
android:orientation="vertical"
android:padding="@dimen/padding_lsmall" >

<ListView
android:id="@+id/pop_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="@drawable/pop_list_bg" >
</ListView>

<TextView
android:id="@+id/cancle_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/pop_cancle"
android:clickable="true"
android:gravity="center"
android:padding="16dp"
android:text="取消"
android:textColor="@color/text_color_blue"
android:textSize="@dimen/text_size_big"
android:textStyle="bold" />

</LinearLayout>
在构造方法里把需要的参数传进去:

/**
*
* @param mContext
* @param mCancleContent 取消按钮文字
* @param mItems 菜单数组
* @param mCancleAbleOutSide 是否让点击外部取消
*/
public MyPopBottom(Context mContext,String mCancleContent, String[] mItems, Boolean mCancleAbleOutSide) {
super();
this.mContext = mContext;
this.mCancleContent = mCancleContent;
this.mItems = mItems;
this.mCancleAbleOutSide = mCancleAbleOutSide;
showMyBottomPop();
}
显示方法我就先不放了,可以下载项目具体看,这里要说一下pop里面listview的适配器,因为我们的菜单数量不确定,菜单做的是圆角,所以要考虑3种情况:

第一:只有一个菜单,需要四个角都是圆角;

第二:两个菜单,这样需要上面的菜单左上和右上圆角,然后第二个左下和右下圆角;

第三:三个及以上,这种情况需要在二的基础上中间的都是直角;(写到这突然想到一句话,一生二二生三三生万物好像是这么个道理)

基于有这些情况,所以我们要对不同数量的菜单做判断来设置背景以及点击效果,当然点击效果包含于背景里面,判断是这样写的:

if (getCount() == 1) {
convertView.setBackgroundResource(R.drawable.pop_cancle);
}else {
if (position == 0) {
convertView.setBackgroundResource(R.drawable.pop_item_first_bg);
}else if (position == (mItems.length - 1)) {
convertView.setBackgroundResource(R.drawable.pop_item_last_bg);
}else {
convertView.setBackgroundResource(R.drawable.pop_item_middle_bg);
}
}


最终做到完美适配,当然点击事件我们要做到可以控,所以点击的监听不能少,这里做两个监听,listview的item,和取消按钮,先把监听定义好:
private MyPopClickListener myPopClickListener;
public void setOnMyPopClickListener(MyPopClickListener myPopClickListener){
this.myPopClickListener = myPopClickListener;
}
public interface MyPopClickListener{
public void myListItemClick(int itemPosition, String itemContent);
public void myCancleClick(String cancleContent);
}

private void disMissPop(){
if (mPopupWindow!=null && mPopupWindow.isShowing()) {
mPopupWindow.dismiss();
}
}
再分别在对应的地方设置就行了,

第一:listview的item:

convertView.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
if (myPopClickListener!=null) {
disMissPop();
myPopClickListener.myListItemClick(position, getItem(position).toString());
}
}
});
第二:取消按钮:
cancle.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
if (myPopClickListener!=null) {
disMissPop();
myPopClickListener.myCancleClick(mCancleContent);
}
}
});
这里把点击的菜单项以及取消项的文字都传回去方便以后调用的时候用,下面再看看调用,其实方法写好后调用就很简单了,完全按照你定义的思路写好了,这里只举例一个三项的例子,一个两个的同理:

findViewById(R.id.btn_three_item).setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
new MyPopBottom(mContext, "取消", new String[] { "菜单项一" ,"菜单项二", "菜单项三"}, true)
.setOnMyPopClickListener(new MyPopClickListener() {

@Override
public void myListItemClick(int itemPosition, String itemContent) {
switch (itemPosition) {
case 0:
Toast.makeText(mContext, "click" + itemContent, Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(mContext, "click" + itemContent, Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(mContext, "click" + itemContent, Toast.LENGTH_SHORT).show();
break;
}

}

@Override
public void myCancleClick(String cancleContent) {
Toast.makeText(mContext, "click" + cancleContent, Toast.LENGTH_SHORT).show();
}
});

}
});
到此已经大功告成,有没有很方便,哈哈
如果觉得好用欢迎加入qq群交流:579699145

源码下载地址:http://download.csdn.net/detail/wangyuntuan/9856856


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息