I would like UIButtons to arc around a center point.
The image below shows the end result I would like, where all of the grey elements are buttons. Optimally, I would like math that supports an arbitrary amount of buttons arced around the same center, and distribute space evenly.
Can this be done with standard elements? Do I need to create a single custom shape and use as a button? Or will I need a custom shape for each of the buttons below?
You can use CAShapeLayers, each having a path that's constructed out of concentric arcs, with a fillColor. You can achieve the gap by incrementing the angle by a delta amount for each sector.
Edit: Alternatively you can create just one path, and apply a rotation transform on copies of it around the center.
Checkout this Github - https://github.com/Planet1107/CustomShapedButtons/. I think it demonstrates exactly what you need.
Related
I need to be able to interact with a representation of a cilinder that has many different parts in it. When the users taps over on of the small rectangles, I need to display a popover related to the specific piece (form).
The next image demonstrates a realistic 3d approach. But, I repeat, I need to solve the problem, the 3d is NOT required (would be really cool though). A representation that complies the functional needs will suffice.
The info about the parts to make the drawing comes from an API (size, position, etc)
I dont need it to be realistic really. The simplest aproximation would be to show a cilinder in a 2d representation, like a rectangle made out of interactable small rectangles.
So, as I mentioned, I think there are (as I see it) two opposite approaches: Realistic or Simplified
Is there a way to achieve a nice solution in the middle? What libraries, components, frameworks that I should look into?
My research has led me to SceneKit, but I still dont know if I will be able to interact with it. Interaction is a very important part as I need to display a popover when the user taps on any small rectangle over the cylinder.
Thanks
You don't need any special frameworks to achieve an interaction like this. This effect can be achieved with standard UIKit and UIView and a little trigonometry. You can actually draw exactly your example image using 2D math and drawing. My answer is not an exact formula but involves thinking about how the shapes are defined and break the problem down into manageable steps.
A cylinder can be defined by two offset circles representing the end pieces, connected at their radii. I will use an orthographic projection meaning the cylinder doesn't appear smaller as the depth extends into the background (but you could adapt to perspective if needed). You could draw this with CoreGraphics in a UIView drawRect.
A square slice represents an angle piece of the circle, offset by an amount smaller than the length of the cylinder, but in the same direction, as in the following diagram (sorry for imprecise drawing).
This square slice you are interested in is the area outlined in solid red, outside the radius of the first circle, and inside the radius of the imaginary second circle (which is just offset from the first circle by whatever length you want the slice).
To draw this area you simply need to draw a path of the outline of each arc and connect the endpoints.
To check if a touch is inside one of these square slices:
Check if the touch point is between angle a from the origin at a.
Check if the touch point is outside the radius of the inside circle.
Check if the touch point is inside the radius of the outside circle. (Note what this means if the circles are more than a radius apart.)
To find a point to display the popover you could average the end points on the slice or find the middle angle between the two edges and offset by half the distance.
Theoretically, doing this in Scene Kit with either SpriteKit or UIKit Popovers is ideal.
However Scene Kit (and Sprite Kit) seem to be in a state of flux wherein nobody from Apple is communicating with users about the raft of issues folks are currently having with both. From relatively stable and performant Sprite Kit in iOS 8.4 to a lot of lost performance in iOS 9 seems common. Scene Kit simply doesn't seem finished, and the documentation and community are both nearly non-existent as a result.
That being said... the theory is this:
Material IDs are what's used in traditional 3D apps to define areas of an object that have different materials. Somehow these Material IDs are called "elements" in SceneKit. I haven't been able to find much more about this.
It should be possible to detect the "element" that's underneath a touch on an object, and respond accordingly. You should even be able to change the state/nature of the material on that element to indicate it's the currently selected.
When wanting a smooth, well rounded cylinder as per your example, start with a cylinder that's made of only enough segments to describe/define the material IDs you need for your "rectangular" sections to be touched.
Later you can add a smoothing operation to the cylinder to make it round, and all the extra smoothing geometry in each quadrant of unique material ID should be responsive, regardless of how you add this extra detail to smooth the presentation of the cylinder.
Idea for the "Simplified" version:
if this representation is okey, you can use a UICollectionView.
Each cell can have a defined size thanks to
collectionView:layout:sizeForItemAtIndexPath:
Then each cell of the collection could be a small rectangle representing a
touchable part of the cylinder.
and using
collectionView:(UICollectionView *)collectionView
didSelectItemAtIndexPath:(NSIndexPath *)indexPath
To get the touch.
This will help you to display the popover at the right place:
CGRect rect = [collectionView layoutAttributesForItemAtIndexPath:indexPath].frame;
Finally, you can choose the appropriate popover (if the app has to work on iPhone) here:
https://www.cocoacontrols.com/search?q=popover
Not perfect, but i think this is efficient!
Yes, SceneKit.
When user perform a touch event, that mean you knew the 2D coordinate on screen, so your only decision is to popover a view or not, even a 3D model is not exist.
First, we can logically split the requirement into two pieces, determine the touching segment, showing right "color" in each segment.
I think the use of 3D model is to determine which piece of data to show in your case if I don't get you wrong. In that case, the SCNView's hit test method will do most of work for you. What you should do is to perform a hit test, take out the hit node and the hit's local 3D coordinate of this node, you can then calculate which segment is hit by this touch and do the decision.
Now how to draw the surface of the cylinder would be the only left question, right? There are various ways to do, for example simply paint each image you need and programmatically and attach it to the cylinder's material or have your image files on disk and use as material for the cylinder ...
I think the problem would be basically solved.
I want to achieve the following by code:
Based on a circular path or arc, I need to place other views evenly around the perimeter.
Is this possible without hardcoding the frames? If so, how?
In addition to that, can I make a view to follow a path ? if so, how?
Update:
I found this answer helpful, but it seems to use a lot of code though...
Place images along a bezier path
It's easy. A view is a layer.
A layer is positioned by its anchor point. So place the layer's anchor point at the center of the circular path, and define the anchor point at a sufficient size to move the layer away from the center to lie on the desired radius.
Moreover, a layer is rotated around around its anchor point, so now just apply a rotation transform in an increment of nths of a circle, where, n is the number of views.
As you can see, I can easily draw your sub-circles evenly spaced out, given any number of desired sub-circles:
Say you have an array of points and an array of rects, and you want to do the following:
Draw a line that connects all the points in the point array, such that the parts of the line that are contained in at least one of the rects are not visible.
What is the best practice way to accomplish such a task in cocos2d ios?
This may sound like a hack, but if you are drawing the rectangles as well then you can draw them with a higher zOrder with respect to the line and the rectangles would could cover the parts of the lines they contain making those parts invisible.
Hope it helps!
Below is a screenshot from a famous structure building game.
As you can see rods are attached together with ball joints. I'm trying to achieve something similar with Cosos2d on iPhone. I've got two questions here:
Should I draw those ball joints or should I just add them as sprites?
I guess the rods are not drawn bur are rather images. But considering that the length of the rods will change depending on need, how do I make rods with different lengths from just one image?
I am not sure what would be the best approach for one. I would imagine that either way would be fine, but it would be harder to achieve whatever visual affect you want through drawing them. I think the hardest part would be making sure that they are anchored to vertices in a grid system that has the dimension that you want.
As for (2) you can always scale your image.
CCSprite *rod = [CCSprite spriteWithFile:#"rod.png"];
rod.scaleY = 2.0; //or scaleX
Then rotate and change its anchor points as needed.
Again I imagine the most difficult part would be anchoring them and positioning them correctly, so that align properly with the vertices.
I'm looking for ideas on how to draw a skinnable "button" in a game application. If I use a fixed sprite non-vector image for the button background, then I can't size the button easily. If I write code to draw a resizable button (like Windows buttons are drawn), then the programmer has to get involved -- and it makes skinning difficult. Another option is to break the button into 9 smaller images (3x3) and stretch them all -- kindof like rounded corners are done in HTML.
Is there another "easier" way? What's the best approach?
If you really want to accomplish this, the way to do it is with texture coordinates. Much like you would make a stretchable button/panel design in HTML with a table, you simply define the UV coordinates for the corners, the top stretchable area, the bottom stretchable area, the side stretchable areas, and then the middle.
For an example of this being implemented in an XNA engine (though it's a closed source engine), see this:
http://www.flatredball.com/frb/docs/index.php?title=SpriteFrame_Tutorial
Yes. I am working on an Editor. It's a XAML-like language (or OpenLaszlo-like, if you prefer) for XNA. So the buttons can be resized by the editor. The buttons might also be resized by a style sheet.
I guess you're right that it's likely that the buttons will all be the same size in a real design. But even in a window's app, you sometimes need to make a button wider to accomodate text.
It should be possible with shaders. You would probably have to do texel lookups, but it would cut down on the number of triangles in a complex UI.