Chinaunix首页 | 论坛 | 博客
  • 博客访问: 6550804
  • 博文数量: 915
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8846
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(915)

文章存档

2022年(9)

2021年(13)

2020年(10)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: Android平台

2018-07-11 21:16:52

点按手势

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=""
  2.              xmlns:x=""
  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;

  13.     Random random = new Random();
  14.     public MonkeyTapPage()
  15.     {
  16.         InitializeComponent();
  17.         boxViews = new BoxView[] { boxview0, boxview1, boxview2, boxview3 };
  18.         InitializeBoxViewColors();
  19.     }


  20.     void InitializeBoxViewColors()
  21.     {
  22.         for ( int index = 0; index < 4; index++ )
  23.             boxViews[index].Color = colors[index].WithLuminosity( offLuminosity );
  24.     }
  25.     ...
  26. }

构造函数将所有四个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.     }


  12.     void StartSequence()
  13.     {
  14.         sequence.Add( random.Next( 4 ) );
  15.         sequenceIndex = 0;
  16.         Device.StartTimer( TimeSpan.FromMilliseconds( sequenceTime ), OnTimerTick );
  17.     }
  18.     ...
  19. }

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.     }


  14.     protected virtual void FlashBoxView( int index )
  15.     {
  16.         boxViews[index].Color = colors[index].WithLuminosity( onLuminosity );
  17.         Device.StartTimer( TimeSpan.FromMilliseconds( flashDuration ), () =>
  18.                    {
  19.                        if ( gameEnded )
  20.                            return(false);
  21.                        boxViews[index].Color = colors[index].WithLuminosity( offLuminosity );
  22.                        return(false);
  23.                    } );
  24.     }
  25.     ...
  26. }

闪光灯的持续时间仅为四分之一秒。 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.     }


  26.     protected virtual void EndGame()
  27.     {
  28.         gameEnded = true;
  29.         for ( int index = 0; index < 4; index++ )
  30.             boxViews[index].Color = Color.Gray;
  31.         startGameButton.Text = "Try again?";
  32.         startGameButton.IsVisible = true;
  33.     }
  34. }

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



我知道我知道。 游戏是没有声音的真正拖累。
让我们借助下一章的机会来解决这个问题。
阅读(12078) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~