本文介绍如何在Android中创建类似苹果风格的弹出窗口，包括窗口动画、按钮圆角设计及点击事件处理。通过设置不同按钮的背景属性，实现了上、中、下部分按钮的圆角差异。尽管界面可能不尽完美，但提供了基本的实现思路。对于点击事件的处理，读者可自行实现。此外，文章还更新了遗漏的selector文件。
有图有真相哈：
嗯话说不用看后面，看这个窗口就可以了
然后想象一下，点击关系，从底部弹出来这个窗口，再点击一下窗口从上往下滑到底部
另外这个界面可能不是很好看，可能不像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 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() {
@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，界面不好看，不像苹果也是可以滴哈=。=
-----------------------------------------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是指的最下面那个单独的取消按钮，和其他的其实是差不多的，只是上下都是圆角而已。可以通过上面的修改得到。
感谢提醒。
扫一扫
2271
到【灌水乐园】发言
