第八章：代码和XAML协调一致5

栏目: 编程工具 · 发布时间: 6年前

内容简介：Xamarin.Forms按钮响应手指点击，但您实际上可以从任何派生自View的类中获取手指点击，包括Label，BoxView和Frame。 这些点击事件不会内置到View类中，但View类会定义名为GestureRecognizers的属性。 通过向此GestureRecognizers集合添加对象来启用点击。 可以将从GestureRecognizer派生的任何类的实例添加到此集合中，但毫无疑问最有用的是TapGes？tureRecognizer。以下是在代码中将TapGestureRecogniz

点按手势

Xamarin.Forms按钮响应手指点击，但您实际上可以从任何派生自View的类中获取手指点击，包括Label，BoxView和Frame。 这些点击事件不会内置到View类中，但View类会定义名为GestureRecognizers的属性。 通过向此GestureRecognizers集合添加对象来启用点击。 可以将从GestureRecognizer派生的任何类的实例添加到此集合中，但毫无疑问最有用的是TapGes？tureRecognizer。

以下是在代码中将TapGestureRecognizer添加到BoxView的方法：

点击( 此处 )折叠或打开

  1. BoxView boxView = new BoxView
  2. {
  3.      Color = Color . Blue
  4. } ;
  5. TapGestureRecognizer tapGesture = new TapGestureRecognizer ( ) ;
  6. tapGesture . Tapped + = OnBoxViewTapped ;
  7. boxView . GestureRecognizers . Add ( tapGesture ) ;

TapGestureRecognizer还定义了NumberOfTapsRequired属性，默认值为1.将其设置为2以实现双击。

要生成Tapped事件，View对象必须将其IsEnabled属性设置为true，将其Is？Visible属性设置为true（或者根本不可见），并将其InputTransparent属性设置为false。 这些都是默认条件。

Tapped处理程序看起来就像Button的Clicked处理程序：

点击( 此处 )折叠或打开

  1. void OnBoxViewTapped ( object sender , EventArgs args )
  2. {
  3.      . . .
  4. }

如您所知，事件处理程序的sender参数通常是触发事件的对象，在本例中是TapGestureRecognizer对象。 这没什么用。 相反，Tapped处理程序的sender参数是被轻击的视图，在本例中是BoxView。 那更有用！

与Button类似，TapGestureRecognizer也定义了Command和CommandParameter属性; 这些在实现MVVM设计模式时使用，将在后面的章节中讨论。

TapGestureRecognizer还定义了名为TappedCallback和TappedCallback？参数的属性以及包含TappedCallback参数的构造函数。 这些都已弃用，不应使用。

在XAML中，您可以通过将GestureRecognizers集合表示为属性元素，将TapGestureRecognizer附加到视图：

点击( 此处 )折叠或打开

  1. < BoxView Color = "Blue" >
  2.      < BoxView . GestureRecognizers >
  3.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  4.      < / BoxView . GestureRecognizers >
  5. < / BoxView >

像往常一样，XAML比同等代码略短。

让我们制作一个受首批独立计算机游戏之一启发的程序。

这个游戏的Xamarin.Forms版本叫做MonkeyTap，因为它是一个仿制游戏。 它包含四个BoxView元素，颜色为红色，蓝色，黄色和绿色。 当游戏开始时，其中一个BoxView元素会闪烁，然后您必须点击该BoxView。 BoxView再次闪烁，然后你必须按顺序点击两个。 然后那两个闪光之后是第三个，依此类推。 （原版也有声音，但是MonkeyTap没有。）这是一场相当残酷的游戏，因为没有办法获胜。 在你输球之前，比赛一直在变得越来越难。

MonkeyTapPage.xaml文件实例化了四个BoxView元素和一个标记为“Begin”的中心的Button。

