- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
这是一篇系列博文。请关注我,学习更多.NET MAUI开发知识! 。
在之前的博文中提到这个项目,它是为音乐播放器专门开发的基于手势控制的UI界面.
此UI界面可以让用户在不看屏幕的情况下,通过手势来控制音乐播放器的各种操作,如播放、暂停、下一首、上一首.
手势来控制的交互方式适合不方便看手机屏幕时简单的音乐播放需求,在驾车、运动等场景下有较好的用户体验.
使用 .NET MAU 实现跨平台支持,本项目可运行于Android、iOS平台.
播放内核使用MatoMusic.Core,查看此博文 [MAUI 项目实战] 音乐播放器(二):播放内核 。
此项目重点关注的是手势交互UI,播放内核的实现将不再赘述.
在播放界面的8个方向,分别放置控制区域,通过拖拽圆形专辑(pan)到控制区域(pit),实现对应的控制操作。此示例实现了快进,快退,下一曲,上一曲,播放/暂停操作,pan和pit将在下一章节介绍.
拖拽平移和控制区域的关系,可以抽象成四个状态,分别是Out,In,Over,Start.
手势状态类型PanType定义如下:
public enum PanType
{
Out, In, Over, Start
}
对拖拽手势的处理,由手势容器控件PanContainer封装,实现方式将在下一章节介绍.
一次有效的控制,经过Start -> In -> Out -> Over的状态变化,并且手指释放位置是在pit的范围内.
当整个控制触发完成后,控件将触发OnfinishedChoise事件.
在页面中订阅这个事件,在事件方法中实现控制逻辑.
如上一曲操作,订阅事件后,实现如下逻辑:
private void DefaultPanContainer_OnOnfinishedChoise(object sender, PitGrid e)
{
CurrentPitView = e;
switch (CurrentPitView.PitName)
{
case "LeftPit":
MusicRelatedViewModel.PreAction(null);
break;
...
}
}
控件会将当前触发的pit传递给事件方法,通过pit的名称,可以判断当前触发的是哪个控制区域.
控件在经过pit时会启用广播事件,使用CommunityToolkit库的 WeakReferenceMessenger实现了消息机制,订阅此事件消息可以接收到控件运动的细节,在事件方法中实现自己的逻辑,如界面元素样式的改变.
public NowPlayingPage()
{
InitializeComponent();
WeakReferenceMessenger.Default.Register<PanActionArgs, string>(this, TokenHelper.PanAction, PanActionHandler);
...
}
如在拖拽开始时,显示控制区域的提示信息,拖拽结束时,隐藏提示信息.
private async void PanActionHandler(object recipient, PanActionArgs args)
{
var parentAnimation = new Animation();
Animation scaleUpAnimation1;
Animation scaleUpAnimation2;
switch (args.PanType)
{
case PanType.Over:
scaleUpAnimation1 = new Animation(v => this.PitContentLayout.Opacity = v, PitContentLayout.Opacity, 0, Easing.CubicOut);
scaleUpAnimation2 = new Animation(v => this.TitleLayout.Opacity = v, TitleLayout.Opacity, 1, Easing.CubicOut);
parentAnimation.Add(0, 1, scaleUpAnimation1);
parentAnimation.Add(0, 1, scaleUpAnimation2);
parentAnimation.Commit(this, "RestoreAnimation", 16, 250);
...
拖拽停留在左右控制区域超过一定时间,将触发“快进”或“快退” 。
播放界面拥有一个定时器,用于拖拽快进、快退功能 。
private IDispatcherTimer _dispatcherTimer;
拖拽进入控制区域时,启动定时器,停留在左右控制区域大于2s时将触发定时器Tick事件,执行快进或快退操作.
private async void PanActionHandler(object recipient, PanActionArgs args)
{
switch (args.PanType)
{
...
case PanType.In:
switch (args.CurrentPit?.PitName)
{
case "LeftPit":
_dispatcherTimer =Dispatcher.CreateTimer();
_dispatcherTimer.Interval=new TimeSpan(0, 0, 2);
_dispatcherTimer.Tick+= async (o, e) =>
{
this.TipLabel.Text = FaIcons.IconFastBackward;
this.TipTextLabel.Text = "快退";
_runCount++;
await MusicRelatedViewModel.StartFastSeeking(-2);
};
_dispatcherTimer.Start();
this.TipTextLabel.Text = "上一曲";
break;
...
_runCount是个全局变量,记录是否已经执行过快进或快退操作,当退出控制区域时,如果已经执行过快进或快退操作,将停止快进或快退操作,并将计时器停止.
case PanType.Out:
this.PitTipLayout.Children.Clear();
if (this._runCount > 0)
{
MusicRelatedViewModel.EndFastSeeking();
}
if (_dispatcherTimer!=null)
{
_dispatcherTimer.Stop();
}
_runCount = 0;
this.TipTextLabel.Text = string.Empty;
break;
同理,在松手时,应该停止快进或快退操作,并将计时器停止.
case PanType.Over:
...
MusicRelatedViewModel.EndFastSeeking();
if (_dispatcherTimer!=null)
{
_dispatcherTimer.Stop();
}
_runCount = 0;
_dispatcherTimer2是控制界面进入“沉浸模式”的定时器,当界面无操作5s之后界面将进入沉浸模式,隐藏标题栏.
private void SetupFullScreenMode(int delay = 5)
{
_dispatcherTimer2 =Dispatcher.CreateTimer();
_dispatcherTimer2.Interval=new TimeSpan(0, 0, delay);
_dispatcherTimer2.Tick+= (o, e) =>
{
this.MainCircleSlider.BorderWidth = 3;
this.TitleLayout.FadeTo(0);
};
_dispatcherTimer2.Start();
}
有操作进行时,恢复到正常模式.
case PanType.Start:
...
if (_dispatcherTimer2.IsRunning)
{
_dispatcherTimer2.Stop();
}
SetupNormalMode();
break;
下一章将逐步展开手势控制的实现细节.
Github:maui-samples 。
最后此篇关于[MAUI项目实战]手势控制音乐播放器(一):概述与架构的文章就讲到这里了,如果你想了解更多关于[MAUI项目实战]手势控制音乐播放器(一):概述与架构的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我将如何向 uipickerview 添加手势事件来更改选项卡?我必须创建一个自定义类,但是,我不知道如何处理 uipickerview。我当前在 uiviews 中存在手势来执行此操作,但我在使用
我需要创建一个 Activity ,当您在屏幕上拖动手指时,显示 XY 坐标(手指移动的位置)。谁能帮帮我? 最佳答案 OnTouch 您需要为想要识别拖动的任何 View 实现一个 OnTouchL
我目前正在开发手语识别应用程序,我想在其中使用隐马尔可夫模型作为分类阶段,这意味着我将对手势/姿势进行分类以获得相关的字母或单词。 我目前已经完成了检测手的第一阶段。目前我可以获得许多可用于我的机器学
我想在我的应用程序中启用 PyQT 手势。有人有一个示例或一些简短的代码可以演示在 PyQT 应用程序中使用手势控制吗? 我尝试谷歌搜索,但只能找到一篇关于自定义手势的帖子...我还没有那么远,我只是
什么 Android Api 用于在 Android 的开始屏幕上向左或向右滚动? 最佳答案 最简单的方法是检测“Fling”手势。 android API 有一个内置的检测器,用于检测基本手势,如滑
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我讨厌 Firefox 的手势,我只想点击,但如果我的 Action 在点击过程中抖动,就会一团糟! 如何禁用 Firefox 手势? 最佳答案 您需要更改配置,您可以通过键入 about:confi
我正在构建一个iOS应用程序,该应用程序需要与在Safari中来回滑动时看到的效果相同的效果。 滑动后退时,前景面板会移开,但背面的面板也会移动一点。与Yahoo Weather应用程序中的水平滚动非
我想做一些类似默认通知状态栏的东西(可从屏幕顶部扩展)。当用户在屏幕外触摸手机并将手指向下移动时,如何检测触摸? OnTouch 监听器仅在用户在屏幕上启动时工作。 最佳答案 在 html-js 中,
我有一个简单的问题,我正在尝试为 Windows Phone 制作一款大型游戏,但我仍然遇到一个重要的瓶颈/问题/性能不佳。 我用过 mango profiler,但我没有发现任何问题,事实上它在我的
我在按照此处的手势教程进行操作时遇到了一个非常奇怪的问题:http://developer.android.com/resources/articles/gestures.html . 在 Gestu
我正在尝试创建一个简单的应用程序,用户可以在其中将手指保持在屏幕上的同时向左然后向右滑动。我想计算他们总共进行了多少次滑动,包括方向的改变。我正在使用带方向的 uiswipegesture,但它只在新
我有一个问题。有一个uiview,它是通过手势控制的(可以水平移动)。虽然这个 uiview 很小,但一切都很好。 在使用 CGAffineTransformScale 缩放它之后,奇怪的事情开始了:
如何在 UIWebview 中识别用户 touch、tap 和 double tap。是否有可用的代表,例如触摸开始等? 最佳答案 这是在webview上实现单击和双击的代码 UITapGesture
我创建了一个自定义 ScrollView 类,它使用两个 subview ,它们可以滚动(启用分页)以在屏幕上当前显示任何一个 View 。 我想做的是更改它,以便第二个 View 仅在点击特定按钮时
如何向当前事件窗口发送缩放手势?我尝试创建一个 GESTUREINFO 结构,但我不知道如何正确传递该结构。到目前为止,这是我得到的。 GESTUREINFO gi; POINT pt; ZeroMe
纽约时报有一个非常有趣的翻页功能。您可以从左向右/从右向左滑动以查看其他项目(这很容易实现)。即使您没有超过阈值, View 也会随着您的手指移动并在您抬起手指后回滚到初始 View 。他们是怎么做到
我正在开发 iOS 应用。 我添加了一个 UIPinchGestureRecognizer 来监听双指张开 Action 。 [[self view]addGestureRecognizer:[[UI
我有一个允许用户平移和放大图像的应用程序。我认为,没有太多麻烦,用户可以让自己进入一种状态,他们放大了图像的一部分,并希望将所有内容重置回“基态”(即,将所有翻译和分别重新缩放回 0 和 1)。 我正
我相信你聪明的头脑和强大的机器人技能。我有点卡住了。 我有以下情况。我创建了用于学习如何使用手势和 Canvas 的应用程序。 想法很简单,当我在屏幕上点击一次,我点击的地方应该出现气泡(R.draw
我是一名优秀的程序员,十分优秀!