I've been Googling like crazy for a while now, and I simply can't find any answers to the question: is it possible to implement the Android List scrolling, without using an actual list UI?
I'm trying to make a grid of rectangles such as the kind you would find in a typical game app respond to finger movement in the same way that it does using Android lists (bounce on the bounds, the 'flick' effect, etc), but all of the approaches I've found involve over-complicated solutions involving extending the list, defining XML layouts, etc.
Would it not be possible to simply give an object variables for 'document' height, 'viewable' height and y-offset? I'm happy to give the delta (MS since last update) to the object on every update. It would also be good if the actual interactive region was also definable.
Additionally; are there strong advantages to using the ListView instead that I'm missing? I assume responsiveness comes into play, but I'm quite happily managing that manually at the moment.
Just use ScrollView directly, assuming you only need vertical scrolling.
Related
I'm working on a Flutter app that has features similar to whatsapp where there can be a bunch of messages that are essentially audio players. I'm using AnimatedList so the chat bubbles animate in and out.
The issue is it doesn't seem that AnimatedList supports keepAlive and I haven't come across any alternatives. I don't want the widgets to be recycled because if a message is playing and I scroll the message in and out of view, I want the message to keep playing AND animating and right now I instantiate an audio player and animation controller in each child widget. I could see this being more "optimal" if I maintained all this state outside of the child widgets (at the same level as the list) but the max amount of chat bubbles per conversation in this app is ~50 and we want to move fast instead of be optimal right now so I think this simplification is a good idea if I can keep the widgets alive.
I tried wrapping the child widgets in a KeepAlive with no luck. Below seem like my options:
There is some supported way to do this and I'm not aware of it
There is some alternative / 3rd party lib that supports this
Try using a non animated list and explore other ways to animate
Implement the state above the children
I'd be curious to hear of potential solutions from the community. Thanks!
All the proposed solutions are fine (the fourth is probably the most reliable if you need it to work quickly but not the most efficient for sure...).
Did you think about using one InheritedWidget that you would place above your animated list, which would control the audio player. (I am assuming that you only want one audio playing at a time).
So concretely, you would have an inherited widget that would expose a start(File file) method and a pause(File file) method and the duration property and a unique identifier for the current message being played. This would allow you to keep your state structure simple and still be quite efficient.
I can write a piece of code if my explanation is not clear enough .
I have an infinite scrollview in which I add images as the user scrolls. Those images have varying heights and I've been trying to come up with the best way of finding a clear space inside the current bounds of the view that would allow me to add the image view.
Is there anything built-in that would make my search more efficient?
The problem is I want the images to be sort of glued to one another with no blank space between them. Making the search through 320x480 pixels tends to be quite a CPU hog. Does anyone know an efficient method to do it?
Thanks!
It seems that you're scrolling this thing vertically (you mentioned varying image heights).
There's nothing built in to UIScrollView that will do this for you. You'll have to track your UIImageView subviews manually. You could simply maintain the max y coordinate occupied by you images as you add them.
You might consider using UITableView instead, and implementing a very customized tableView:heightForRowAtIndexPath: in your delegate. You would probably need to do something special with the actual cells as well, but it would seem to make your job a little easier.
Also, for what it's worth, you might find a way to avoid making your solution infinite. Be careful about your memory footprint! iOS will shut your app off if things get out of hand.
UPDATE
Ok, now I understand what you're going for. I had imagined that you were presenting photographs or something rectangular like that. If I were trying to cover a scroll view with UILeafs (wah wah) I would take a statistical approach. I would 'paint' leaves randomly along horizontal/vertical strips as the user scrolls. Perhaps that's what you're doing already? Whatever you're doing I think it looks good.
Now I guess that the reason you're asking is to prevent the little random white spots that show through - is that right? If I may suggest a different solution: try to color the background of your scroll view to something earthy that looks good if it shows through here and there.
Also, it occurred to me that you could use a larger template image -- something that already has a nice distribution of leaves -- with transparency all along the outside outline of the leaves but nowhere else. Then you could tile these, but with overlap, so that the alpha just shows through to the leaves below. You could have a number of these images so that it doesn't look obvious. This would take away all of the uncertainty and make your retiling very efficient.
Also, consider learning about CoreAnimation (CALayer in particular) and CoreGraphics/Quartz 2D ). Proper use of these libraries will probably yield great improvements in rendering speed.
UPDATE 2:
If your images are all 150px wide, then split your scrollview into columns and add/remove based on those (as discussed in chat).
Good luck!
All you ios architects out there, please help me choose architecture/technology for the following iphone/ipad app.
The app itself is a financial app, but we want more of a game look-and-feel of the app, so we probably don't want to use the builtin looks of the cocoa widgets. The elements on the screen will probably be some kind of blob-shaped images.
The app will essentially have five "blob"-shaped areas, spread out evenly across the screen. One of the blobs will be centered and larger than the other ones. Within each blob there will be clickable areas which will pop up "details" and menu-action blobs. These blobs are also graphics objects and must not take over the whole screen. The blobs should animate nicely when popping up. The graphics elements will have a couple of lines of text, which are generated, so the overlaying text itself cannot be part of the static background-image.
The main user interaction will be swiping within the center blob, displaying summaries of the items that are conceptually contained within the blobs underlying data store. Now and then, the user will drag and drop the item to one of the other blobs. While dragging, the item should be traced by a line and when dropping on the other blob, the item should be animated to look like it's being "sucked into" the blob.
Now, what kind of technique would you suggest for this app? Is Cocoa suitable in this scenario? Should I use a game framework like Cocos2D? All kinds of suggestions including example code snippets are most welcome.
I realize that this question might not be as straightforward and to the point as questions generally are on SO, but I hope your answers will come to use by more people than me. Thanks!
EDIT (MY SOLUTION):
I eventually ended up doing everything in UIKit, which was a lot easier than I expected.
Briefly described I used UIButtons with Custom style and an image background, which gave me full control over the visual appearance of the "items". I also found it very useful to manipulate the underlying CALayer of many of my other UIViews. It is often easier than drawing things from scratch using Core Graphics programming.
Another thing that was useful were the UIGestureRecognizer:s. I found them useful for both handling "real" gestures like swiping, longpress etc, but also for handling normal "tap" for UIView classes that aren't subclasses of UIControl. Two examples are UIImage, UILabel and UIView itself. That way I could handle taps for these simple classes. I could for example use a normal UIView, modify it's CALayer to change the look of it completely and still handle taps. Using this technique, I didn't have to subclass any views at all in my app.
The animations were pretty easy too, even though I had to use a non-public method to use "suck" animation, so my app will never pass App Store moderation. It was just a prototype anyway so I don't care.
When this app will be for real, I will probably implement it in HTML5/JavaScript wrapped by Phonegap. The reason for this is mainly reuse of existing mobile web services and also for code reuse across platforms. It will probably also be easier to hook into the existing security solution when using a webapp.
Cocos2d is great if you need to move elements around really fast as it is a layer on top of OpenGLES. I think from what you have said the UIKit will be fine, you get nice animation support, you can do some nice things with UIScrollViews to handle moving elements around etc.
If you need more detailed graphics support and lots of moving elements, particle effects etc then by all means go for Cocos2D but be aware that in Cocos2d the application works more on a scheduled update method, i.e. you get notified every 1/60th of a second to move stuff draw stuff etc, whereas with normal UIKit approach it is more event drive, i.e. I click a button and show a view etc.
How can I integrate a Scrollwheel into my application?
I'm currently using Sliders but have found them to be sometimes difficult to control exactly (for example with a linear scale from 0% to 100%). I guess they weren't designed for that purpose and are meant to be used for cases where not pitch perfect control is ok (Volume Control and the likes). However, I really need an exact way of inputting data (other than TextFields, they won't work in my case).
I figured that a Scrollwheel kind of UI Element would be perfect for me. Are there any opensourced Scrollwheels available that would fit my needs?
Horizontal, just like Sliders
Variable Start and End Values
Variable Scale
Small in height
Pretty :)
I tried using the Picker but that didn't work for me since it shows it's values inside of it, which makes it both big and not pretty to look at when used multiple times inside of one View.
If there's nothing available that fulfills my needs (described above) could someone please give me a hint on how to start effectively with creating such a UI element? Thanks!
I've finally found something which fits my needs :)
OBSlider, a subclass of UISlider which allows variable scrubbing speeds – it imitates the behavior seen while scrubbing in iPod.app.
Fulfills all my needs:
Horizontal
Variable Start and End Values
Variable Scale
Small in height
Pretty :)
I'm trying to develop a scrollable tile map in Cocos2D which uses an UIPanGestureRecognizer to do the dirty work, but while developing it, stumbled upon some problems for which I would like to ask for an advice.
The basic scrolling management works fine, it's precise and accurate and works by adding the translation recognized by the pan gesture manager to the tiles of the map. The problem is that the map is large and I just draw a small viewport of it, while I want to manage it like it's scrollable without any problem.
What I was thinking about is that, as soon as a whole row or column get out of the visible screen, it is moved to the opposite side, the corresponding texture rects are updated (I'm working entirely with a CCSpriteBatchNode), so that it will continuously update the viewport to make the whole thing work. This seems fine but I've found many problems in dealing with when to move the row/column, how to keep track of this issue (eg when pan changes direction from forth to back) and many little details which make me think that I should find a better approach.
Is there a common solution to my problem? That is: managing a scrollable viewport of a tilemap which should move over the whole map so the to the end user it seems like as if the map is infinite.
Thanks in advance
I solved my issue by developing a viewport in which rows and columns are effectively moved from left side to right side and from top side to bottom side.
This is done automatically when a new column or row enters the viewport and it's made by expanding the drawn viewport over the real one by an amount which is enough to avoid any graphical issue to the user.