Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ScrollView allow content overflow

Goal

I am trying to allow a scrollview to overflow (not clip its children). I have this working with a carousel view but cannot get the same result with a scrollview.

The idea of this is to center the scrollview and allow overflow so the content can look centered (being used as tabs).


Code

Use of the scrollview in Xamarin Forms:

 var scrollView = new ScrollView
 {
    WidthRequest = 200,
    HorizontalOptions = LayoutOptions.Center,
    Orientation = ScrollOrientation.Horizontal,
    Content = scrollViewContent,
    IsClippedToBounds = false
 };

This is my custom renderer for the scrollview:

public class CenteredScrollViewRenderer : ScrollViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || this.Element == null)
            return;

        if (e.OldElement != null)
            e.OldElement.PropertyChanged -= OnElementPropertyChanged;

        e.NewElement.PropertyChanged += OnElementPropertyChanged;


    }

    protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {

        if (ChildCount > 0)
        {
            GetChildAt(0).HorizontalScrollBarEnabled = false;
            GetChildAt(0).VerticalScrollBarEnabled = false;
            GetChildAt(0).OverScrollMode = OverScrollMode.Never;

            // Try and disable clip
            ((ViewGroup)GetChildAt(0)).SetClipToPadding(false);
            ((ViewGroup)GetChildAt(0)).SetClipChildren(false);
        }
    }
}

Other attempts

I have also created a function to go through ALL parents to disable clipping just to see if it was a parent causing a problem. This still has not worked.

So how do we allow the scrollview content to overflow outside of its bounds?

Note: I am tagging android as this could be a simple misunderstanding of the native control.


Update:

Tried my best to make an image of the desired effect I am looking for. ScrollView

So the big blue border is the scrollview in the middle of the contentview. The scroll content is only visible when inside the scrollview itself (how it always works). I am trying to not clip the content so can always see all content (overflow), not just inside the scrollview.


Update 2:

The following link may explain the effect I am after better then I have. Please take a look, any question let me know.

Paging-enabled UIScrollView With Previews

Note: I have linked the touch events up so it is only disabling clipping bounds that I need to find a fix for.

like image 514
Ruddy Avatar asked Oct 30 '17 11:10

Ruddy


1 Answers

You could try the same approach as with elevation / shadow clipping.

Add a parent layout, add padding to the parent layout (to achieve the centered item) and set clipToPadding=false in the parent layout.

Since the question is about Xamarin, I'll just mention that for native Android development you could achieve the same center-locked effect with a RecyclerView and an implementation of the SnapHelper class.

like image 107
damian Avatar answered Nov 02 '22 14:11

damian