一、UI显示
日常生活中，我们经常会看到应用中那些提示框，有在正中的，有在底部的，这篇文章我来学习一下这两类提示框UI，主要是dialog和popuwindow。
首先上图：
1、dialog
2、popuwindow
二、代码的编写（dialog）
dialog
1、首先我们来构思一下所要显示的样式，基本上是分三个部分，①标题②内容③取消确认键。这里我使用的是layout_weight，是为了控制显示比例，易于适配屏幕。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/view_custom_alter_dialog_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="@string/view_load_gif_dialog_title"
android:textSize="@dimen/view_load_gif_title_text_size" />
<TextView
android:id="@+id/view_custom_alter_dialog_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="@string/view_load_gif_dialog_message"
android:layout_weight="2"
android:gravity="center"
android:layout_marginLeft="@dimen/view_load_gif_content_margin_left_right"
android:layout_marginRight="@dimen/view_load_gif_content_margin_left_right"
android:layout_marginBottom="@dimen/view_load_gif_content_margin_bottom"
android:textSize="@dimen/view_load_gif_content_text_size"
android:lineSpacingExtra="@dimen/view_load_gif_line_space_extra"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/activity_main_bottom_controller_bg" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:orientation="horizontal">
<TextView
android:id="@+id/view_custom_alter_dialog_cancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/app_main_color"
android:text="@string/view_random_code_dialog_cancel"
android:textSize="@dimen/view_load_gif_cancel_sure_textsize" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@color/activity_main_bottom_controller_bg" />
<TextView
android:id="@+id/view_custom_alter_dialog_sure"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/app_main_color"
android:text="@string/view_random_code_dialog_sure"
android:textSize="@dimen/view_load_gif_cancel_sure_textsize" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>2、这里我们就已经有一个基本的布局了，然后是自定义这个布局。创建一个类来继承Dialog，实现重写构造函数，然后绑定一些控件。
这里我使用的是按照获取到的手机的屏幕，来控制这个dialog的显示比例，这样可以适配的更加方便。
public class CustomAlertDialog extends Dialog {
protected View mView;
//ui
protected TextView mTextTitle,mTextContent,mTextCancel,mTextSure;
public CustomAlertDialog(Context context) {
this(context,0);
}
public CustomAlertDialog(Context context, int themeResId) {
super(context, themeResId);
mView = LayoutInflater.from(context).inflate(R.layout.view_custom_alert_dialog,null);
setContentView(mView);
initView();
//setting size
Window dialogWindow = this.getWindow();
WindowManager m = getWindow().getWindowManager();
Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用
WindowManager.LayoutParams p = dialogWindow.getAttributes(); // 获取对话框当前的参数值
//手机横竖屏时候
if (context.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){
p.height = (int) (d.getHeight() * 0.25); // 高度设置为屏幕的
p.width = (int) (d.getWidth() * 0.7); // 宽度设置为屏幕的
}else if (context.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
p.height = (int) (d.getHeight() * 0.3); // 高度设置为屏幕的
p.width = (int) (d.getWidth() * 0.4); // 宽度设置为屏幕的
}
dialogWindow.setAttributes(p);
}
private void initView() {
try{
mTextTitle = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_title);
mTextContent = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_content);
mTextCancel = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_cancel);
mTextSure = (TextView) mView.findViewById(R.id.view_custom_alter_dialog_sure);
}catch(Exception _e){
ExceptionHandler.onException(_e);
}
}
public void setText(String _title,String _content,String _cancel,String _sure){
try{
if (null != _title)
mTextTitle.setText(_title);
if (null != _content)
mTextContent.setText(_content);
if (null != _cancel)
mTextCancel.setText(_cancel);
if (null != _sure)
mTextSure.setText(_sure);
}catch(Exception _e){
ExceptionHandler.onException(_e);
}
}
public void setLeftOnclick(View.OnClickListener _onclick){
try{
mTextCancel.setOnClickListener(_onclick);
}catch(Exception _e){
ExceptionHandler.onException(_e);
}
}
public void setRightOnclick(View.OnClickListener _onclick){
try{
mTextSure.setOnClickListener(_onclick);
}catch(Exception _e){
ExceptionHandler.onException(_e);
}
}
}3、然后在代码中使用这个控件，这里我们注意一下，还要传入hemeResId的值，因为如果不传入，效果就不会那么好。
public void reDownloadResourceDialog(){
try{
final CustomAlertDialog _customAlterDialog = new CustomAlertDialog(this,R.style.random_code_dialog);
_customAlterDialog.show();
_customAlterDialog.setLeftOnclick(new View.OnClickListener() {
@Override
public void onClick(View v) {
_customAlterDialog.dismiss();
}
});
_customAlterDialog.setRightOnclick(new View.OnClickListener() {
@Override
public void onClick(View v) {
_customAlterDialog.dismiss();
ActivityActionList.this.reDownloadResources();
}
});
}catch(Exception _e){
ExceptionHandler.onException(_e);
}
}4、使用themeResId的样式，styles.xml文件中
<!--view_random_dialog-->
<style name="random_code_dialog" parent="@android:style/Theme.Dialog">
<item name="android:background">@drawable/dialog_random_code_shape</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowBackground">@android:color/transparent</item>
</style>
<!--view_random_dialog end-->外加background的样式，主要是周围显示的圆角，dialog_random_code_shape.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp" />
<solid android:color="@color/common_white" />
</shape>这里dialog的自定义先告一段落。
三、代码的编写（popuwindow）
popuwindow
1、我们也还是先定义一个布局
<?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="wrap_content"
android:orientation="vertical"
android:padding="@dimen/activity_exercise_plan_xml_padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/activity_exercise_plan_xml_height"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/plan_more_show_shape"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/activity_quit_plan_xml_show"
android:textSize="@dimen/activity_exercise_plan_xml_show_sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/activity_exercise_plan_xml_splitor"
android:background="@color/activity_main_bottom_controller_bg" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="@drawable/plan_more_quit_shape"
android:orientation="vertical">
<TextView
android:id="@+id/exercise_plan_more_quit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/activity_quit_plan_xml_quit"
android:textColor="@android:color/holo_red_light"
android:textSize="@dimen/activity_exercise_plan_xml_text_sp" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="@dimen/activity_exercise_plan_xml_space" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="@drawable/plan_more_cancel_shape"
android:orientation="vertical">
<TextView
android:id="@+id/exercise_plan_more_cancel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/activity_quit_plan_xml_cancel"
android:textColor="@android:color/holo_blue_light"
android:textSize="@dimen/activity_exercise_plan_xml_text_sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>布局的样式：
2、有了布局的样式之后，就开始为布局添加绑定。
① mPopWindowMore.showAtLocation(_view, Gravity.BOTTOM, 0, 0);是设置此popuwindow要显示的位置，这里显示在底部
②setBackgroundAlpha()的方法来使得显示popuwindow的时候，会有变暗的效果，当popuwindow消失的时候，又会恢复。bgAlpha取值为0.0-1.0
③使用mPopWindowMore.setOnDismissListener(）来监听popuwindow的消失
public void showPopwindowQuitPlan(View _view) {
View _viewPopwindow = null;
TextView _quitTextView,_cancelTextView;
try {
_viewPopwindow = LayoutInflater.from(this).inflate(R.layout.view_exercise_plan_more,null);
_quitTextView = (TextView) _viewPopwindow.findViewById(R.id.exercise_plan_more_quit);
_cancelTextView = (TextView) _viewPopwindow.findViewById(R.id.exercise_plan_more_cancel);
if (null != _viewPopwindow){
mPopWindowMore = new PopupWindow(_viewPopwindow,
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);
mPopWindowMore.setTouchable(true);
mPopWindowMore.showAtLocation(_view, Gravity.BOTTOM, 0, 0);
mPopWindowMore.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
setBackgroundAlpha(1f);
}
});
}
if (null != _quitTextView){
_quitTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//确认点击
}
});
}
if (null != _cancelTextView){
_cancelTextView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//取消点击
}
});
}
}catch (Exception _e){
ExceptionHandler.onException(_e);
}
}设置背景颜色的方法
public void setBackgroundAlpha(float bgAlpha) {
WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.alpha = bgAlpha; //0.0-1.0
getWindow().setAttributes(lp);
}
作者：llayjun 发表于2016/11/7 21:41:49 原文链接
阅读：0 评论：0 查看评论