I started using Xcode with storyboards and do not normally change attributes of objects using swift. However, I have two UITextView objects defined in my storyboard and both are defined in storyboard with width 316 and height 36. I am attempting to resize the height to contain the different text strings but I am having problems with the different width of the textviews at runtime. When I examined the storyboard code I found that the frames are different. One is w 271 and h 117 whereas the other is w 240 and h 128 h. (Their x and y settings are also different.)
Can anyone explain how I can fix this in storyboard? How does it get set in the first place? Will I have to change the storyboard values manually? Below are examples:
<textView autoresizesSubviews="NO" opaque="NO" clearsContextBeforeDrawing="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" ambiguous="YES" misplaced="YES" bounces="NO" scrollEnabled="NO" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" delaysContentTouches="NO" canCancelContentTouches="NO" bouncesZoom="NO" editable="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Lje-0i-uhe" userLabel="menu textview">
<rect key="frame" x="25" y="20" width="271" height="117"/>
<textView autoresizesSubviews="NO" opaque="NO" clearsContextBeforeDrawing="NO" userInteractionEnabled="NO" contentMode="scaleAspectFit" ambiguous="YES" misplaced="YES" bounces="NO" scrollEnabled="NO" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" delaysContentTouches="NO" canCancelContentTouches="NO" bouncesZoom="NO" editable="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0Lx-zf-Lh8" userLabel="Kits textview">
<rect key="frame" x="0.0" y="0.0" width="240" height="128"/>
Update
This is what the scene looks like:
I also changed the frame settings in the storyboard and it made no difference. But I can see the new frame settings when I debug the code which is why I posted this question.
Update
The code that is causing the problem is:
let fixedWidth = textView.frame.size.width
textView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.max))
let newSize = textView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.max))
var newFrame = textView.frame
newFrame.size = CGSize(width: max(newSize.width, fixedWidth), height: newSize.height)
textView.frame = newFrame;
textView.scrollEnabled = false
When I pause the code the fixedWidth = 300 (height 200) [I changed the size in the storyboard] but the newSize is 293 by 169. It has not kept the fixed width. This is why I started looking into the frame size.
The problem resolved itself. I decided to add a height constraint to circumvent this problem. Then I posted another question outlining my problems with the textview width. After doing that I removed the height constraint and the width now is correct. I am not sure why it started to work because the new constraints are what I started off with. But perhaps they got corrupted somehow.
Related
What is the best way to change the color of NSProgressIndicator, is there an easier way than just to subclass it and then draw the whole component by myself?
Basically what I want to do is to have a similar component but with the ability to change the color of the bar.
I tried to google this but all the questions were quite outdated and didn't really concern the 10.10 OS X version that I am working on. Also checked cocoa controls and did only find 1 component that was for outdated OS X version.
You can use Quartz filters (e.g. hue adjust) for this directly in Interface Builder. This works better than expected.
It's in the Effects Inspector. Under "Content Filters" you can add "Hue Adjust"
Use "CIFalseColor" filter to get white color and more.
let colorFilter = CIFilter(name: "CIFalseColor")!
colorFilter.setDefaults()
colorFilter.setValue(color1, forKey: "inputColor0")
colorFilter.setValue(color2, forKey: "inputColor1")
proggressBar?.contentFilters = [colorFilter]
To change color of NSProgressIndicator use setControlTint: method. If you want to set custom color you have to draw such control manually. However, you should use the system color to keep this kind of control consistent across the system.
For Swift the method name is controlTint.
progressIndicator = NSProgressIndicator(frame: .......
progressIndicator.controlTint = .blueControlTint
you can use proggressBar.appearance = NSAppearance(named: .vibrantLight) // this is light or vibrantDark for "black" indictor
Based on Paxos' answer on the Interface builder, this is how I was able to do it programmatically:
let progress = NSProgressIndicator()
progress.contentFilters = [CIFilter(name: "CIHueAdjust", parameters: ["inputAngle": 4])!]
This would turn the bar green. I got this from looking at the Main.storyboard diff:
<progressIndicator maxValue="100" doubleValue="50" style="bar" translatesAutoresizingMaskIntoConstraints="NO" id="NIr-vo-obX">
<rect key="frame" x="3" y="22" width="210" height="20"/>
+ <contentFilters>
+ <ciFilter name="CIHueAdjust">
+ <configuration>
+ <real key="inputAngle" value="4"/>
+ <null key="inputImage"/>
+ </configuration>
+ </ciFilter>
+ </contentFilters>
</progressIndicator>
I was trying to change de Hue as seen in most answers, but I was getting a lot of issues to get the right specific color I wanted.
What did worked for me, and seems to be the most direct way to get a specific color, was using the CIColorMonochrome filter, where You can set any RGB color you want:
let myCustomColor: CIColor(red: 10, green: 10, blue: 10)
if let colorMonochrome = CIFilter(name: "CIColorMonochrome", parameters: [kCIInputColorKey: myCustomColor]) {
progressIndicator.contentFilters.append(colorMonochrome)
}
Based on the answer from KamyFC I found out that CIColor was required for the filter named "CIFalseColor".
Here is the Objective-C solution to make the progress bar whatever NSColor, in this example orange.
Don't forget to add #import Quartz; to your file.
// Create color:
CIColor *color = [[CIColor alloc] initWithColor:[NSColor orangeColor]];
// Create filter:
CIFilter *colorFilter = [CIFilter filterWithName:#"CIFalseColor"
withInputParameters:#{#"inputColor0" : color,
#"inputColor1" : color}];
// Assign to bar:
_progressBar.contentFilters = #[colorFilter];
I'm trying to change the size of the coding4fun RoundButton I realised that the width and height properties does not work.
<c4f:RoundButton
ImageSource="/Assets/AppBar/play.png"
Width="150"
Height="150"/>
The documentation is short and has not been updated lately (ImagePath is now called ImageSource).
If it is possible to change the size of the image inside the RoundButton then I can work with that as well. How do? Maybe creating my own round button is the solution?
Use ButtonHeight and ButtonWidth properties
<c4f:RoundButton ButtonWidth="300" ButtonHeight="300" />
I have a viewbox with an image inside:
<Viewbox MaxHeight="100" MaxWidth="100" x:Name="Scenario4ImageContainer2" Stretch="Uniform" Grid.Column="1" Grid.Row="1">
<Image x:Name="Scenario4Image" PointerPressed="Scenario4Image_PointerPressed" HorizontalAlignment="Stretch" />
</Viewbox>
I want to be able to grab the actual width/height values, but when I try this in the backend C#:
int w = (int)Scenario4ImageContainer.Width
I get an error saying the parameter is incorrect.
This goes away if I hardcode the width, but I want it to resize dynamically.
I also tried grabbing Scenario4ImageContainer.ActualWidth but this parameter was "incorrect" as well.
A while back I was trying to measure width of a string. You can try a similar mechanism to get dimensions.
http://invokeit.wordpress.com/2012/09/19/how-to-measure-rendered-string-dimensions-in-win8dev/
this.tb.FontSize = 20;
this.tb.Measire(new Size(400, 300)); // assuming that 400x300 is max size of textblock you want
double currentWidth = this.tb.DesiredSize.Width;
double currentHeight = this.tb.DesiredSize.Height;
Seems like I've found the event you need to handle: you should handle ImageOpened event. It is because image is retrieved asynchronously and if try to handle any other event there is a good chance to not have image loaded at that time so actual size is zero
On every draw I do a quick check to see if the container size has changed (with an initialization of 0 at the beginning to make sure it catches the first time).
if (containerWidth != Output.ActualWidth - 300)
{
Scenario4ImageContainer.Width = Output.ActualWidth - 300;
Scenario4ImageContainer.Height = Output.ActualHeight - 20;
containerWidth = Output.ActualWidth - 300;
}
It works for the most part, but when the class gets navigated out and navigated back it has a problem for some reason. Probably unrelated.
I am using the PhotoCamera control with the Windows Phone 7 Mango Beta 2 development tools.
The "ViewFinder" for the camera control is a rectangle object filled with a VideoBrush, as in the example here:
http://msdn.microsoft.com/en-us/library/hh202956%28v=VS.92%29.aspx
My problem is that when I run the app on my phone, the ViewFinder image is always showing up rotated 90 degrees counter-clockwise. This is the case no matter how the phone is positioned.
Does anyone know how I can orient the ViewFinder correctly?
Yes, the orientation is something you'll need to manage with a Relative Transform:
<!--Camera viewfinder >-->
<Rectangle Grid.Row="1"
x:Name="preview">
<Rectangle.Fill>
<VideoBrush x:Name="previewBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="previewTransform"
CenterX=".5"
CenterY=".5" />
</VideoBrush.RelativeTransform>
</VideoBrush>
</Rectangle.Fill>
</Rectangle>
Then you can use the PhotoCamera class to determine how you want to rotate it:
double cameraRotation = theCamera.Orientation;
// Use the orientation to determine how to transform
// the camera preview
previewTransform.Rotation = theCamera.Orientation + 90.0; // Landscape?
HTH
Adding more clarification to the answer: One thing the documentation describes that isn't mentioned here is that the relative transform is adjusted in the OnOrientationChanged event. Another difference is that the relative transform isn't specified in the XAML.
In the docs (How to: Create a Base Camera Application for Windows Phone), the rectangle is filled with the videobrush as follows:
<!--Camera viewfinder >-->
<Rectangle Width="640" Height="480"
HorizontalAlignment="Left"
x:Name="viewfinderContainer">
<Rectangle.Fill>
<VideoBrush x:Name="viewfinderBrush" />
</Rectangle.Fill>
</Rectangle>
Then, in the code-behind, the OnOrientationChanged event rotates the rectangle based on orientation:
// Ensure that the viewfinder is upright in LandscapeRight.
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.LandscapeRight)
{
viewfinderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 180 };
}
else
{
viewfinderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 0 };
}
base.OnOrientationChanged(e);
}
The code in this topic (which corresponds to the sample) is configured to only use landscape orientation, maybe this is why you're only getting landscape images(?) At the beginning, the following attributes are added to the phone:PhoneApplicationPage element in MainPage.xaml:
SupportedOrientations="Landscape" Orientation="LandscapeLeft"
If you are still getting images orientated incorrectly, sync your images to your PC and see if they're oriented correctly while viewing them there (on your PC). It could be a bug with the Beta that is causing the image to not appear correctly on the device.
Hope that helps. Cheers
You do not need to do that much code, assuming you are in portrait mode, just call:
viewfinderBrush.RelativeTransform
= new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
But of course, whatever orientation you use for the viewfinder, the resulting image IS still in landscape! Does anybody have an idea how to best fix this?
yes, I deleted the OnOrientationChanged-Eventhandler and just set the transform. In Xaml of course I changed the orientation to portrait.
Now, the viewfinder shows portrait and the page is portrait as well. But the image is saved as thumbnail to the camera roll, so I can see directly on device that the captured image has still landscape orientation.
Would be cool, if someone could verify that this is a Beta bug, or if we have just done some stupid code here ;)
Thanks.
We're using Interface Builder for developing an app for the iPad and we can't figure out how to increase the height of the textfields.
When we were using IB to develop an application for osx, you could go to the textfields attributes and under the control section you could set line break to word wrap instead of clip.
When we try to use Interface Builder for iPad applications though, it doesn't have the option of changing linebreak style under attributes-->control.
Is there any way to set the height using Interface Builder or do you have to set that in the code?
It looks like the height of the rounded-style text field is locked in Interface Builder. My solution was to use another of the UITextField styles in my XIB and then call textField.borderStyle = UITextBorderStyleRoundedRect in my viewDidLoad method.
Of course, textField should be the name of the UITextField IBOutlet.
iOS UITextFields are single line only and have a fixed height.
If you want a multi-line, variable-height text entry field then use UITextView.
1 - Right click on your storyboard/xib file and select "Open as" -> "Source code".
2 - Find the xml tag relative to your TextField, e.g.
<textField opaque="NO" clipsSubviews="YES" tag="102" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="left" contentVerticalAlignment="center" text="6872" borderStyle="roundedRect" placeholder="Password" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="Dxw-lR-kq5">
<rect key="frame" x="20" y="337" width="335" height="30"/>
3 - Change the height value to what you want (e.g. 50)
4 - Right click again on you storyboard and select "Open as" -> "Interface builder"
5 - See the result
there is a wrapping text field,that is what you need.
set the frame of ui textfield object in view did load but it will involve coding
[self.searchText setFrame:CGRectMake(180, 450, 400, 250)];
//in my case the object was called search text...
You can edit the height of any UITextfield in IB.Just set the constraint in IB.Select the constraint.In the Size Inspector-->Select and Edit just change the constant to your desired value.Press Enter ...Done!!!! (Can't get multiline though)