如何在Xamarin.ios(C#,Xaml)中使标签自动滚动

8ehkhllq  于 2023-09-28  发布在  iOS
关注(0)|答案(2)|浏览(118)

她是我的问题,我有一个标签(metroLabel)包括在一个BoxView(BoxLabel),谁可以显示大量的信息,超过框可以适应,所以我想使标签自动滚动从右到左,并使出现和消失的字母谁不适合在框中。现在,我已经创建了两个列表,一个是可见列表,一个是等待列表,我将字母从一个列表转移到另一个列表,但结果并不流畅,一点也不平滑。

private async void StartAnimation3()
    {
        List<char> firstQueue = new List<char>();
        List<char> secondQueue = new List<char>();
        string texteComplet = "Température bureau 20°C - 15000 lumens - Volets a 80%             ";

        foreach (char s in texteComplet)
        {
            secondQueue.Add(s);
        }

        while (true)
        {
            if (secondQueue.Count < BoxLabel.WidthRequest / 6)
            {

                if (secondQueue.Count != 0)
                {
                    char s = secondQueue[0];
                    secondQueue.RemoveAt(0);
                    firstQueue.Add(s);
                    await Task.Delay(50);
                }

                if (firstQueue.Count != 0)
                {
                    char s = firstQueue[0];
                    firstQueue.RemoveAt(0);
                    secondQueue.Add(s);
                    await Task.Delay(50);
                }
            }
            else
            {
                char s = secondQueue[0];
                secondQueue.RemoveAt(0);
                firstQueue.Add(s);
                await Task.Delay(50);
            }

            metroLabel.Text = String.Join("", secondQueue.ToArray());
            Console.WriteLine(metroLabel.Text);

        }

    }

我也试着让它工作的TranslationX的工作完美的第一个滚动,但当我试图使消失的字母与一个子字符串,同样的问题显示出来,结果是不顺利(扫视)。我认为同时使用这两种方法不是一个好主意,但如果你有想法,我把它放在这里。(数字6大约是每个字母的像素数)

for (int i = 0; i < 6; i++)
{
     metroLabel.TranslationX -= 1;
     await Task.Delay(20);
}
n1bvdmb6

n1bvdmb61#

TranslationX方法面临的问题是,当文本滚动时,它会导致可见的跳跃,并且可能看起来不平滑。这是因为每次都要将标签移动固定的像素量,这可能会导致外观不稳定。
要创建更平滑的滚动效果,可以使用更连续的动画方法。下面是如何修改代码来实现这一点:

private async Task StartSmoothScrollAnimation()
{
    string originalText = "Température bureau 20°C - 15000 lumens - Volets a 80%        ";
    metroLabel.Text = originalText; // Set the initial text
    
    while (true)
    {
        // Measure the width of the label
        double labelWidth = metroLabel.Measure(metroLabel.Width, metroLabel.Height).Request.Width;

        // Calculate the duration based on the label width and a desired scrolling speed
        double durationInSeconds = labelWidth / 50; // Adjust the speed as needed

        // Animate the TranslationX property to create a smooth scrolling effect
        await metroLabel.TranslateTo(-labelWidth, 0, (uint)(durationInSeconds * 1000), Easing.Linear);

        // Reset the position to the right of the BoxView when the scrolling is complete
        metroLabel.TranslationX = BoxLabel.Width;

        // Delay before starting the next scroll
        await Task.Delay(1000); // Adjust the delay as needed
    }
}

在这段代码中,我们使用TranslateTo方法来平滑地对标签的位置进行动画处理。我们根据标签的宽度和所需的滚动速度计算动画持续时间。动画完成后,我们将标签的位置重置到BoxView的右侧,从而创建连续滚动效果。
您可以调整速度和延迟值以实现所需的滚动行为。这种方法应该为BoxView中的标签提供更平滑、更流畅的滚动效果。

qhhrdooz

qhhrdooz2#

我明白了,如果你的BoxView不是屏幕的大小,当文本不适合BoxView时,你需要使文本消失,你可以通过使用蒙版剪裁文本或调整标签的布局来实现这一点。下面是如何修改代码以处理此场景:

private async Task StartSmoothScrollAnimation()
{
    string originalText = "Température bureau 20°C - 15000 lumens - Volets a 80%        ";
    metroLabel.Text = originalText; // Set the initial text

    // Measure the width of the BoxView
    double boxWidth = BoxLabel.Width;

    while (true)
    {
        // Measure the width of the label
        double labelWidth = metroLabel.Measure(boxWidth, metroLabel.Height).Request.Width;

        if (labelWidth > boxWidth)
        {
            // Text is too wide for the BoxView, so start scrolling

            // Calculate the duration based on the label width and a desired scrolling speed
            double durationInSeconds = labelWidth / 50; // Adjust the speed as needed

            // Animate the TranslationX property to create a smooth scrolling effect
            await metroLabel.TranslateTo(-(labelWidth - boxWidth), 0, (uint)(durationInSeconds * 1000), Easing.Linear);

            // Reset the position to the right of the BoxView when the scrolling is complete
            metroLabel.TranslationX = boxWidth;

            // Delay before starting the next scroll
            await Task.Delay(1000); // Adjust the delay as needed
        }
        else
        {
            // Text fits within the BoxView, no need to scroll
            metroLabel.TranslationX = 0;
            await Task.Delay(1000); // Adjust the delay as needed
        }
    }
}

在此代码中,我们首先测量BoxView的宽度,然后测量Label的宽度,将BoxView的宽度视为约束。如果Label的宽度超过了BoxView的宽度,我们将像以前一样启动平滑滚动动画。如果Label的宽度小于或等于BoxView的宽度,我们会将Label的位置重置到起始位置,并且不需要滚动。
这将确保文本在BoxView中平滑滚动,任何不适合BoxView的多余文本都将被隐藏。

相关问题