How to make a shadow between two table views? - cocoa-touch

I have two table view controllers. How can I make shadow like this?

Take a look at CALayer class from CoreAnimation framework. Here is a nice tutorial with examples: http://nachbaur.com/blog/fun-shadow-effects-using-custom-calayer-shadowpaths
Then you apply the shadow to the right tableview(however, it might be required embedding the tableview in container view)

The easy way if you don't know about core graphics is to make a gradient png and position/size it to the right of your cell, under everything else.

In UIBuilder, select the view containing the table. You may need to play around with the exact level of what you select. On the far right in the inspectors, is the View Effects inspector. There you can set a shadow, including the blur radius and offset. If you just set the shadow without either a blur radius or an offset, you won't see the shadow, since it will be directly behind your table.

You can create a drop shadow easily, using QuartzCore.
Code:
#import <QuartzCore/QuartzCore.h>
UIView *myView = <your view here>
myView.layer.shadowOffset = CGPointMake(5, 5);
myView.layer.shadowRadius = 5.0f;
That should do it.
Please note that, when setting the shadowOffset, using positive values will drop to the right and bottom, using negatives will do the opposite.

Related

How to align subviews horizontally in iOS?

In Android, when you add subviews to the horizontal LinearLayout, you would see that all the subviews would be aligned horizontally.
|subview1|subview2|subview3...
In iOS, how do I achieve this?
I have a UIView as the parent view, but when I add subviews, it would get stack on top of each other. How do you use UIView.addSubView such that all the subviews would align horizontally?
One way, that I am attempting now is changing the frames.origin.x of each subviews
for example
subview1.origin.x = 0
subview2.origin.x = subview1.origin.x + subview1.size.width
subview3.origin.x = subview2.origin.x + subview2.size.width
...
Is there better ways? thanks, and would appreciate any suggestions, or comments.
Using the Auto Layout feature, which can be done from the interface builder GUI, or else programatically:
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/AutoLayoutinCode/AutoLayoutinCode.html#//apple_ref/doc/uid/TP40010853-CH11-SW1
Yes, u r doing in right direction - you will have to change view's frame manually. there are convinient API for that:
subview1.origin.x = 0
subview2.origin.x = CGRectGetMaxX(subview1.frame);
subview3.origin.x = CGRectGetMaxX(subview2.frame);
Take into consideration that constraints are available form ios 6.0
Either:
AutoLayout as suggest in another answer if using Interface Builder (Nibs or Storyboards).
AutoResizingMasks by aligning them once and setting flexible top and bottom margins.
Manually by using UIView's center property.
CGFloat centerY = ...;
for (UIView * view in superview.subviews)
{
view.center = CGPointMake(view.center.x, centerY);
}
As of iOS 9 you can use UIStackView, which works very similarly to LinearLayout: you add views and the stack view arranges them as needed based on your sizing option. If you're using Interface Builder you can experiment with each of the options to see which one suits your needs. You can also set spacing between views in the stack view, adding some padding.
For your particular needs, use stackView.axis = UILayoutConstraintAxisHorizontal; to make your views line up horizontally.
WARNING: When adding stack view child views in code you should always use addArrangedSubview() like this:
stackView.addArrangedSubview(someView)
If you try to use plain old addSubview() it won't work correctly, because the stack view won't know to arrange it.
As for removing, you need to be careful to use stackView.removeArrangedSubview(someView) and someView.removeFromSuperview() otherwise the view won't be removed correctly.
You might find my UIStackView tutorial useful.

iOS stretch image to full screen

