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

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

2015-10-27 17:45 861 查看
有图有真相哈:



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

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

另外这个界面可能不是很好看,可能不像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>


然后是buttom

<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() {
@Override
public 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,界面不好看,不像苹果也是可以滴哈=。=
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: