I have created a nice looking collection view with image cells inside. I wanted the cells to be round so I made maskToBounds equal to true and set the corner radius to half of the image's width. This all works fine but now I want to add shadow effects to the cells and there are 2 problems:
I want to have an outer shadow on some of the cells (which is currently being cropped off because I set masktoBounds to true...
I want t have an inner shadow effect on some other cells (they are supposed to look less highlighted), but I don't even know how to make an inner shadow...
Any help desperately appreciated,
I work with C# in Xamarin.iOS by the way, but I will also understand any other language.
Cheers!
Take a look to the UIView.Layer.ShadowX and play with the values of it I recommend to use an image instead to simulate the effect because the Layer effects will kill your device processor
Take a look at the XamSvg component. You create 2 svg with a gradient to mimics an inset and an outset. As it is an svg, it is stretchable and could be set as your cell's background to simulate your shadow.
Related
Im a little bit lost on how to go about this, im really looking for the theory behind it im not 100% sure if the title is correct or not.
Im currently working on a iOS app and im a little stuck with the progress indicator thats been designed ive attached a image of it below
as you can see when the user progresses through the stages of the challenge the background of this image fills up with white so if they are in stage 1 of a 5 stage challenge its filled 20% stage 2 40% etc.
the issue I have is im not 100% sure how to go about this, if I was doing this in HTML i would create the image with the green background and leave the area for the rabbit and shape transparent and then create a div behind it that would change its height.
should I be applying the same principle to iOS development or should I be building it in a more programatic and efficient way.
thanks all for your help
The solution you are talking about sounds fine. Many programmatic solutions would involve masking and would probably be less performant (masking is actually quite expensive), other programatic solutions involve stroking different vector paths but that would get complicated if you want to cut them all of a the same line.
So, translating your idea into views. Create a container UIView with a light green background, and add to it a white UIView and an UIImageView (in that order to get the image on top). The image view would have the green image with transparency set as its image. The white view would start of being positioned below the light green view (have a frame with a higher y value) and as the stages progress you simply shift the white view upward by modifying it's center or frame properties. (note that y increases downwards).
This may be a childish way
Make an UIImageView and add that in your view where you place your rabbit view.
Make the width and x axis value as same of your rabbit view and change the height and y-axis value as the stages completes.
Add the rabbit view above your imageview.
In this way you can have not only color of your progress you can even assign a image in future to show the progress of the different changes.
-(void)completedStage:(int)stage
{
CGRect frame=rabbitimage.frame;
bgimageview.frame= CGRectMake(rect.orgin.x,rect.frame.orgin.y+rect.frame.size.height-stage*0.2,rect.frame.size.width,rect.frame.size.height-0*2)
}
Hope this helps !!!
On my table view, I want to display small circles of certain colors that will provide context for the information. The circles should be in the location that the image would usually be in (the left hand side). Is there an easy way to do this? I was thinking that I could create a new image view and simply draw on it using some drawing routines. The problem is I don't know any of these drawing routines, or at least I don't know how to use them outside of a drawRect function.
Well, the easiest way would be to include the different images in your bundle and conditionally set them to the cell's imageView's image property in cellForRowAtIndexPath:.
However, if you're looking for alternative's you could subclass UITableViewCell, and use CAShapeLayers to draw them programmatically and add them to the cells layer in what ever position you want.
Here's an example of how to use CAShapeLayer to draw a circle:
iPhone Core Animation - Drawing a Circle
I'm working on an iPhone app which will be displaying large scrollable and zoomable surface containing a grid of pictures and text labels over them. I need to be able to change the position of pictures individually and control the opacity level of labels. I tried to accomplish these goals by using UIScrollView and Core Animation.
The subview of UIScrollView contains two main sublayers: one for displaying pictures and one for the labels. Pictures are CALayers with their contents property set to CGImage and they are added as sublayers to the pictures layer. Labels are CATextLayers and they are sublayers of the second layer. Transparency of the labels layer changes depending on the zoom scale of the scroll view.
And here is the problem: everything works fine when the labels are fully opaque or fully transparent, but when they are semitransparent scrolling starts to be jerky and FPS drops to about 35. Obviously blending of these layers slows everything down, but I couldn't find a way to fix it. I will appreciate any ideas on how to improve the performance in this situation. Maybe there is a better way to draw text labels than using CATextLayer?
Is it possible for you to merge the two "main layers" of your UIScrollView into one? Also, is it possible for you to add layers directly to UIScrollView's layer instead of adding additional ones?
I find that I get huge performance wins by reducing the number of layers that exist for the sole purpose of containing other layers.
One solution is to add a shadow to the most background layers of both image layer and text layer.
There are number of shadow properties that you can tweak i.e. shadowPath, shadowColor, shadowOffset and shadowRadius - set each of them, don't miss any. Also set yourlayer.masksToBounds = NO.
Do not forget to add yourlayer.shouldRasterize = YES because this will have better performance impact.
Whenever I move a sprite using the following code, a black border will appear around it where there shouldn't be.
var navigate1 = new lime.animation.Sequence(
new lime.animation.MoveTo(675,230).setDuration(1),
new lime.animation.MoveTo(725,200).setDuration(1),
new lime.animation.MoveTo(735,180).setDuration(1));
Is it something do with the code, or the sprite image?
Refreshing the screen in anyway (such as resizing the browser) would make the black borders disappear.
I'm not exactly sure myself, but I believe what you need to do is create two rounded rectangles with a fill, make the inner one smaller than the outer one, then place the content inside of the inner rectangle, essentially layering the elements on top of each other.
I can't remember where I gotten this answer from (it should be a mailing list for LimeJS). This problem only occurs in LimeJS and seems to be related to the auto resizing of the scene. Putting the LimeJS scene into a which has a height and width set solves the problem.
i'm trying to immitate the count-label that is used in apples mail app, which shows the count of messages in a folder / mailbox. The text color is white, and the labels background is gray/blueish with rounded corners. (screenshot)
To get the same look, i made a custom UITableViewCell for my table, and tried to style the corresponding label like this:
label.layer.cornerRadius = 10.0;
This code basically looks like the mail app. However the performance of this code seems to be really poor. i've installed the app on my iphone 3gs, and when scrolling the table, the view is moving really slow and unsmooth. when i disable the rounded corners, its running great again.
is my code somewhat wrong, or what can i do to improve performance? should i use png backgrounds rather than rounded corners? if so, what would i need to do to have the png background adjust its width according to the label width/text length? i already added code to do this and it works, but i think for png backgrounds it would just strech/distort the background image, right?
It sounds like using cornerRadius may force CALayer to do clipping, which is expensive. You can also "can" the shape as a stretchable image (which could be used as a background image on a UIView descendant) or draw it using CGPaths or UIBezierPaths.
the simplest way is you make a bakground image and use it this is simple siloution and if you want to by coding then it is difficult because UIlabel is not have redious corner