• Xamarin.Andorid实现界面弹框

    目录

    在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();
   }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    在对话框的实现中，还可以设置为选项、多选框，可通过设置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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    在布局文件中，头部中按钮的样式，引用了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>

    • 1
    • 2
    • 3
    • 4
    • 5

    在底部的按钮，同样引用了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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这两个样式，其最核心的功能就是，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();
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    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 详解

  • 相关阅读:
    UniApp-Vue3踩坑记录&心得体会
    机器人操作系统ROS2学习—控制小海龟运动
    Mac安装redis
    因子特征工程：alphalens库深度解析
    MySQL数据库入门到精通6--进阶篇(锁)
    美团面试：说说Netty的零拷贝技术？
    弱网神器:quic-tun（在存在丢包的网络环境中成倍的提升 TCP 性能）
    快速搭建React TypeScript项目
    geoserver跨域问题解决
    用时半个月，终于把2020年各大公司的Java面试题精选整理成文档了
  • 原文地址：https://blog.csdn.net/zlbcdn/article/details/127931442