I have a scroll view with a image view inside. I was wondering whether it's possible to have the image inside the image view be much smaller than the resolution of the screen, and somehow be able to stretch it to fit the screen.
Set contentMode on the UIImageView and change its size.
[UIImageView setContentMode:UIViewContentModeScaleToFill];
Check the docs for more informations regarding UIViewContentMode:
http://developer.apple.com/library/ios/#documentation/uikit/reference/uiview_class/UIView/UIView.html#//apple_ref/doc/uid/TP40006816-CH3-SW69
Sure, just change the bounds of the imageView.
Am I missing something here?
Your UIImageView is within an UIScrollView I understand?
That would work by adjusting the scroll view plus adusting the image view appropriately. However that is not advisable to do. You will get lost in small errors with annoying effects.
I'd suggest to add an additional UIView that can match the bounds of the screen.
Add that view to the underlying "view" object and use the bringSubviewToFront method.
You could as well make sure that this new UIView is the first subview of the most underlying view object. You could achieve that by manipulating the subviews array structure - which I do not recommend in general wihout having fully understood everythng about the view hierarchy.
You can as well achieve that by adding the additional view at first before adding any other view. (Within IB just make sure that the new view is the topmost in the tree, coming next to the view controllers "view".) And then make it hidden until you actually need it. Then you unhide it. When it is not needed anymore then hide it again and neither delete it nor erase it from its superview.

Why I use "pan" after rotae will make view go opposite way?

Why using "pan" after rotate makes view go opposite way?
It seems these two gesture are use diffrent coordinate system? Rotation use the one is rotated,and pan use the normal one?
And if the view is rotated nearby 0' or 360 ',pan will be normal,and if the view is rotated more colse to 180',the "pan" will make view go opposite more.
Thanks.
The point is that in your handRotate method you are assigning a rotation transformation to your view. This entails a permanent (until you modify the transformation again) change in the way your view is displayed within its superview, and the rotation transformation will be always "added" to whatever other change you do to the geometrical properties of your view.
What explains the behavior you are seeing is the interplay between the position of your view and its anchor point, as explained in Layer Geometry and Transform.
In other words, the center property you are modifying when panning is the result of applying all the transforms that you have defined for your view. On the other hand, what you are trying to do when panning would require modifying the position of the view before the transformation are applied.
A way to go about this is reframing your code by using layers (CALayer) and modifying the layer position property instead of the view center. Like in:
recognizer.view.layer.position = ...
I think that this should fix it.
(You will need to import QuartzCore for that to compile).
Hope this helps.

How to move uiview on circle trajectory?

Is there any way to animate uiview moving with cicle trajectory?
You will have to create a circular path and animate your view on the path. You can use UIBezierPath to create a circular path . Here is an example that does what exactly you want.
There are a couple of options. Probably the simplest is to place your view on a parent view, and then animate rotating the parent view around its Z axis.
I guess you could also build a transform that shifts your view, then rotates it, and animate the transform to different rotation values. I'd have to tinker with that. I know the first approach would be quick and easy to set up.
As the other poster said, you could also create a keyframe animation that uses a CGPath to animate your view along a curve that approximated the shape of a circle, but that would be much more work.

Interesting Buttons

Is there a way, without having to create images of my own, to make rounded rectangle buttons look more appealing? For example, providing them with shading, or making them look three dimensional.
Have a look at this article I wrote recently: UI Polish In An Instant
It talks about using layer properties to add visual interest to your UI with relative ease.
If you want to do so, then consider creating a UIView with all your customizations enabling it for user interaction. It might help!
Using Core Animation functions you can make them a bit more exciting. First import the QuartzCore library. Then you can access properties of the view.layer.
button.layer.cornerRadius changes the rounded corners
button.layer.strokeWidth changes the border thickness
button.layer.strokeColor changes the border colour
button.layer.shadowColor use this and other shadow properties to add a nice soft drop shadow
There's a whole bunch of properties you can tweak if you check the CALayer documentation, and these work for any UIView or subclass, not just buttons.
To add a gradient, check out the CAGradientLayer. You can create one of these and append it as a sublayer to your button.layer.
There's also CAShapeLayer to add an arbitrary polytonal shape to your button, all drawn using code without any images.