I want to use an F3BarGauge ( http://www.cocoacontrols.com/controls/f3bargauge ) in my iOS app and I want to use a .storyboard for my UI design.
I managed to achieve this programmatically by writing code into the view controller's loadView: method, which creates the instance of the F3BarGauge and adds it to the view via [self.view addSubview:myBarGauge]; .
However, now I can't see the F3BarGauge at all in the preview in Interface Builder and therefor I also can't adjust the size or position of the F3BarGauge from there. I can only do this in the code. Moreover, I think it is confusing for my colleagues if I create parts of the UI elements automatically through the .storyboard and some in my own code.
I would like to find a solution for both of these disadvantages.
It is not important for me to see the actual custom UI element's content (in this case the F3BarGauge) in Interface Builder. If the frame of the F3BarGauge's area is displayed in Interface Builder and I can move and resize it, then I'm happy with the solution.
I do not have an example for this approach, because the example from the author of the F3BarGauge uses a .xib file and not a .storyboard.
I'm relatively new to iOS programming and Xcode / Interface Builder. Maybe there is a better way to achieve what I want than how I imagine my solution.
I don't think there is a way to see the F3BarGauge in IB, but you can add a UIView as a subview of your main view in IB, size and position it as you like, and then in code, add the F3BarGauge to the subview.
After Edit: Actually, after looking at the author's demo project, you can see it in IB. Just copy and paste his view from the demo project into a view controller (after deleting the default view first).
Related
Just wondering if it's possible to add a custom button to the Utilities Panel in Xcode that you can drag it into a storyboard scene and have certain aspects already set, color, font/size, gradient etc.?
You are describing a custom xib file containing a view and its subviews. You then load the xib and stick the view in your interface in code, wherever and whenever you need it. Okay, you won't be able to see the effects of that within the storyboard, but it solves the problem extremely neatly.
Another possibility, if this is just about a button and nothing else, would be a UIButton subclass where the button configures itself to have the features you want.
But there is no way to drag-and-drop a custom button from the Object library into the design canvas. What's in the Object library is what's in the Object library and you can't change that.
Does anyone know of a comprehensive tutorial on implementation of PaintCode, using variables with it, and getting the view to update. I am struggling my way through it. I have built a custom class, and linked a view controller, with a UIView, and I can see the simple graph I made. I have linked it up so that it is #IBDesignable & #IBInspectable and both work fine. I am just not sure how to pass a variable through to the UIView.
I also have absolutely no idea how to get the thing to update when the variable changes.
Any assistance in this would be great, it has taken all day so far and I feel nowhere closer to solving the issue.
I do appreciate your time and effort.
There a many tutorials in PaintCode home page and at this other website, good lucky
However to access the values you create you just need to create an outlet from the UIView to your UIViewController class and class myViewName.myVariableName = myValue
As this step by step tutorial explain
The only tutorials I've found are the PaintCode website.
There are three things that I tend to adjust when trying to add/remove parameters to make my drawings more customizable via code.
When you click on a canvas, there is a drop down menu in the inspector that allows you to include a draw method, an image method, or both when you export the style kit.
When selecting the color in the color palette, there is a drop down menu in the upper right that allows you to make the color a parameter, so that when you export, you can set the color via code.
Add a frame to the canvas and set the constraints in the inspector. These constraints are the old style layout constraints that are very annoying, but doing this inserts a rect parameter in the exported methods which you can set in the code as well.
I don't know any other good PaintCode tutorials - over and above - the tutorials suggested. But after some research, I think I know the answer to your problem:
Background before the answer: I had the same problem. For example, you have a good sized image (created by PaintCode) that works on all iPhone device except the iPhone 4S.
To solve my issue:
Open PaintCode & find the “Frame” button.
Learn a new word “Parametric”. That is what we are dealing with. When the frame changes in size, you set whether the objects inside the frame change size or stay the same.
Watch the Dynamic Shapes tutorial on the PaintCode site. All of the answers are within this short youTube video. It took 5 times of watching it until I have extracted all of the information I needed to get it to work.
If you want the more details, keep reading:
#IBDesignable
class beerViewClass: UIView {
override func drawRect(rect: CGRect) {
SecurityStyleKit.drawCarDashboard(frame: self.bounds, wageIncome: "yo!")
}
}
Notice I can set the frame size as I have multiple views of the same image. Also I can send in variables to the drawCarDashboard.
Within PaintCode, put the objects you want to scale / shrink inside the frame.
Set the Springs and Struts for each item in the frame. For example, do you want it to shrink, stay vertically centered, etc.
Export your StyleKit to Xcode.
in Xcode, using Storyboard or code, add the UIViews to your View
Controller
Add a new Swift file.
Change the blank Swift file to a subclass of UIView & add code (see example)
In storyboard view, select the views that were added.
Set the view to the class you wrote (beerView)
I hope that helps. I hope my explanation was clear.
I am trying to add a view on a UIButton inside IB. The only problem it doesn't allow me to put in inside the button only on top?
Is this not possible through IB or am I doing it wrong?
It's not possible in Interface Builder. You have to add it in code.
You should not do this:
Do Not Customize Controls by Embedding Subviews
Although it is technically possible to add subviews to the standard system controls—objects that inherit from UIControl—you should never customize them in this way. Controls that support customizations do so through explicit and well-documented interfaces in the control class itself. For example, the UIButton class contains methods for setting the title and background images for the button. Using the defined customization points means that your code will always work correctly. Circumventing these methods, by embedding a custom image view or label inside the button, might cause your application to behave incorrectly now or at some point in the future if the button’s implementation changes.
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html#//apple_ref/doc/uid/TP40009503-CH2-SW26
If you need to add a UIView on your UIButton you can achieve it in 2 different ways
The easy way is to follow Cyrille answer: you can do it programmatically because IB doesn't allow you to modify a UIBUtton adding a view on it
The hard way is to create your custom button (let me call it "MYCustomButton"), that extends a UIButton, and use it in your application. With this way when you need to modify the buttons in your interface, you can achieve it modifying the XIB of the "MYCustomButton".
I want to use a custom control in my project, specifically a horizontal picker view I found on cocoacontrols.com (http://cocoacontrols.com/platforms/ios/controls/cppickerview). I've been able to include it into my project, load data and it works very nicely.
The pickerView is setted up programatically on viewDidLoad but I'd really like to be able to use it via storyboards because I'm a using static tableView. I tried to add a UIView, set the class to the PickerView class and then set up the outlet. I builds without errors or warnings but the picker view does not appear. It only shows a white rectangle.
Anyone with experience in this? Is it possible at all or should I keep it programatically?
Thanks in advance!
Well, that's normal. CPPickerView does not seem to implement initWithCoder:... I only see an initWithFrame: in the source code, which obviously means you can only instantiate that custom UIView from code. Or you can change CPPickerView's implementation to support what you want. It's open source.
Consider the following two toolbars that are in the same project of mine:
Notice that these toolbars look different? The problem is that they were both created by dragging and dropping them into IB, and I didn't change any of there associated properties. All that I did change was adding the flex controller, and change the text on the initial UIButtonBarItem. Other than that, these Toolbars have not been modified and, furthermore, I've verified that their properties are exactly the same in the Attribute inspector.
How or why are they different? Furthermore, how can I get the first, bluish UIToolbar to look like the grey one since the available Black Opaque and Black Translucent styles look nothing like the grey one?
Am I missing something? This doesn't make any since.
I've found why this is happening but I'm a bit clueless on how to change this. See this, new question regarding a fix for this issue.
These Toolbars are changed due to internal Xib settings that are specified when the Xib is created. In the first example, when I created the UIViewController I must have unchecked the Target for iPad check box, even this is for an iPad project.
This changed the default size of the initial UIView that was in the Nib. I always cut off the statusbar and set the view to be freeform in sizing as soon as I create a UIView within a Xib file, so I can never tell by looking at my views whether they were targeted for the iPad or not.
When I created the second UIViewController object, I checked the Targeted for iPad option. Now, my toolbar is styled with a grey tone.
The lesson learned is obvious-- if you want consistency in the default style of your objects that you pull from the IB Toolbox, be sure to create your UIViewControllers, specifically targeted for the iOS device. If you've made the same mistake that I have, follow the linked question above for how to revert your UIViewController and Xib file to the other style of View Controller.