适用于 iOS 的 Xamarin Forms ListView:始终显示滚动条 [英] Xamarin Forms ListView for iOS: Always Show ScrollBar

问题描述

我有一个 ObservableCollection 类型的 ProductList，其中 Product 是下面给出的类:

I have a ProductList of type ObservableCollection<Product> where Product is a class given below:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Path { get; set; }
}

在我的 Xamarin Forms iOS 应用程序中，我有一个 ListView，它的 ItemSource 是 ProductList.当 ProductList 中的产品数量使得 ListView 的高度不足以显示所有产品时，可以通过滚动 ListView.但是，我希望始终显示仅在滚动 ListView 时显示的 ScrollBar.是否有可能或者我应该尝试除 ListViev 之外的其他 UI 以始终显示 ScrollBar.

In my Xamarin Forms iOS Application, I have a ListView whose ItemSource is ProductList. When number of Products in the ProductList is so that the height of ListView is not enough to show all of them, additional items can be reached by scrolling the ListView. However, I want the ScrollBar that is displayed only when scrolling the ListView to be displayed always. Is it possible or should I try another UI besides ListViev to be able to always show ScrollBar.

有一些适用于 Xamarin.Android 的解决方案，但我找不到适用于 iOS 应用的任何有效解决方案.

There are some solutions for Xamarin.Android but I couldn't find any effective solution for the iOS App.

非常感谢...

推荐答案

正如@Cole 所评论的，flashScrollIndicators 只能显示很短的时间.

As @Cole commented, the flashScrollIndicators can only show the indicator a short time.

因此，您必须自定义滚动指示器.

So, you have to customize a scroll indicator.

创建 ListView 的自定义渲染器并添加自定义滚动指示器，如下所示:

    public class MyListViewRenderer : ListViewRenderer
    {
        public UIView bar;
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            //Hide the default Scroll Indicator.
            Control.ShowsVerticalScrollIndicator = false;


            //Set Delegate
            CustomScrollDelegate customScrollDelegate = new CustomScrollDelegate();
            Control.Delegate = customScrollDelegate;

            //Create the background view of custom indicator.
            double frameHeight = Control.Frame.Size.Height;
            double frameWidth = Control.Frame.Size.Width;

            double barBackgroundWidth = 6;
            double statusBarHeight = 20;

            UIView barBackgroundView = new UIView();
            CGRect barBVRect = new CGRect(frameWidth - barBackgroundWidth, statusBarHeight, barBackgroundWidth, frameHeight);
            barBackgroundView.Frame = barBVRect;
            barBackgroundView.BackgroundColor = UIColor.Gray;
            barBackgroundView.Layer.CornerRadius = 2;
            barBackgroundView.Layer.MasksToBounds = true;


            //Create the bar of the custom indicator.
            bar = new UIView();
            CGRect barRect = new CGRect(1, 0, 4, 0);
            bar.Frame = barRect;
            bar.BackgroundColor = UIColor.Black;
            bar.Layer.CornerRadius = 2;
            bar.Layer.MasksToBounds = true;

            //Add the views to the superview of the tableview.
            barBackgroundView.AddSubview(bar);
            Control.Superview.AddSubview(barBackgroundView);

            //Transfer the bar view to delegate.
            customScrollDelegate.bar = bar;

        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            Console.WriteLine("End of loading!!!");
            double contentHeight = Control.ContentSize.Height;
            double frameHeight = Control.Frame.Size.Height;
            double barHeight = frameHeight * frameHeight / contentHeight;


            //Reset the bar height when the table view finishes loading.
            CGRect barRect = new CGRect(bar.Frame.X, bar.Frame.Y, bar.Frame.Width, barHeight);
            bar.Frame = barRect;
        }

    }

实现跟踪 scrollView 滚动动作的 Scrolled 委托.您可以在委托中更新指示器的位置.

Implement the Scrolled delegate which tracks the scrolling action of the scrollView. You can update the position of the indicator in the delegate.

    public class CustomScrollDelegate : UIKit.UITableViewDelegate
    {
        public UIView bar;
        double barY;

        public override void Scrolled(UIScrollView scrollView)
        {
            double y = scrollView.ContentOffset.Y;
            double contentHeight = scrollView.ContentSize.Height;
            double frameHeight = scrollView.Frame.Size.Height;

            double barHeight = frameHeight * frameHeight / contentHeight;
            barY = y / (contentHeight - frameHeight) * (frameHeight - barHeight);

            //Cut the bar Height when it over the top.
            if (barY < 0)
            {
                barHeight = barHeight + barY;
                barY = 0;
            }

            //Cut the bar height when it over the bottom.
            if (barY > (frameHeight - barHeight))
            {
               barHeight = barHeight - (barY - (frameHeight - barHeight));
            }

            //Reset the barView rect. Let's move!!!
            CGRect barRect = new CGRect(bar.Frame.X, barY, bar.Frame.Width, barHeight);
            bar.Frame = barRect;

        }

    }

它是这样工作的:

这篇关于适用于 iOS 的 Xamarin Forms ListView:始终显示滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！