How to create a swipe animation in blackberry cascades QML - animation

I have a listview which has a customlist component and this component has two view inside (swipeleftview and swiperightview). I have implemented the swipe handler that shows these views correctly based on swipe left and right. Currently on my swipe gesture I have hidden the other view, ie while swiping left I hide the right view and show the left view and vice versa. Now instead of hiding I need them to animate like while swiping left the swipeleftview should animate to left and at the same time swiperightview should animate to its current position and vice versa. I have checked out some animations described in cookbook but cant seem to make it work properly. Below is a code structure of my listview and its item that I created
ListView {
id: contactListView
dataModel: contactsData
listItemComponents: [
ListItemComponent {
id: homeListComponent
type: "item"
CustomListItemHomePage { //some code to display items }
}]
}
CustomListItemHomePage is a container that has swipeleft and swiperight views

Related

NSTableView selected row flickering while scrolling with arrow keys

I have a view based NSTableView and can't figure out how to work around a visual glitch where the currently selected row flickers while scrolling up or down with the arrow keys.
The selected row should appear 'glued' to either the top or bottom of the view, depending on scroll direction. The Finder shows this correct behavior in list view but a regular table view seems to not behave this way out of the box. I'm confused as to why that is and see no obvious way to circumvent it. Can anybody point me to possible causes / solutions?
Edit No. 1
A cell based NSTableView behaves in the desired way by default, so this is presumably a bug specific to the view based implementation. I don't want to use a cell based table for unrelated reasons though.
Edit No. 2
I've tried making the table view's parent view layer backed, as well as intercepting the up / down arrow keystrokes to do my own scrolling, but so far I haven't been able to eliminate the flickering.
Edit No. 3
I've created a small sample project that reproduces the issue.
It looks like the selection changes and the old and new selected rows are redrawn. Next the selected row is animated up/down. Disabling scroll animation fixes the issue. Scroll animation can be disabled by subclassing NSClipView and overriding scroll(to:).
override func scroll(to newOrigin: NSPoint) {
setBoundsOrigin(newOrigin)
}
It might have some side effects.
Edit
Copied from zrzka's solution, with some adjustments. Scroll animation is temporarily disabled when using the up arrow or down arrow key.
class TableView: NSTableView {
override func keyDown(with event: NSEvent) {
if let clipView = enclosingScrollView?.contentView as? ClipView,
(125...126).contains(event.keyCode) && // down arrow and up arrow
event.modifierFlags.intersection([.option, .shift]).isEmpty {
clipView.isScrollAnimationEnabled = false
super.keyDown(with: event)
clipView.isScrollAnimationEnabled = true
}
else {
super.keyDown(with: event)
}
}
}
class ClipView: NSClipView {
var isScrollAnimationEnabled: Bool = true
override func scroll(to newOrigin: NSPoint) {
if isScrollAnimationEnabled {
super.scroll(to: newOrigin)
} else {
setBoundsOrigin(newOrigin)
documentView?.enclosingScrollView?.flashScrollers()
}
}
}
Did you try change the view ?
scrollView.wantsLayer = true
If you used Interface Builder:
Select the scroll view
Open the View Effects Inspector (or press Cmd-Opt-8)
In the table, find the row for your scroll view and check the box.

Adding NavigationController Won't show back button

I am trying to add the "Back button" to a couple of my view to a specific view that come before them.
View A has 2 buttons, to view B and C, I want B and C (And all following views) to have the "back button", but I don't want it to appear once I'm in view A.
In this example, I'll only show what I've done with view A and B.
I added the navigation controller between A and B, and as you can see, "Shows Navigation Bar" is ticked on. The segue between A and B is "present modally".
For some reason it doesn't show in my storyboard, but view A is a tabbed view connected to a tabbarController. What am I doing wrong ?
Your root view controller (first one, basically) needs to be a UINavigationController in order to have that navigation bar and back button work natively.
Also, presenting a UIViewController modally does not show a navigation bar (and subsequently the back button). Only when you push a UIViewController onto the navigation stack will the navigation bar and back button show.
Here is an example of pushing a view controller from another view controller that is within a UINavigationController:
func buttonPressed() {
let nextViewController = UIViewController()
self.navigationController?.pushViewController(nextViewController, animated: true)
// As long as your navigation bar is not set to hidden,
// doing this will push nextViewController onto the navigation stack
// and show the back button + navigation bar.
}

Drag selecting in NSCollectionView from inside of items

I have a series of items that I am showing them in a NSCollectionView. The selection and multiple selection are both enabled.
The user can select items by dragging (i.e. marking items by drag). however this works when the user start dragging from collection view background or the space between items (and not on the items) but I want make it possible when dragging starts on the items too.
I want something like this photo if we consider text and image as a single item.
image source: http://osxdaily.com/2013/09/16/select-multiple-files-mac-os-x/
Thank you in advance.
Implement hitTest(_:) in the class of the item view to make the items "see through" for clicks. Return the collection view instead of the item view when the user clicks in the item view.
override func hitTest(_ point: NSPoint) -> NSView? {
var view = super.hitTest(point)
if view == self {
repeat {
view = view!.superview
} while view != nil && !(view is NSCollectionView)
}
return view;
}

How to use carousel View in xamarin ios

I am trying to implement Images carousel View as per the below image.
I want to display multiple images using carousel view with highlighted dots when user scroll the images (Highlight the respective dot below the image) in Xamarin IOS.
I tried with iCarousel - Xamarin Component ( iCarousel Link ) to display images with dots. Here i am able to display the images in carousel view. Can any one suggest me to resolve this issue.
You can add a UIPageControl underneath the iCarousel view:
UIPageControl pageControl = new UIPageControl(frame));
pageControl.Pages = carousel.NumberOfItems;
pageControl.CurrentPage = carousel.CurrentItemIndex;
// For some reason I needed to set the back ground color
// for ValueChanged event to fire if you want pages to
// change when the UIPageControl is tapped.
pageControl.BackgroundColor = UIColor.Black;
View.AddSubview(pageControl);
Then handle the carousel.ScrollEnd event:
carousel.ScrollEnd += (sender, e) =>
{
pageControl.CurrentPage = carousel.CurrentItemIndex;
};
And if you want to be able to change the page by tapping the UIPageControl:
pageControl.ValueChanged += (sender, e) =>
{
carousel.CurrentItemIndex = pageControl.CurrentPage;
};
With a UIPageControl, you tap on the left or right of the control to go to the previous or next page, but you can't go to a specific page by clicking a dot. See: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPageControl_Class/index.html
I added the iCarousel Component sample with the UIPageControl added here: https://github.com/jgold6/XamarinSupportSamples/tree/master/iOS-iCarouselWithPageControl

How do I show a Next button on Sencha NavigationView?

Sencha adds a nice Back button to the navigation bar. As shown below.
So my questions are:-
How can I dynamically add the Next button to the navigation bar?
How do I style the Next button to have a triangular edge, similar to what the Back button has?
You can change appearance of button to look alike forward button by setting ui : "forward" config for button.
You can add buttons to navigation bar with following way -
navigationBar : {
items:[
{
xtype:'button',
text:'Forward',
ui:'forward'
}
]
},
You can also add buttons dynamically to navigation bar from controller. First get instance of navigation view and then navigation bar. Create some buttons and add them to it.
var navBar = this.getMyNavView().getNavigationBar();
var button = Ext.create('Ext.Button', {
text: 'Button'
});
navBar.add(button);
update
Found this issue for ui : 'forward' on sencha forum. Have a look at it.
http://www.sencha.com/forum/showthread.php?253899-When-using-ui-forward-and-back-the-buttons-are-not-being-rendered-properly

Resources