Xamarin形式的Carousel View自动滑动 [英] Carousel View Auto Sliding in Xamarin Forms
本文介绍了Xamarin形式的Carousel View自动滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在页面底部有一个轮播视图".现在，我希望图像每2秒自动滚动一次.我已经实现了同样的效果，并且工作正常.
I have a Carousel View at the bottom of my page. Now i want the images to keep scrolling automatically every 2 seconds. I have implemented the same and its working fine.
`Device.StartTimer(TimeSpan.FromSeconds(2), () =>
{
SlidePosition++;
if (SlidePosition == Zoos.Count)
{
SlidePosition = 0;
}
CarouselZoos.Position = SlidePosition;
return true;
});`
现在将图像加载为L-> R，第一个图像滚动，第二个图像滚动等等.
Now images are loaded L->R, the first image scrolls, second image scrolls and so on.
在最后一张图像之后，从R-> L进行倒带动作，并再次加载第一张图像.
After the last image, A Rewind action takes place from R->L and the first image is loaded again.
我需要在没有倒带动作的情况下在最后一张图像之后显示第一张图像.
I need the 1st image to be shown after the last image without this rewind action.
推荐答案
所有可能的:-)动画.
All possible :-) animations.
"icon1.png"，"icon2.png"，"icon3.png"文件位于PCL Resources文件夹中
Files "icon1.png","icon2.png","icon3.png" are in PCL Resources folder
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ButtonRendererDemo.RollingAnimPage">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<Button x:Name="btnScaleAnim" Text="Start Scale Animations" Clicked="ButtonScaleAnim_Clicked" ></Button>
<StackLayout BackgroundColor="Aqua" >
<Image x:Name="scaleImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
</StackLayout>
<Button x:Name="btnFadeAnim" Text="Start Fade Animations" Clicked="ButtonFadeAnim_Clicked" ></Button>
<StackLayout BackgroundColor="Aqua">
<Image x:Name="fadeImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
</StackLayout>
<Button x:Name="btnFade2Anim" Text="Start Fade 2 Animations" Clicked="ButtonFade2Anim_Clicked" ></Button>
<StackLayout>
<RelativeLayout x:Name="fadeRelativeLayout" BackgroundColor="Aqua" HeightRequest="70"></RelativeLayout>
</StackLayout>
<Button x:Name="btnScrollAnim" Text="Start Scroll Animations" Clicked="ButtonScrollAnim_Clicked" ></Button>
<AbsoluteLayout BackgroundColor="Aqua" >
<Image x:Name="scrollImage1" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
<Image x:Name="scrollImage2" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
</AbsoluteLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
以及后面的代码:
namespace ButtonRendererDemo
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RollingAnimPage : ContentPage
{
Image fadeImage1, fadeImage2;
string[] images = new string[]
{
"icon1.png",
"icon2.png",
"icon3.png",
};
int nextScaleImageIndex = 0;
int nextFadeImageIndex = 0;
int nextFade2ImageIndex = 0;
int nextScrollImageIndex = 0;
public RollingAnimPage()
{
InitializeComponent();
scaleImage.Scale = 0;
fadeImage.Opacity = 0;
fadeRelativeLayout.Children.Add(fadeImage1 = new Image
{
Opacity = 0,
WidthRequest = 80,
HeightRequest = 66
},
Constraint.RelativeToParent((parent) =>
{
return parent.Width / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
})
);
fadeRelativeLayout.Children.Add(fadeImage2 = new Image
{
Opacity = 0,
WidthRequest = 80,
HeightRequest = 66
},
Constraint.RelativeToParent((parent) =>
{
return parent.Width / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
})
);
}
bool scaleAnimRunning = false;
private void ButtonScaleAnim_Clicked(object sender, EventArgs e)
{
scaleAnimRunning = !scaleAnimRunning;
btnScaleAnim.Text = scaleAnimRunning ? "Stop Scale Animation" : "Start Scale Animation";
Task.Run(() =>
{
Device.BeginInvokeOnMainThread(async () =>
{
while (scaleAnimRunning)
{
await scaleImage.ScaleTo(0, 250, Easing.Linear);
scaleImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScaleImageIndex]);
await scaleImage.ScaleTo(1, 250, Easing.Linear);
nextScaleImageIndex = ++nextScaleImageIndex % images.Length;
await Task.Delay(1000);
}
});
});
}
bool fadeAnimRunning = false;
private void ButtonFadeAnim_Clicked(object sender, EventArgs e)
{
fadeAnimRunning = !fadeAnimRunning;
btnFadeAnim.Text = fadeAnimRunning ? "Stop Fade Animation" : "Start Fade Animation";
Task.Run(() =>
{
Device.BeginInvokeOnMainThread(async () =>
{
while (fadeAnimRunning)
{
await fadeImage.FadeTo(0, 250, Easing.Linear);
fadeImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFadeImageIndex]);
await fadeImage.FadeTo(1, 250, Easing.Linear);
nextFadeImageIndex = ++nextFadeImageIndex % images.Length;
await Task.Delay(1000);
}
});
});
}
bool fade2AnimRunning = false;
bool image1Visible = false;
private void ButtonFade2Anim_Clicked(object sender, EventArgs e)
{
fade2AnimRunning = !fade2AnimRunning;
btnFade2Anim.Text = fade2AnimRunning ? "Stop Fade 2 Animation" : "Start Fade 2 Animation";
Task.Run(() =>
{
Device.BeginInvokeOnMainThread(async () =>
{
while (fade2AnimRunning)
{
if (image1Visible)
{
fadeImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
fadeImage1.FadeTo(0, 250, Easing.Linear);
await fadeImage2.FadeTo(1, 250, Easing.Linear);
}
else
{
fadeImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
fadeImage2.FadeTo(0, 250, Easing.Linear);
await fadeImage1.FadeTo(1, 250, Easing.Linear);
}
image1Visible = !image1Visible;
nextFade2ImageIndex = ++nextFade2ImageIndex % images.Length;
await Task.Delay(1000);
}
});
});
}
bool scrollAnimRunning = false;
bool scrollImage1Visible = false;
private void ButtonScrollAnim_Clicked(object sender, EventArgs e)
{
scrollAnimRunning = !scrollAnimRunning;
btnScrollAnim.Text = scrollAnimRunning ? "Stop Scroll Animation" : "Start Scroll Animation";
if (scrollAnimRunning) //anim started
{
if (scrollImage1Visible)
scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
else
scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
}
Task.Run(() =>
{
Device.BeginInvokeOnMainThread(async () =>
{
while (scrollAnimRunning)
{
if (scrollImage1Visible)
{
scrollImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
scrollImage1.TranslateTo(-scrollImage1.Width, scrollImage1.Y, 250);
await scrollImage2.TranslateTo(Width / 2 - scrollImage2.Width / 2, scrollImage2.Y, 250);
scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
}
else
{
scrollImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
scrollImage2.TranslateTo(-scrollImage2.Width, scrollImage2.Y, 250);
await scrollImage1.TranslateTo(Width / 2 - scrollImage1.Width / 2, scrollImage1.Y, 250);
scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
}
scrollImage1Visible = !scrollImage1Visible;
nextScrollImageIndex = ++nextScrollImageIndex % images.Length;
await Task.Delay(1000);
}
});
});
}
}
}
这篇关于Xamarin形式的Carousel View自动滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