点击( 此处 )折叠或打开

  1. < ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
  2.              xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class = "MonkeyTap.MonkeyTapPage" >
  4.    < ContentPage . Padding >
  5.      < OnPlatform x:TypeArguments = "Thickness" iOS = "0, 20, 0, 0" / >
  6.    < / ContentPage . Padding >
  7.    < StackLayout >
  8.      < BoxView x:Name = "boxview0"
  9.              VerticalOptions = "FillAndExpand" >
  10.        < BoxView . GestureRecognizers >
  11.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  12.        < / BoxView . GestureRecognizers >
  13.      < / BoxView >
  14.      < BoxView x:Name = "boxview1" VerticalOptions = "FillAndExpand" >
  15.        < BoxView . GestureRecognizers >
  16.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  17.        < / BoxView . GestureRecognizers >
  18.      < / BoxView >
  19.      < Button x:Name = "startGameButton" Text = "Begin" Font = "Large" HorizontalOptions = "Center" Clicked = "OnStartGameButtonClicked" / >
  20.      < BoxView x:Name = "boxview2" VerticalOptions = "FillAndExpand" >
  21.        < BoxView . GestureRecognizers >
  22.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  23.        < / BoxView . GestureRecognizers >
  24.      < / BoxView >
  25.      < BoxView x:Name = "boxview3" VerticalOptions = "FillAndExpand" >
  26.        < BoxView . GestureRecognizers >
  27.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  28.        < / BoxView . GestureRecognizers >
  29.      < / BoxView >
  30.    < / StackLayout >
  31. < / ContentPage >

这里的所有四个BoxView元素都附有一个TapGestureRecognizer，但它们还没有作为？签名颜色。 这是在代码隐藏文件中处理的，因为颜色不会保持不变。 需要更改颜色以获得闪烁效果。

代码隐藏文件以一些常量和变量字段开头。 （你会注意到其中一个被标记为受保护;在下一章中，一个类将从这一个派生出来并且需要访问该字段。某些方法也被定义为受保护。）

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.      const int sequenceTime = 750 ; /* in msec */
  4.      protected const int flashDuration = 250 ;
  5.      const double offLuminosity = 0 . 4 ; /* somewhat dimmer */
  6.      const double onLuminosity = 0 . 75 ; /* much brighter */
  7.     BoxView [ ] boxViews ;
  8.      Color [ ] colors = { Color . Red , Color . Blue , Color . Yellow , Color . Green } ;
  9.     List < int > sequence = new List < int > ( ) ;
  10.      int sequenceIndex ;
  11.      bool awaitingTaps ;
  12.      bool gameEnded ;
  14.      Random random = new Random ( ) ;
  15.      public MonkeyTapPage ( )
  16.      {
  17.         InitializeComponent ( ) ;
  18.         boxViews = new BoxView [ ] { boxview0 , boxview1 , boxview2 , boxview3 } ;
  19.         InitializeBoxViewColors ( ) ;
  20.      }
  23.      void InitializeBoxViewColors ( )
  24.      {
  25.          for ( int index = 0 ; index < 4 ; index + + )
  26.             boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( offLuminosity ) ;
  27.      }
  28.     ...
  29. }

构造函数将所有四个BoxView元素放在一个数组中; 这允许它们被一个值为0,1,2和3的简单索引引用.InitializeBoxViewColors方法将所有Box？View元素设置为略微暗淡的非崩溃状态。

该程序现在正在等待用户按下“开始”按钮以启动第一个游戏。 相同的Button处理重放，因此它包含BoxView颜色的冗余初始化。 Button处理程序还准备通过清除序列列表并调用StartSequence来构建闪存的BoxView元素序列：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.      . . .
  4.     protected void OnStartGameButtonClicked ( object sender , EventArgs args )
  5.     {
  6.         gameEnded = false ;
  7.         startGameButton . IsVisible = false ;
  8.         InitializeBoxViewColors ( ) ;
  9.         sequence . Clear ( ) ;
  10.         StartSequence ( ) ;
  11.     }
  14.     void StartSequence ( )
  15.     {
  16.         sequence . Add ( random . Next ( 4 ) ) ;
  17.         sequenceIndex = 0 ;
  18.         Device . StartTimer ( TimeSpan . FromMilliseconds ( sequenceTime ) , OnTimerTick ) ;
  19.     }
  20.      . . .

StartSequence将新的随机整数添加到序列列表，将sequenceIndex初始化为0，并启动计时器。

