Android开发,仿苹果的弹出窗口界面、以及窗口动画效果、窗口圆角实现。

来源:互联网 发布:c语言if语句嵌套的规定 编辑:程序博客网 时间:2024/06/05 18:10

有图有真相哈:


嗯话说不用看后面,看这个窗口就可以了

然后想象一下,点击关系,从底部弹出来这个窗口,再点击一下窗口从上往下滑到底部

另外这个界面可能不是很好看,可能不像ios的,大家可以另外修改


不像不要喷。。。


开始了

首先是界面:

<?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" >    <RadioGroup        android:id="@+id/modify_relation"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="20dp"        android:layout_marginRight="20dp"        android:layout_marginTop="10dp"        android:orientation="vertical" >        <RadioButton            android:id="@+id/relation_1"            style="@style/radiobutton_top"            android:layout_width="fill_parent"            android:layout_height="40dp"            android:text="爸爸" />        <ImageView            android:layout_width="fill_parent"            android:layout_height="0.3dp"            android:background="#AAAAAA" />        <RadioButton            android:id="@+id/relation_2"            style="@style/radiobutton_middle"            android:layout_width="fill_parent"            android:layout_height="40dp"            android:text="妈妈" />        <ImageView            android:layout_width="fill_parent"            android:layout_height="0.3dp"            android:background="#AAAAAA" />        <RadioButton            android:id="@+id/relation_3"            style="@style/radiobutton_bottom"            android:layout_width="fill_parent"            android:layout_height="40dp"            android:layout_marginBottom="10dp"            android:text="其他" />        <RadioButton            android:id="@+id/relation_dismiss"            style="@style/radiobutton"            android:layout_width="fill_parent"            android:layout_height="40dp"            android:layout_marginBottom="10dp"            android:text="取消" />    </RadioGroup>—</LinearLayout>
这里面用到了四个style,

分别是属于四个按钮的,因为要实现上部按钮是上面大圆角下面小圆角,中部按钮全部是小圆角,下部按钮上面小圆角下面大圆角,最下面单独的按钮是全部大圆角

    <style name="radiobutton">        <item name="android:background">@drawable/info_btn_selsha</item>        <item name="android:textColor">@drawable/btn_text_color_sel</item>        <item name="android:button">@null</item>        <item name="android:gravity">center</item>        <item name="android:textSize">16sp</item>        <item name="android:layout_weight">1</item>    </style>    <style name="radiobutton_top">        <item name="android:background">@drawable/info_btn_top</item>        <item name="android:textColor">@drawable/btn_text_color_sel</item>        <item name="android:button">@null</item>        <item name="android:gravity">center</item>        <item name="android:textSize">15sp</item>        <item name="android:layout_weight">1</item>    </style>    <style name="radiobutton_middle">        <item name="android:background">@drawable/info_btn_middle</item>        <item name="android:textColor">@drawable/btn_text_color_sel</item>        <item name="android:button">@null</item>        <item name="android:gravity">center</item>        <item name="android:textSize">15sp</item>        <item name="android:layout_weight">1</item>    </style>    <style name="radiobutton_bottom">        <item name="android:background">@drawable/info_btn_bottom</item>        <item name="android:textColor">@drawable/btn_text_color_sel</item>        <item name="android:button">@null</item>        <item name="android:gravity">center</item>        <item name="android:textSize">15sp</item>        <item name="android:layout_weight">1</item>    </style>

然后这里有几个@drawable属性,

首先是textColor,即文字的颜色

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true" android:color="@color/button_checked"></item>    <item android:state_checked="false" android:color="@color/button_normal"></item>    <item android:color="@color/button_normal"></item></selector>

这是我设置了点击会变色


然后是background,按钮的背景属性

首先是top的

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false"><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />        </shape></item>    <item android:state_checked="true"><shape>            <solid android:color="#6fd7da" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />        </shape></item>    <item><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />        </shape></item></selector>

然后是middle的

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false"><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item>    <item android:state_checked="true"><shape>            <solid android:color="#6fd7da" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item>    <item><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="1dp" android:bottomRightRadius="1dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item></selector>

然后是bottom

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false"><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item>    <item android:state_checked="true"><shape>            <solid android:color="#6fd7da" />            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item>    <item><shape>            <solid android:color="#E0E0E0" />            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="1dip" android:topRightRadius="1dp" />        </shape></item></selector>

这里同时设置了按钮的背景颜色和按钮的圆角

这样窗口界面的样式就完成了

接下来是在类中处理点击事件

/** * 性别修改 */private void sex_dialog() {LayoutInflater inflater = LayoutInflater.from(getActivity());View view = inflater.inflate(R.layout.act_modify_baby_sex, null);AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());RadioGroup group = (RadioGroup) view.findViewById(R.id.modify_sex);builder.setView(view);final Dialog dialog = new AlertDialog.Builder(getActivity()).show();dialog_window(view, dialog);// 给dialog设置动画以及全屏group.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (group.getCheckedRadioButtonId()) {case R.id.sex_1:send_info(2 + "", SEX, dialog);break;case R.id.sex_2:send_info(1 + "", SEX, dialog);break;case R.id.sex_dismiss:dialog.dismiss();break;}}});}

里面有个dialog_window,这是用来实现窗口弹出效果的


/** * 给dialog设置动画 以及全屏 *  * @param view * @param dialog */private void dialog_window(View view, Dialog dialog) {dialog.setCanceledOnTouchOutside(true);dialog.setContentView(view);Window window = dialog.getWindow();window.getDecorView().setPadding(0, 0, 0, 0);window.setWindowAnimations(R.style.animationDialog);WindowManager.LayoutParams params = window.getAttributes();params.width = LayoutParams.MATCH_PARENT;params.gravity = Gravity.BOTTOM;window.setAttributes(params);}

然后具体的点击事件,就自己去实现就可以了。跑来跑去,我怕有一些忘了po上来,有问题的话,留言就可以了。

再来一次,您可以喷代码,千万不要喷UI,这是我最初的App,界面不好看,不像苹果也是可以滴哈=。=


-----------------------------------------2017/3/2更新------------------------------------

经过博友提醒,有个selector文件没有上传

info_btn_selsha

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/top_bg" android:state_checked="false"><shape>            <solid android:color="#E0E0E0" />            <corners android:radius="3dip" />        </shape></item>    <item android:drawable="@drawable/top_bg" android:state_checked="true"><shape>            <solid android:color="#6fd7da" />            <corners android:radius="3dip" />        </shape></item>    <item android:drawable="@drawable/top_bg"><shape>            <solid android:color="#E0E0E0" />            <corners android:radius="3dip" />        </shape></item></selector>


selsha是指的最下面那个单独的取消按钮,和其他的其实是差不多的,只是上下都是圆角而已。可以通过上面的修改得到。
感谢提醒。


1 0
原创粉丝点击