Xamarin.Android实现界面弹框

在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/drawablebtn_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/drawablebtn_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 详解

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值