在正常情况下，为序列列表中的每个索引调用计时器滴答处理程序，并通过调用FlashBoxView使相应的BoxView闪烁。 当序列结束时，计时器处理程序返回false，同时通过设置awaitingTaps指示用户模仿序列的时间：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.     ...
  4.      bool OnTimerTick ( )
  5.      {
  6.          if ( gameEnded )
  7.              return ( false ) ;
  8.         FlashBoxView ( sequence [ sequenceIndex ] ) ;
  9.         sequenceIndex + + ;
  10.         awaitingTaps = sequenceIndex = = sequence . Count ;
  11.         sequenceIndex = awaitingTaps ? 0 : sequenceIndex ;
  12.          return ( ! awaitingTaps ) ;
  13.      }
  16.      protected virtual void FlashBoxView ( int index )
  17.      {
  18.         boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( onLuminosity ) ;
  19.         Device . StartTimer ( TimeSpan . FromMilliseconds ( flashDuration ) , ( ) = >
  20.                     {
  21.                         if ( gameEnded )
  22.                             return ( false ) ;
  23.                        boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( offLuminosity ) ;
  24.                         return ( false ) ;
  25.                     } ) ;
  26.      }
  27.     ...
  28. }

闪光灯的持续时间仅为四分之一秒。 FlashBoxView方法首先设置亮色的亮度并创建一个“一次性”计时器，因为计时器回调方法（此处表示为lambda函数）返回false并在恢复颜色的亮度后关闭计时器。

如果游戏已经结束（仅在用户犯了错误的情况下发生），则BoxView元素的Tapped处理程序忽略点击，如果用户过早地点击而不等待程序通过序列，则结束游戏。 否则，它只是将点击的BoxView与序列中的下一个进行比较，如果正确则闪烁BoxView，否则结束游戏：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.     ...
  4.      protected void OnBoxViewTapped ( object sender , EventArgs args )
  5.      {
  6.          if ( gameEnded )
  7.              return ;
  8.          if ( ! awaitingTaps )
  9.          {
  10.             EndGame ( ) ;
  11.              return ;
  12.          }
  13.         BoxView tappedBoxView = ( BoxView ) sender ;
  14.          int index = Array . IndexOf ( boxViews , tappedBoxView ) ;
  15.          if ( index ! = sequence [ sequenceIndex ] )
  16.          {
  17.             EndGame ( ) ;
  18.              return ;
  19.          }
  20.         FlashBoxView ( index ) ;
  21.         sequenceIndex + + ;
  22.         awaitingTaps = sequenceIndex < sequence . Count ;
  23.          if ( ! awaitingTaps )
  24.             StartSequence ( ) ;
  25.      }
  28.      protected virtual void EndGame ( )
  29.      {
  30.         gameEnded = true ;
  31.          for ( int index = 0 ; index < 4 ; index + + )
  32.             boxViews [ index ] . Color = Color . Gray ;
  33.         startGameButton . Text = "Try again?" ;
  34.         startGameButton . IsVisible = true ;
  35.      }
  36. }

如果用户设法将序列“ape”一直通过，则另一个对StartSequence的调用会向序列列表添加一个新索引并开始播放该新索引。 不过，最终会有一个对EndGame的调用，它会将所有方框颜色为灰色以强调结束，并重新启用Button以便有机会再次尝试。

点击并隐藏Button后的程序：

第八章：代码和XAML协调一致5

我知道我知道。 游戏是没有声音的真正拖累。

让我们借助下一章的机会来解决这个问题。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
从“为什么”开始

从“为什么”开始

[美] 西蒙·斯涅克 / 苏西 / 海天出版社 / 2011-7 / 32.00元

影响人类的行为:要么靠操纵,要么靠感召。 操纵带来的是交易，是短期效益； 感召带来的是信任，是永续经营！ 盖茨走后，微软面临怎样的挑战？后盖茨时代，微软为何从一个希望改变世界的公司沦落为一个做软件的公司? 沃尔玛的灵魂人物过世后，一度被人们热爱的公司，遭到的竟然多是顾客、员工的反感？沃尔玛要怎样做才能重放昔日光彩？ 星巴克吸引人们购买的不是咖啡，而是理念？为什么说霍华......一起来看看 《从“为什么”开始》 这本书的介绍吧!

码农工具
正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3