I'd like to have a rounded UIButton whose size will be constrained by its title.
This button will be placed in a Horizontal stack view, with a preceding text. I want the size of the button to be fixed while the size of the preceding text is only constrained by the space available alongside the button.
Here is the code I have so far:
UIStackView textAndDoneButtonStackView = new UIStackView
{
TranslatesAutoresizingMaskIntoConstraints = false,
Axis = UILayoutConstraintAxis.Horizontal,
Distribution = UIStackViewDistribution.Fill,
Alignment = UIStackViewAlignment.Center,
Spacing = 10
};
// Create the appropriate control for this habit
UIView habitTitleView = CreateControlForHabit(habitTitle, kv.Value.workout, workoutName);
textAndDoneButtonStackView.AddArrangedSubview(habitTitleView);
// Add the done button
UIButton doneButton = CreateDoneButton(healthy_green);
habitIdDoneButtonId[kv.Value.id] = (int)doneButton.Tag;
textAndDoneButtonStackView.AddArrangedSubview(doneButton);
and
CreateControlForHabit(...)
{
UILabel uIHabitTitle = new UILabel { TranslatesAutoresizingMaskIntoConstraints = false };
uIHabitTitle.Text = habitTitle;
return uIHabitTitle;
}
then
private static UIButton CreateDoneButton(UIColor healthy_green)
{
// Add the done button
var doneButton = UIButton.FromType(UIButtonType.RoundedRect);
doneButton.TranslatesAutoresizingMaskIntoConstraints = false;
doneButton.SetTitle(Utilities.GetLocalizedString("habit_done_button_text"), UIControlState.Normal);
doneButton.SetTitleColor(UIColor.White, UIControlState.Normal);
doneButton.BackgroundColor = healthy_green; // Healthy Green
doneButton.Layer.CornerRadius = 5f;
doneButton.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
doneButton.ContentEdgeInsets = new UIEdgeInsets(top: 0, left: 10f, bottom: 0, right: 10f);
doneButton.Tag = doneButton.GenerateViewTag();
// View is hidden by default
doneButton.Hidden = true;
return doneButton;
}
My problem is that I want a rounded button and I can't cast the result of UIButton.FromType() to a custom class that would override IntrinsicContentSize.
What are the options available here to fix the size of this rounded button?
Related
I am coding my app using Xamarin, but I can translate any swift/objective-C responses.
I have a WKWebView that I using to display data with LoadHtmlString(). I want to change the background color of the UIToolbar that is displayed above the keyboard when a user focuses an input field. Right now, the button text color and background color are both white, so the buttons aren't visible.
I can change the button text color by using UIBarButtonItem.Appearance.TintColor = UIColor.White;, but this will also change the text color of the buttons in my UINavigationBar. I would rather leave the text white, and change the background color of the UIToolbar.
I can slightly modify the background color using UIToolbar.Appearance.BackgroundColor = UIColor.Red;, but this just adds a subtle tint of the color to the UIToolbar, and doesn't actually make the toolbar dark enough for the white text to be visible.
Here is my complete code for setting up my Appearance defaults:
UIColor lightColor = UIColor.White;
UIColor themeColor = UIColor.Red;
UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);
UINavigationBar.Appearance.BarStyle = UIBarStyle.Black;
UINavigationBar.Appearance.BarTintColor = themeColor;
UINavigationBar.Appearance.Translucent = false;
UINavigationBar.Appearance.TintColor = lightColor;
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
{
TextColor = lightColor
});
UIStringAttributes navBarAttributes = new UIStringAttributes();
navBarAttributes.ForegroundColor = lightColor;
UINavigationBar.Appearance.TitleTextAttributes = navBarAttributes;
UITabBar.Appearance.BarTintColor = themeColor;
UITabBar.Appearance.TintColor = lightColor;
UIToolbar.Appearance.BarTintColor = themeColor;
UIToolbar.Appearance.TintColor = lightColor;
UIBarButtonItem.Appearance.TintColor = lightColor;
UIButton.AppearanceWhenContainedIn(typeof(UINavigationBar)).TintColor = lightColor;
UIToolbar.Appearance.BackgroundColor = themeColor;
Is there a way to change the WKWebView's toolbar background color without having to retheme my entire app?
If I can't change the background color of the toolbar, I am open to changing the button text color when displayed in a WKWebView. I have tried adding the following code, but nothing seems to work.
//Using green to see if the code is working.
UIBarButtonItem.AppearanceWhenContainedIn(typeof(WKWebView)).TintColor = UIColor.Green;
UIBarButtonItem.AppearanceWhenContainedIn(typeof(MyViewController)).TintColor = UIColor.Green;
You can have a try with custom UIToolBar to change its background color by an image :
public class MyToolBar: UIToolbar
{
public override void Draw(CGRect rect)
{
base.Draw(rect);
CGContext c = UIGraphics.GetCurrentContext();
UIImage image = new UIImage("background.png");
//here set image to be background color
c.DrawImage(rect, image.CGImage);
}
}
And toolbar will only used for where you used , can not affecting other toolbar in app.
MyToolBar myToolBar = new MyToolBar();
myToolBar.Frame = new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 50);
UIBarButtonItem doneItem = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, doneClickMethod);
List<UIBarButtonItem> list = new List<UIBarButtonItem>();
list.Add(doneItem);
myToolBar.Items = list.ToArray();
MySearchBar.InputAccessoryView = myToolBar;
I wanted to add circle image on left navigation bar item as button. I could added, but it is not circle it is ellipse. Here is my code.
let button = UIButton();
button.downloaded(from: user?.Image);
button.frame = CGRect(x: 0, y: 0, width: 36, height:36);
button.layer.cornerRadius = button.frame.width / 2;
button.layer.masksToBounds = true;
button.imageView?.contentMode = .scaleAspectFill;
let barBtn = UIBarButtonItem(customView: button);
self.navigationItem.leftBarButtonItem = barBtn;
You can check my screen shot. Can you help me?
Issue arises when downloaded image is larger than (36, 36) it resets the frame of imageView and as result UIbutton's frame is also reset. You need to resize the image before assigning it to imageView making it smaller than (36,36).
Also don't make UIButton round, make imageView round. Otherwise touchable area of button will be reduced.
use:
button.imageView.layer.cornerRadius = button.imageView.frame.width / 2;
button.imageView.layer.masksToBounds = true;
Instead of:
button.layer.cornerRadius = button.frame.width / 2;
button.layer.masksToBounds = true;
Refer to following answer for resizing images.
How to Resize image in Swift?
hear is my code:
var label = new UILabel { Text = text };
label.SetNeedsLayout();
float width = 125;
SizeF size = (SizeF)(label.Text).StringSize(label.Font, new SizeF(width, 100),UILineBreakMode.TailTruncation);
label.Lines = 5;
label.Frame = new RectangleF(20, 40, size.Width, size.Height);
var image = new UIImageView();
image.Image = new UIImage("bluesticky.png");
image.Frame = new CGRect(0, 0, 180, 220);
this.AddSubview(image);
this.AddSubview(label);
In my code UILabel text is placed on UIImage. If the text is larger than the image I want to scroll the text on image.How can I get like that If I have large amount of text. Thanks in advance
its difficult with UIlable - You can do but you will also need scrollview.
Use UITextView instead. Change background color to clear editable property to false. It will automatically manage scroll.
///Update:
To disable dragging of image when Your textView is scrolling, you can disable Dragging event of UIImageview when scroll started and Enable again when scroll ended.
mytextview1.DecelerationStarted += (sender, e) =>
{
//Disable dragging of Image.
};
mytextview1.DecelerationEnded += (sender, e) =>
{
//Enable dragging of Image.
};
Here is the picture :
I tried first with buttons, and then with UILabels on top of UIViews but the problem remained the same. Here's my code:
interView = UIView()
interView.backgroundColor = UIColor.clearColor()
interView.layer.borderWidth = 0.4
interView.layer.borderColor = UIColor.blackColor().colorWithAlphaComponent(0.4).CGColor
interView.frame = CGRectMake(0, 0, 130, 70)
interView.layer.shadowColor = UIColor.clearColor().CGColor
self.view.addSubview(interView)
So, I would like my UIView to have the same widths on every side of its border. Why is this happening?
i've created a paged UIScrollView which contains labels on every page. How can i lower the margin between the labels like in the picture and then still being able to scroll?
At the moment my navigationBar look like following. Where u can swipe to next page to the right and get the next label.
What i want is something like this with a small margin and still being able to swipe.
viewDidLoad code
//Category ScrollView
categoryScrollView = UIScrollView(frame: CGRectMake(0, self.navigationController!.navigationBar.frame.height-38, self.view.frame.width, 38))
categoryScrollView?.contentSize = CGSizeMake(self.view.frame.width, 38)
categoryScrollView?.delegate = self
categoryScrollView?.pagingEnabled = true
self.navigationController?.navigationBar.addSubview(categoryScrollView!)
categoryArray = NSArray(objects: "Book", "Elektronik")
var textWidth = 0
for val in categoryArray!
{
var textLabel: UILabel = UILabel()
textLabel.textAlignment = NSTextAlignment.Center
textLabel.text = val as NSString
textLabel.frame = CGRectMake(CGFloat(textWidth), 0, categoryScrollView!.frame.width, categoryScrollView!.frame.height)
categoryScrollView?.addSubview(textLabel)
textWidth = textWidth + Int(textLabel.frame.size.width)
if textWidth > Int(self.view.frame.width) {
categoryScrollView?.contentSize = CGSizeMake(CGFloat(textWidth), categoryScrollView!.frame.height);
}
}
The default width of the "page" when pagingEnabled is switched on is the width of the scroll view. You could reduce the width and let the contained views be visible beyond the edges of the view by setting clipsToBounds to false.
If this does not work for you there also the option to adjust the paging width by intercepting the end of the drag via the UIScrollViewDelegate method scrollViewWillEndDragging(...) where you can adjust the targetContentOffset to fit your needs (see an example here).