目录
- 1、使用系统自带的样式
- 1.1 具体实现
- 1.2 效果
- 2、自定义样式的实现
- 2.1 预期效果
- 2.2 具体实现
- 2.3 相关知识
- 3 代码下载
- 4、参考
在App的实际使用中,一定会出现弹框选择的情况。如图所示:
因此非常有必须学会及使用弹框的功能,因此本次学习Xamarin.Andorid下面的弹框。下面是代码说明
1、使用系统自带的样式
1.1 具体实现
这个是最简单的,其效果就是最开始展示的效果图片的,效果还是很不错,建议使用此方式。其代码如下,
[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
private Button diaLogBtn, selfDefineBtn;//界面上的button,调用不用的dialog
private Android.App.AlertDialog alertDialog = null;
private Android.App.AlertDialog.Builder builder = null;
private EditText name, inputtype;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
//界面中其他input元素
name = FindViewById<EditText>(Resource.Id.editText1);
inputtype = FindViewById<EditText>(Resource.Id.editText2);
//界面中的按钮
diaLogBtn = FindViewById<Button>(Resource.Id.button1); //使用系统自定义
//按钮下的功能实现
diaLogBtn.Click += DiaLogBtn_Click;
}
//使用系统默认的
private void DiaLogBtn_Click(object sender, System.EventArgs e)
{
string select_string = "";
builder = new Android.App.AlertDialog.Builder(this);
string[] testData = new string[] {"选项1","选项2","选项3" }; //要在界面上展示的数据
alertDialog = builder
.SetTitle("提示")
.SetSingleChoiceItems(testData,0, (s,e) => { //表示设置的是单选框。这儿可以设置为单选、多选以及只是显示选项
select_string = testData[e.Which];
})
.SetPositiveButton("确定", (s, e) => { //确定按钮及内部方法
addData(name.Text, inputtype.Text, select_string);
})
.SetNegativeButton("关闭", (s, e) => { //界面上的关闭按钮及方法
alertDialog.Dismiss();
})
.Create();
alertDialog.Show();
}
//具体的业务方法(例如,调用API,存储到数据库中)
private void addData(string name,string type,string selected)
{
Toast.MakeText(this, "所选择的内容分别为:"+name+";"+type+";"+selected, ToastLength.Long).Show();
alertDialog.Dismiss();
}
}
在对话框的实现中,还可以设置为选项、多选框,可通过设置SetItems()
、SetMultiChoiceItems
等方法实现。
通过以上代码,就可以实现。效果如下:
1.2 效果
在界面上的text框内,录入相关内容,并在弹出的框中,选择选项后,点击保存(图2),界面会弹出text及所选文本框的内容(图3)。
图2 界面上录入的内容,并选择相应选项
图3 具体的展示效果
2、自定义样式的实现
2.1 预期效果
预期效果如下所示:
因为需要自定义窗体,所以需要对窗体进行定义。
2.2 具体实现
窗体分为上中下三个部分。因此在Resources/layout
文件夹中添加布局文件view_dialog_custom.xml
.具体代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_relative"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--头部-->
<RelativeLayout
android:id="@+id/layout_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#53cc66"
android:padding="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="提示文本"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#ffffff"
/>
<Button
android:id="@+id/btn_cancel"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:background="@drawable/btn_selector_exit" />
</RelativeLayout>
<!--中间内容-->
<LinearLayout
android:id="@+id/layout_detail"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="@+id/layout_title"
android:layout_centerInParent="true"
android:orientation="vertical"
android:background="#f1f1f1"
android:padding="20dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义对话框"
android:textColor="#04AEDA"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="作者:郑林"
android:textColor="#04AEDA"
android:textSize="18sp" />
</LinearLayout>
<!--底部按钮-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_detail"
android:orientation="horizontal"
android:background="#f1f1f1"
android:padding="5dp"
>
<Button
android:id="@+id/btn_blog"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="1"
android:background="@drawable/btn_selector_choose"
android:text="访问博客"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_marginRight="5dp"
/>
<Button
android:id="@+id/btn_close"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="1"
android:background="@drawable/btn_selector_choose"
android:text="关闭对话框"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
在布局文件中,头部中按钮的样式,引用了Resources/drawable
的btn_selector_exit.xml
文件。具体代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/exit_press"/>
<item android:drawable="@drawable/exit"/>
</selector>
在底部的按钮,同样引用了Resources/drawable
的btn_selector_choose.xml
文件,具体代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/pressed_color" />
<item android:drawable="@drawable/default_color" />
</selector>
这两个样式,其最核心的功能就是,button的press_down后,颜色发生变化。
以上就定义了样式。
下面是核心的活动定义的实现部分。
在MainActivity中,具体定义如下:
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
//界面中其他input
name = FindViewById<EditText>(Resource.Id.editText1);
inputtype = FindViewById<EditText>(Resource.Id.editText2);
//界面中的按钮
diaLogBtn = FindViewById<Button>(Resource.Id.button1); //使用系统自定义
selfDefineBtn = FindViewById<Button>(Resource.Id.button2);//使用自定义的样式
//按钮下的功能实现
diaLogBtn.Click += DiaLogBtn_Click;
selfDefineBtn.Click += SelefDefineBtn_Click;
}
//自定义样式的具体实现
private void SelefDefineBtn_Click(object sender, System.EventArgs e)
{
//加载自定的样式,使样式成为View。再将View赋给dialog
LayoutInflater layoutInflater = LayoutInflater.From(this);
var view_customer = layoutInflater.Inflate(Resource.Layout.view_dialog_custom, null, false);
builder = new Android.App.AlertDialog.Builder(this);
builder.SetView(view_customer);
builder.SetCancelable(false);
alertDialog = builder.Create();
view_customer.FindViewById(Resource.Id.btn_cancel).Click += (s, e) =>
{
Toast.MakeText(this, "对话框已关闭", ToastLength.Short).Show();
alertDialog.Dismiss();
};
view_customer.FindViewById(Resource.Id.btn_blog).Click += delegate
{
Toast.MakeText(this, "正在访问博客", ToastLength.Short).Show();
Uri uri = Uri.Parse("https://blog.csdn.net/zlbcdn");
Intent intent = new Intent(Intent.ActionView, uri);
StartActivity(intent);
alertDialog.Dismiss();
};
view_customer.FindViewById(Resource.Id.btn_close).Click += delegate
{
Toast.MakeText(this, "对话框已关闭", ToastLength.Short).Show();
alertDialog.Dismiss();
};
alertDialog.Show();
}
2.3 相关知识
在整个过程中就是使用了AlertDialog
。一般创建对话框的逻辑:
构造显示Dialog的一般流程,构造AlertDialog.Builder,然后设置各种属性,最后调用AlertDialog.Builder.create方法获取AlertDialog对象,并且create方法中会执行,构造AlertDialog,设置dialog各种属性的操作。最后我们调用Dialog.show方法展示窗口,初始化Dialog的布局文件,Window对象等,然后执行mWindowManager.addView方法,开始执行绘制View的操作,并最终将Dialog显示出来;
3 代码下载
代码下载地址:代码下载,提取码:ZLNH
4、参考
1、xamarin android alertdialog详解(几种弹出窗口)
2、【推荐***推荐】AlertDialog的六种创建方式
3、AlertDialog 详解