how to implement the same pattern - ios

I'm new to ios, and I've already got my design ready, now I don't know is there a best practice for me to do the following thing:
I have 1000 cards, each of it is like this:
And when I slide right, it will get the next one, I slide left it will back to the previous one
I can implement this now, but I can only implement this one by one for 1000 times.
In addition, when I click the middle of the card, it will flip horizontally, then show the translation. it's the second kind of card with different language and color.
So is there any hint for me? any loop can do it?
update
About data-drive, so I thought about database, and I search the google that there's four way of persistence in ios,
I decide to choose sqlite, is it a wise choice?
Reason:
I'm familiar with mysql, and use sqlite in rails before
sqlite is not too big.
I need to save original sentence, translate sentence, saved or not flag, additional story.

Related

How can I replicate the "Spoiler" function that most forums have, on to a Spreadsheet?

This is one of the rare cases where I don't care how or where, I just want to be able to do this. By that I mean it can be either on Google Sheets or Online Excel (because I don't have the MS Suite, I would prefer GSheets since every time I search for help on Excel, I get solutions for the Program version that uses features not in the Online one)
Basically, I want to re-create the web page of a forum... but on a spreadsheet. The reason for that is because I want to create a catalog of sorts that is related to that forum, without being restricted to the forum and to be more organized. Since I only care about the body, I just took a screenshot and essential cut a hole where the "body text" is (ideally I would like all the buttons to be images you can click and would take you the actual forum, but I'm not concerned now).
Right now, what I want to do is to preferable create a button that can hide/show text like a Spoiler button. And I don't mean the type that changes the text color to be the same as the background making it unreadable, I mean the ability to collapse/expand the text.
My current solution is using Google Sheets and I'm grouping rows and using the +/- button on the left side. That has worked pretty well so far but it has 2 glaring issues:
#1 The +/- button is all the way to the left side
#2 And that button is inaccessible to people that have "viewing only" rights to the sheet, making this kind of a pain to use for people.
For #1 I have created a "drawing" that's just a straight line going all the way to the button to the side.
And for #2, because I want to make this sheet as dumbproof as possible, I'll have to write that they'll have to duplicate the sheet in order to use it. Which is going to take me a couple of days until I make a dumbproof "guide" on how to do that.
Ultimately, currently the best solution would be to create "buttons" where each one can collapse/expand a specific grouping of rows. But even just to create buttons I have to learn scripts, which I don't know how to... I don't even know where you're supposed to write the scripts to begin with.
Currently I'm pretty satisfied with what I've made so I'm not too pressed if I don't find a better solution. No you can't look at it because it's pretty sensitive.

Swift swipe through photos randomly

Originally I had a different post, just wanted to redo it to clean it up.
This is more or less the layout I wanted to go with. Imagine the first imageview had dog pictures, the second one had cat pictures and the third one had rabbit pictures. three folders contain a group of three separate sets of pictures.
What is the best way to set it up so I can randomly swipe, lets say the first image view where it would only show pictures of dogs.
What I am asking is, is there a certain way to create the file structures or link the pictures to each image view?
I have the basics of the random (something with a 4 in it don't remember the method exactly) and the basics of swipe, just was looking for help with linking the photos and file structure.
Please let me know if this still doesn't make sense.
Thank you
EDIT
after messing with this this is where I am at:
with a very simple array basically
catsArray: [String] = ["catpic1","catpic2"......]
then I have it set up as
let randomIndex = Int(arc4random_uniform(UInt32(catArray.count)))
if (sender.direction == .Right)
{
self.catImageView.image = UIImage(named: catArray[randomIndex])
}
just me hacking things off the internet. now I am running into an issue. after a few swipes I get a null images or its just blank. Why is that?
now that I have some of this set up I am debating if I should just use parse for a server or if there is a better way.
thanks
Either approach will work. It's probably a good exercise to write both versions. You'd learn from it.
Your question is far too vague. Are you worried about memory? If so, you should not load the images into an array. Instead load the image names, and load each image as it is swiped on-screen. You might want to load the current image and the next image so it's already in memory and can be displayed without lag.
Are you talking about using a UIPageViewController? That's a good class for managing a set of pages that you can scroll through. There is a sample app from Apple called PhotoScroller that illustrates that technique, along with tiling the images so you can display large images and handle zooming and panning. (The app is written in Objective-C however.)
EDIT:
Your updates make your question a little clearer.
There are lots of ways to handle this. Here's 1.
Create 3 separate folders, one for cats, one for dogs, and one for rabbits. (in your app's documents directory, or in the bundle, if the images will be shipped with the app.)
Use NSFileManager to create 3 separate arrays of filenames. Take a look at the methods contentsOfDirectoryAtURL:includingPropertiesForKeys:options:error: and contentsOfDirectoryAtPath:error:. You should be able to make either of those work.
Then you'll need to scramble your arrays of filenames to create a randomized order. You can use one of the block-based sort methods where your block uses a random number to determine the sort order of each pair of objects.
Finally you'll need to implement the swipe to switch.
It sounds like you are beginner so this is a lot to work through. You should break the problem into pieces and tackle them one at a time.

iOS Swipe Gesture Recogniser for a quick-paced game

I'm new to the iOS development world, so I'm starting off with a game that's neither Clash of Clans or the infamous 'I'm Rich'. I know Python and HTML/CSS so I will be able to cope with computer terms, but it would be great if you would be able to explain any answers.
A pattern flashes on the screen for half a second, let's say it is 'arrow left, arrow right, arrow left' (in picture form). Then the user has to replicate the pattern (in the right order) in order to boost forward. Basically, I'm asking what would be the simplest/most effective way of programming this? It would be great if I could easily add more patterns.
One way I thought that it could be done is to have an ID for each pattern, in which there are pre-defined 'nodes' that have to be swiped in a particular order. One benefit to this idea is that I can add patterns, however it could take a while to program them. Another idea I had is to assign an 'eraser' to the user's brush and it will detect when +-95% of the pattern is swiped. However, this would allow the user to swipe in any order.
Perhaps there is something super easy that I can do, but at the moment I have no idea. It would be great if I could do this in Apple Swift, however Objective-C is not a problem.
Thank you in advance,
Will
You basically answered your own question in the title. Take a look at the UISwipeGestureRecognizer documentation. From there you'd just want to push gestures into an array and then compare to existing pattern arrays

I'd like to make it possible, when user reaches the last image to show the first one after it and so on

I've got an UIScrollView and in it different images (about 30). I'd like to make it possible, when user reaches the last image to show the first one after it and so on. And I want to implement the same feature with the first image (to go to the last one). I'd like to loop the images smoothly that user won't even notice that he is making another loop.
Here's an article on how to do it. It describe how and also include code - even if it's in Objective-C (but it should be easy to convert to C#).

Delphi: a new design of User Interface in app

I need your suggestions how to organize and make a nice, graphical user interface.
Now I have something like this:
There is a tree view (it takes a big space...) as a menu with assigned frames to each item. All frames have control buttons (a tool bar) and something from this list: list views, string grids, progress bars, memos, rich edits, web browser, color pickers, list boxes, labels, edits etc.
I don't have enough experience to create a good, easy and graphical UI, and I do not have any ideas what to make.
The most hard thing for me is I need to create a nice SDI, but the present UI is similar to a MDI (frames with lots controls are instead of windows).
So I'm trying to copy an UI from other soft: http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/ + SCREEN SHOTS. But I cannot find something appropriate for me :(
Added:
I have an idea to use a glass effect (a "menu" instead of a tree view on the left), but it looks complicatedly: buttons on a glass and buttons below (a tool bar).
Another version:
Please, advice me what to do or give me a direction. Thanks!
Consider that most monitors are now 16/10 or 16/9, i.e. not in 4/3 aspect ratio any more.
Therefore, it's not a loss of space to put a tree on the left, or even the commands toolbar on the left side instead of the top of the window. Your first screenshot was not the worse, in this aspect. I just write a log viewer with this design: the log events has the full application height.
Office 2007/2010 ribbon for instance is nice looking, but takes too much vertical space IMHO on daily use. Some users (among me) are frustrated by this ribbon. For instance, I don't find it very usable in a notebook. Greatest user interfaces gives full space to content, not commands. Chrome is a good example of this. And mobile applications tend to maximize the available space use.
Just my 2 cents.
Personally speaking, about your first screen shot, the toolbar buttons are too big. They are much too strong a presence, even at second glance.
I would reduce their size. Or, when this program targets children or touching devices, the other controls and font sizes should be enlarged.
You are trying to create a tabbed application, So I'd suggest using some sort of tab-control.
Even the Delphi default one allows you to add pictures to the tabs.
Something like this:
A few considerations:
How often is the app used?
If the app will be used very daily by your users, try to maximize usable space, i.e. make the controls as small as need be.
If the app is used rarely by your users, make the controls big and bright, label every button so things are clear, and time figuring out where is what is minimized, this also means using familiar user interface elements.
Are you targeting elephants or mice?
If you audience is computer savvy (mice), you can get away with more experiments and bling; if you are dealing with perpetual beginners you will need to stick to basic stuff.
Remember, the user interface is a contract
Make sure the controls behave as advertised. If something looks like a button make it behave like a button. Don't disguise a menu to look like a listbox/treeview.
A menu does an action (it's a hidden button), a listbox selects one item that can be acted upon.
My opinion
I dislike your initial screenshot because it tries to force a tabsheet/pagecontrol into the format of a treeview, whilst naming the items menus. This makes for a clumsy interface.
I've never seen a menu be used to switch between views, and the treeview makes for a mighty small target to hid. On top of that it allows for multiple nesting.
The tree is a concept that every programmer understands, but very few people outside that group grok, IMHO, don't use a tree in your application! and avoid the treeview.
It's a poor control to work with because:
It allows nesting > 2 a NONO in my book;
It is too small to hit with a mouse, even worse with a touchpad;
What's up with the [>] sign in front, why would I want to collapse a tree with just 1 level of nesting and when I do and the [+] is visible in front of "main menu" where on earth have my submenu items gone?
I love your last version, but
It needs text labels for every button;
Make the vertical pagecontrol, look like some sort of tabbed sheet, this will make your intent instantly clear;
I would love to see a statusbar;
Glass may look cool, but having the junk from screens below shine through your app sure makes everything look busy, not a good thing if you're trying to focus on this particular app;
Make sure to put splitters between all panels, and make sure to visually highlight the splitter by setting beveled:= true and width/height:= 5 so you can actually hit that splitter
The info panel has its own caption, a huge waste of space. It's bad enough that every window has a title bar that does almost nothing, don't multiply non-interactive space.
Finally
Do as David says and buy a copy of about face, it's the best book on UI design I've seen by far. http://www.cooper.com/#about:books
First picture is the best version for standard desktops with mouse.
Third picture will be good for tablets with their touch screens. But it needs some improvements. Currently I can't see on which page I am now, even more: there are no signs that those buttons actually switch pages. I think, you need some sort of tabcontrol here.

Resources