UICollectionViewCompositionalLayout with group width smaller than the section width and paging - uicollectionview

I see this kind of code in each tutorial that tries to recreate the AppStore layout:
...
let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.95), heightDimension: .absolute(300)), subitems: [item])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
...
The important part is that group fractional width < 1.0. So for this example, let's say we have 3 items in that horizontal group + some other sections, just like the AppStore. Now if I scroll horizontally to the 3rd item in that horizontal group, and then I scroll down vertically, then scroll back up, the result is always the same: now the second item is centered in that group, not the 3rd one that was centered when I started scrolling down.
I also noticed that there are some strange scrolling artifacts when scrolling that group horizontally: sometimes when I drag the first item left and release, it just jumps back into the center without animation. Or when I scroll to the last item and then try to scroll even more to the right, it just bounces back to the first item.
This is really strange, looks like a bug in the UICollectionViewCompositionalLayout implementation or a combination of this + iOS version. Did anyone encounter similar issues and maybe know a workaround? I see this happening for each type of paging.
Edit: I just learned that this problem is iOS 14 specific, I tested my app on iOS 13.7 simulator and it works correctly there.

I have the same issue with scrolling right on the last item it bounces back to the penultimate item.

In my case i can not scroll fully to the last item so i've tried to set negative trailing insets for the group and it worked:
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(55))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.75), heightDimension: .estimated(55 * 3 + 16))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitem: item, count: 3)
group.interItemSpacing = .fixed(.centi)
// Here
group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: -view.bounds.width * 0.25)
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging

Related

Scrolling tab panel's Tab Bar

I have a long tabBar which is horizontal scrollable , I want the selected tab to align at left most side. For example if I select the middle the tab it should be visible at the left most side. And I have next and previous buttons to select the next and previous tabs. So if any tab right to the Left most tab is selected by clicking the prev button now it should be visible at left most side. Overall i want the selected tab to be visible at left most side.
Any help would be greatly appreciated.
I worked around it and got a solution a little trick in the activeitemchange of the tabpanel will do the task
TabPanelActiveItemChange: function (container, value, oldValue, eOpts) {
var count = container.innerItems.length;
var currentIndex = Ext.Array.indexOf(container.innerItems, value);
var tabBar = container.getTabBar();
// to keep the selected item in left or visible in smaller width screen.
var totalWidth = container.innerItems[count - 1].tab.element.getX() - container.innerItems[0].tab.element.getX() + container.innerItems[count - 1].tab.element.getWidth();
if (totalWidth > window.innerWidth) {
var widthToScroll = container.innerItems[currentIndex].tab.element.getX() - container.innerItems[0].tab.element.getX();
var scroller = tabBar.getScrollable().getScroller();
scroller.scrollTo(widthToScroll, 0, true);
}
Easiest if you have a fix size of tabButtons.
That way you could calculate on how much you have to scroll to the side.
A good start will be to set the tabBar.setScrollable({direction:'horizontal'}).
But anyways. It seems bad design for phone's or tablets. You should come up with another idea.

Need to scroll from clicked div to top of browser window. Not to top of document, using Isotope Jquery

Please take a look at my jsFiddle here
I am using jQuery Isotope plugin and I am having troubles using their itemPositionDataEnabled to be able to scroll from my clicked item to the top of whats currently visible in the browsers window.
With itemPositionDataEnabled I should be able to extract the x and y position of what ever item I'm requesting. However mine does nothing at all....
var $this = $(this),
scrollTop = $(window).scrollTop(),
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y,
distance = (itemPositionY - scrollTop);
$('html, body').stop().animate({
scrollTop: distance
}, 1000);
You have a plain and simple error in these two lines:
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y;
The second line should be:
itemPositionY = itemPosition.y;
Not sure if you're all the way there since it only seems to work on the way you want on the first click.
http://jsfiddle.net/EA8tM/90/

UIScrollView contentOffset CoreMotion Bug

I'm having a problem when I try to move the content of a UIScrollView with CoreMotion.
The thing is, I have a background with approximately 5000px, inside a container, which is inside my scrollView (is a landscape app); I already set the self.scrollView.bounces = FALSE;, my value for motion is attitude.pitch * 10.0; and when I move the content inside and it reaches the edge of the pointZero or the self.scrollView.contentSize.width it doesn't respect the bounds and keep moving in a white screen like it has no limit.
So, I set a verification (the code below), but when it reaches the pointZero it was supposed to stop but still give me a little white border. I set a NSLog and I saw that the contentOffset was still going till x =-14, like the bounce was active. The pitch value is controlling that because when the pitch value is zero the content stays at pointZero, when I raise the value of the pitch ir keep going till -14.
I think that is something wrong with my verification, if anyone can help I will be really grateful!!
self.accel = attitude.pitch *10.0;
//"pointZERO"----------------
if (self.gameArea.contentOffset.x <= self.gameArea.frame.origin.x) {
NSLog(#"%2.f",self.gameArea.contentOffset.x);
self.gameArea.contentOffset = CGPointZero;
} else {
self.gameArea.contentOffset = CGPointMake(self.gameArea.contentOffset.x + self.accel,0.0);
}
//"END OF SCREEN"------------------------
if (self.gameArea.contentOffset.x + self.gameArea.frame.size.width >= self.gameArea.contentSize.width) {
NSLog(#"%2.f",self.gameArea.contentOffset.x);
self.gameArea.contentOffset = CGPointMake(self.gameArea.contentSize.width - self.gameArea.frame.size.width ,0.0);
} else {
self.gameArea.contentOffset = CGPointMake(self.gameArea.contentOffset.x + self.accel,0.0);
}

Sencha Touch: After scrolling a panel using a button tap it back to initial position again when scroll end

I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id

How to add and delete a view in UIscrollview at runtime?

My project needs to add and delete a uiwebview to uiscrollview at runtime. Means, when we scroll it horizontally (left or right) when paging is enabled, then a new view get added to the uiscrollview and it traverse to it.
Is it possible to detect the left or right scrolling in uiscrollview?
Plz tell me the best possible solution, sample code or any tutorial.
Thanks in advance
In such cases, we should have paging enabled in our scroll view.
Lets say you have scroll view of size 320x480, and it is supposed to show 10 pages, where size of each page is 320x480, making content size of scroll view as 320*10 x 480.
The best way to determine the current page is by using the content offset value of the scroll view.
So, in the beginning, when scrollview is showing 1st page, its content offset would be x=0, y=0.
For 2nd page x=320, y=0.
Thus we can get the current page value by dividing the contentOffset.x by page-width.
Thus, 0/320 = 0, means 1st page. 320/320 = 1, means 2nd page, and so on.
Thus, if we have current page value with us, we can determine in which direction the scroll view is moving, as follows:
-(void) scrollViewDidScroll:(UIScrollView *)scrollView{
int currentPageOffset = currentPage * PAGE_WIDTH;
if (self.pageScrollView.contentOffset.x >= currentPageOffset + PAGE_WIDTH) {
// Scroll in right direction. Reached the next page offset.
// Settings for loading the next page.
currentPage = self.pageScrollView.contentOffset.x/PAGE_WIDTH;
}else if (self.pageScrollView.contentOffset.x <= currentPageOffset - PAGE_WIDTH) {
// Scroll in left direction. Reached the previous page offset.
// Setting for loading the previous page.
currentPage = self.pageScrollView.contentOffset.x/PAGE_WIDTH;
}
}