I'm working in Xcode 6 on tiling the iPhone background with many UIImageViews and I'd like to know if this is the most efficient solution.
I know one simple solution would be to create image views in the storyboard and cover the entire screen with them manually. I'd like to do it with code. Here's the code I have currently (5x5 is an okay size since I can scale it up or down to fill the screen with bigger or larger images):
CGRect tiles[5][5];
UIImage *tileImages[5][5];
UIImageView *tileViews[5][5];
for(int i=0;i<5;i++)
{
for(int j=0;j<5;j++)
{
tiles[i][j] = CGRectMake(50*i,50*j,50,50);
tileImages[i][j] = [UIImage imageNamed:#"tile.png"];
tileViews[i][j] = [[UIImageView alloc] initWithFrame:tiles[i][j]];
tileViews[i][j].image = tileImages[i][j];
[self.view addSubview:tileViews[i][j]];
}
}
Currently all the images are the same, but in the long haul I'm going to make them dependent on various factors.
I have read around and I know that UIImageViews are finicky. Is this the proper and memory efficient way to tile a background with UIImageViews? Is there a better way to do this? Can I manually go in after the tiles are initialized and change an image it's displaying and have it update in real time with just this?
tileView[1][2].image = [UIImage imageNamed:#"anotherTile.png"];
Thanks in advance, I just finished a basic 6-week course in IOS programming at my college so I still find myself trying to appease the Objective C Gods occasionally.
I guess my doubt would be why you need them to be image views. Drawing an image in a view or layer is so easy, and arranging views or layers in a grid is so easy; what are the image views for, when you are not really using or needing any of the power of image views?
I have several apps that display tiled images - one shows 99 bottles in a grid, one shows a grid of tile "pieces" that the user taps in matched pairs to dismiss them, one shows a grid of rectangular puzzle pieces that the user slides to swap them and get them into the right order, and one shows a grid of "cards" that the user taps in triplets to match them - and in none of those cases do I use image views. In one, they are CALayers; in the other cases they are custom UIView subclasses; but in no case do I use UIImageViews.
For something as simple as a grid of images, using UIImageViews seems, as you seem to imply, overkill. If the reason you have resorted to UIImageViews is that you don't know how to make a UIView or a CALayer draw its content, I'd say, stop and learn how to do that before you go any further.
Related
I've seen many solutions out here but they're not exactly what I'm looking for. What I'm attempting to do is have the view's background to move an image multiple times-- slowly and diagonally rather than horizontally or vertically.
From a web designing perspective, this can be achieved with a tiled bg.gif where the image gives the effect of an image moving without additional programming.
Example:
However, I'm not sure whether this is achievable within Swift programming. I'm sure alternative solutions are out there like having a single image (a smiley face) tiled to fill the view frame and have it move diagonally by incrementing it's x & y coordinates.
I'm new to iOS development and Swift yet I am learning a lot! Much help will be appreciated.
refer this two links. it will help to achieve what you want. click here and click here
Update as advised in comment : download SwiftGif and Import the Gif.swift in your project and do the following:
// Returns an animated UIImage
let myGif = UIImage.gifWithName("imggif")
// Use the UIImage in your UIImageView
let imageView = UIImageView(image: myGif)
here imggif is your gif image which shown in question. put it in your project
hope this will help :)
Frosted Glass Effect
I'm thinking of how to approach this logically..
So we take the background image ( for example )
Then, we want to add our frosted glass button to this image. Here's how it should look..
Now I know I cannot programatically blur the background image of the button, so I'll to try and do it with two images.. Background.png and Backgorund_Blurred.png.
Now, the frosted glass effect will happen on animated objects. So, as they move across the screen, it should appear that it is blurring the background image behind it, however, to achieve this I can only think of one way. But doing so is beyond my current capability.
It would have to be a background_blurred image for the UIButton for example. No scaled in any way, and the exact same size as the normal background. Then, I would have to take the buttons relative position on the normal background and append the background_blurred of the button to suit.
My first question; is this possible?
Second question; is there an easier approach?
Lastly, I've added an image to make sense of the relative position theory.
Check out the FXBlur library, it'll let you blur images/views.. I've used it successfully and sounds like it'll do what you want.
I think having two images for these assets maybe easier, but having the views blur may be better in the long run as you wouldn't have to worry about updating the images for different resolutions in the future or care about how big the button is/will be.. Also if you want to do this with more images it'll turn into a mess with all the different images to manage.. The library is simple to use, with one call you'll have a blurred image/view..
I found this UI online, the UI looks amazing, is there any tips on creating such a thing. It seems a customed UITableView.
Many Thanks!
It's a UITableView with a custom background image and what looks like custom layers with masking (for the date and tags).
Here's a library for generating tags, though you could easily just create the layers yourself. There's alot of answers on SO like this one which will explain how to mask text on a layer. The textured look on everything is because the opacity of the layers is not quite 100%.
As for the background images I'm betting the first one doesn't include the background cell and just has the transparent cutout which shows the background. The other cells most likely have the adjacent cell "background" in the background image (since cells don't overlap). Alternating backgrounds are set based on whether the indexPath.row is even or not.
The "0/2012" date on the left side looks like a UILabel that's been rotated 90 degrees and stroked.
The rest of the cell is just standard text and an image.
Right now I have a UIImageView of a tree, with various UI elements placed on top of it. I find this kind of borring to look at. What I would like to do is to have my tree blowing in the wind.
My plan is to create my animation in Blender, and then export it as a video, and use this video in place of my background UIImageView.
A) Is it possible to use a video in such a way?
B) What type of view will I need?
C) Is it possible to loop the video?
As I haven't started making the animation yet, I am flexible and would be open to other suggestions to acheive the same effect.
Thanks!
This is one way, which have a lot of images and passing these images to the UIImageView.
You have many images and save these images in an array.
backgroundImageView.animationImages = imagesArray;//pass in the array
backgroundImageView.animationRepeatCount = 0;
backgroundImageView.animationDuration = duration;//set some time.
[backgroundImageView startAnimating];
Hope this helps.. Just a suggestion
I'm working on yet another drawing app with canvas that is many times bigger than screen.
I need some advice/direction on how to that.
Basically what i want is to scroll around this big canvas, drawing only in visible region.
I was thinking of two approaches:
Have 64x64 (or whatever) "tiles" to draw on, and then on scroll just load new tiles.
Record all user strokes (points) and on scroll calculate which are in specified region, and draw them, using only screen-size canvas.
If this matters, i'm using cocos2d for prototype.
Forget the 2000x200 limitation, I have an open source project that draws 18000 x 18000 NASA images.
I suggest you break this task into two parts. First, scrolling. As was suggested by CodaFi, when you scroll you will provide CATiledLayers. Each of those will be a CGImageRef that you create - a sub image of your really huge canvas. You can then easily support zooming in and out.
The second part is interacting with the user to draw or otherwise effect the canvas. When the user stops scrolling, you then create an opaque UIView subclass, which you add as a subview to your main view, overlaying the view hosting the CATiledLayers. At the moment you need to show this view, you populate it with the proper information so it can draw that portion of your larger canvas properly (say a circle at this point of such and such a color, etc).
You would do your drawing using the drawRect: method of this overlay view. So as the user takes action that changes the view, you do a "setDisplayInRect:" as needed to force iOS to call your drawRect:.
When the user decides to scroll, you need to update your large canvas model with whatever changes the user has made, then remove the opaque overlay, and let the CATiledLayers draw the proper portions of the large image. This transition is probably the most tricky part of the process to avoid visual glitches.
Supposing you have a large array of object definitions used for your canvas. When you need to create a CGImageRef for a tile, you scan through it looking for overlap between the object's frame and the tile's frame, and only then draw those items that are required for that tile.
Many mobile devices don't support textures over 2048x2048. So I would recommend:
make your big surface out of large 2048x2048 tiles
draw only the visible part of the currently visible tile to the screen
you will need to draw up to 4 tiles per frame, in case the user has scrolled to a corner of four tiles, but make sure you don't draw anything extra if there is only one visible tile.
This is probably the most efficient way. 64x64 tiles are really too small, and will be inefficient since there will be a large repeated overhead for the "draw tile" calls.
There is a tiling example in Apples ScrollViewSuite Doesn't have anything to do with the drawing part but it might give you some ideas about how to manage the tile part of things.
You can use CATiledLayer.
See WWDC2010 session 104
But for cocos2d, it might not work.