UILabel with Image and text in iOS(Xamarin) - ios

I am making UILabel with Image and text inside that.I try many thing like below.
Try 1 :
Using this code
var textAttchment = new NSTextAttachment();
textAttchment.Image = UIImage.FromBundle("location_grey_icon");
var attachmentString = NSAttributedString.FromAttachment(textAttchment);
var attributedString = new NSMutableAttributedString(lbl_inr.Text.ToString());
this.lbl_inr.AttributedText = attributedString;
But it only display the Text not the image.
Try 2:
using this code
var attchment = new NSTextAttachment();
attchment.Image = UIImage.FromBundle("location_grey_icon");
attchment.Bounds = new CGRect(0, -1, 13, 13);
var intiliazeText = this.text_inr.AttributedText;
var newText = new NSMutableAttributedString(intiliazeText);
newText.Append(NSAttributedString.CreateFrom(attchment));
this.text_inr.AttributedText = newText;
it is display the Image and Text both.
Output :
What I want :
but my requirement is to I want to set image before the Text so first Image and then Text.
Any help be Appreciated.

Your requirement is very specific, the best way to do this would be with a custom control.
UIView + Label + UIImageView
and there you could set your bounds to your needs. With the designer this is a simple task.
Or you could try with a UITextField, removing the borders and disabling it. Then adding a UIImageView as the RightView (or LeftView as you wish).
var textEdit = new UITextField (new CGRect (15, 100, 200, 30));
textEdit.Enabled = false;
textEdit.Text = "Hello from Xamarin";
var xamImageView = new UIImageView (new CGRect (0,0, 25, 25));
xamImageView.Image = UIImage.FromBundle ("xamagon");
textEdit.RightView = xamImageView;
textEdit.TextAlignment = UITextAlignment.Right;
textEdit.RightViewMode = UITextFieldViewMode.Always;
textEdit.BorderStyle = UITextBorderStyle.None;
Result:
Hope this helps!

Using below code I manage
var attchment = new NSTextAttachment();
attchment.Image = UIImage.FromBundle("location_grey_icon");
attchment.Bounds = new CGRect(0, -2, 14, 14);
var newText = new NSMutableAttributedString();
newText.Append(NSAttributedString.CreateFrom(attchment));
NSAttributedString s = new NSAttributedString(item.Total.ToString());
newText.Append(s);
this.lbl_inr.AttributedText = newText;
Output :

Related

How do I get text to wrap and add another line below in a Xamarin Forms iOS custom renderer?

I am creating a custom renderer to display a title and description in a translucent white space on an image. The title should wrap to the second line if wider than the image, and an optional description may appear below if there is room. In Android I am able to do this using a StaticLayout:
// Create text rectangle
var height = Height / 3;
canvas.Save();
canvas.ClipRect(0, Height - height, Width, Height);
canvas.DrawARGB(191, 255, 255, 255);
canvas.Restore();
var item = ((ImageTile) Element).Item;
var textSize = (height - 15) / 2;
var textPaint = new TextPaint
{
StrokeWidth = 5,
TextSize = textSize,
FakeBoldText = true,
};
if (Build.VERSION.SdkInt >= BuildVersionCodes.Honeycomb)
SetLayerType(LayerType.Software, textPaint);
textPaint.SetStyle(Paint.Style.Fill);
textPaint.Color = global::Android.Graphics.Color.Black;
// init StaticLayout for text
var titleLayout = new StaticLayout(
item.Title, textPaint, Width - 10, Android.Text.Layout.Alignment.AlignNormal, 1.0f, 0.0f, false);
canvas.Translate(5, Height - height + 5);
titleLayout.Draw(canvas);
canvas.Restore();
textPaint = new TextPaint
{
StrokeWidth = 4,
TextSize = textSize - 10,
};
if (Build.VERSION.SdkInt >= BuildVersionCodes.Honeycomb)
SetLayerType(LayerType.Software, textPaint);
var descLayout = new StaticLayout(
item.Description, textPaint, Width - 10, Android.Text.Layout.Alignment.AlignNormal, 1.0f, 0.0f, false);
canvas.Translate(5, Height - height + titleLayout.Height + 5);
descLayout.Draw(canvas);
canvas.Restore();
in iOS I am using CATextLayers, but I am unable to get the text to wrap even thought I define the frame and set both Wrapped to true and TextTruncationMode to None. I also don't know how to get the actual height of the tilteLayer so I can position the descLayer below it. This is what I have so far, which draws the title and description on top of each other without wraping.
var textLayer = new CALayer();
var textRec = new CGRect(0, element.HeightRequest - textheight, element.WidthRequest,
textheight);
textLayer.Frame = textRec;
var backgroundcolor = Color.FromRgba(255, 255, 255, .25).ToCGColor();
textLayer.BackgroundColor = backgroundcolor;
Control.Layer.AddSublayer(textLayer);
var titleLayer = new CATextLayer
{
String = element.Item.Title,
ForegroundColor = Color.Black.ToCGColor(),
FontSize = 14,
Wrapped = true,
TextTruncationMode = CATextLayerTruncationMode.None,
TextAlignmentMode = CATextLayerAlignmentMode.Left,
//Bounds = new CGRect(2, element.HeightRequest - textheight + 2, element.WidthRequest - 4,
// textheight - 4),
};
var titleRec = new CGRect(2, element.HeightRequest - textheight + 2, element.WidthRequest - 4,
textheight - 4);
titleLayer.Frame = titleRec;
Control.Layer.AddSublayer(titleLayer);
var descLayer = new CATextLayer
{
String = element.Item.Description,
ForegroundColor = Color.Black.ToCGColor(),
FontSize = 12,
Wrapped = true,
TextTruncationMode = CATextLayerTruncationMode.None,
};
var descRec = new CGRect(2, element.HeightRequest - textheight + 2, element.WidthRequest - 4,
textheight - 4);
descLayer.ContentsRect = descRec;
Control.Layer.AddSublayer(descLayer);
Why not try autoLayout? You want to add a background view and two types of text on the original image. CALayer may achieve your effect, but it can't use autoLayout so that you need to use hard code(calculate the text height and the layer's position) to construct that. Also you said
I am unable to get the text to wrap. And I also don't know how to get
the actual height of the tilteLayer so I can position the descLayer
below it.
In the image's custom renderer, since this control has not been rendered, its Frame and HeightRequest are also unknown. Then you won't get the correct frame neither the layer, so the text will not be shown. I think the best way to do that is using AutoLayout:
// Create a view to hold content just like your textLayer
UIView bgView = new UIView();
bgView.BackgroundColor = UIColor.FromRGBA(1, 1, 1, 0.25f);
bgView.TranslatesAutoresizingMaskIntoConstraints = false;
Control.AddSubview(bgView);
bgView.LeadingAnchor.ConstraintEqualTo(Control.LeadingAnchor).Active = true;
bgView.TopAnchor.ConstraintGreaterThanOrEqualTo(Control.TopAnchor).Active = true;
bgView.TrailingAnchor.ConstraintEqualTo(Control.TrailingAnchor).Active = true;
bgView.BottomAnchor.ConstraintEqualTo(Control.BottomAnchor).Active = true;
UILabel titleLabel = new UILabel();
bgView.AddSubview(titleLabel);
titleLabel.TranslatesAutoresizingMaskIntoConstraints = false;
// Set this property to 0, then your label will move to several lines if your text is too large.
titleLabel.Lines = 0;
titleLabel.Font = UIFont.SystemFontOfSize(14);
titleLabel.Text = Element.Item.Title;
titleLabel.LeadingAnchor.ConstraintEqualTo(bgView.LeadingAnchor).Active = true;
titleLabel.TopAnchor.ConstraintEqualTo(bgView.TopAnchor).Active = true;
titleLabel.TrailingAnchor.ConstraintEqualTo(bgView.TrailingAnchor).Active = true;
// This constraint will show the titleLabel's content at high priority. It means show the descLabel if the image has enough place.
titleLabel.SetContentHuggingPriority(249, UILayoutConstraintAxis.Vertical);
UILabel descLabel = new UILabel();
bgView.AddSubview(descLabel);
descLabel.TranslatesAutoresizingMaskIntoConstraints = false;
descLabel.Lines = 0;
descLabel.Text = Element.Item.Description;
descLabel.Font = UIFont.SystemFontOfSize(12);
descLabel.LeadingAnchor.ConstraintEqualTo(bgView.LeadingAnchor).Active = true;
descLabel.TopAnchor.ConstraintEqualTo(titleLabel.BottomAnchor).Active = true;
descLabel.TrailingAnchor.ConstraintEqualTo(bgView.TrailingAnchor).Active = true;
descLabel.BottomAnchor.ConstraintEqualTo(bgView.BottomAnchor).Active = true;
In this way, bgView will expand its height depending on the titleLabel and descLabel. The largest height will be the original image's height. Moreover titleLabel will auto calculate its size depending on its content. Also the descLabel will always lies below the titleLabel if the room allows.
You can adjust these constraints to fit your own requirement.

Adjust UILabel height by content in xamarin.ios

i have 3 types of string labels, "loading...", "loading, please wait" and "it's taking more than we expected, sorry...". I want to adjust the height of the IULabel and center in the frame. I'm using this:
labelTitle = new UILabel (new CGRect (
frame.Width / 4,
frame.Height / 2 + Dimensions.margin_small,
frame.Width/2,
40
));
labelTitle.StyleTitle ();
labelTitle.TextAlignment = UITextAlignment.Center;
labelTitle.LineBreakMode = UILineBreakMode.WordWrap;
labelTitle.Lines = 0;
But don't know how to resize the height
try this.
labelTitle = new UILabel ();
labelTitle.StyleTitle ();
labelTitle.TextAlignment = UITextAlignment.Center;
labelTitle.LineBreakMode = UILineBreakMode.WordWrap;
labelTitle.Lines = 0;
And now give the label center point.

How to create UIStackView from code correctly

I can't understand why this layout won't render the way i need it. Completing the requirement on android with linearlayouts should be equivalent to this?
What i get:
What i need:
My code:
// my stackview only renders at all if i pass any height > 0 && width > 0,
// but i would love this to be as small as possible, given that all children
// are rendered.
var stackView = new UIStackView(View.Frame);
stackView.Axis = UILayoutConstraintAxis.Vertical;
stackView.Distribution = UIStackViewDistribution.Fill;
foreach (var deviceVm in devices)
{
// i would prefer this not to have a rect parameter and scale as needed.
var descriptionLabel = new UILabel(new CGRect(0, 0, View.Bounds.Width, 20));
descriptionLabel.Text = deviceVm.Description;
descriptionLabel.TextColor = UIColor.Blue;
descriptionLabel.ContentMode = UIViewContentMode.ScaleToFill;
stackView.AddArrangedSubview(descriptionLabel);
}
// i assume this should make it as small as possible, as big as necessary?
stackView.SizeToFit();
var scrollView = new UIScrollView(View.Frame);
scrollView.BackgroundColor = UIColor.Yellow;
scrollView.AddSubview(stackView);
View.AddSubview(scrollView);
Can someone spot a mistake i am doing here? Am i configuring the StackView incorrectly or is this control not the equivalent of LinearLayout(android) / StackPanel(wpf) ?
PS: Sorry for eye cancer paint pictures.

nativescript marshalling error

I seem to be getting a strange problem when marshaling the following native iOS code to nativescript:
CGRect keyboardRect = CGRectMake(0, 0, self.view.frame.size.width, 216);
AGEmojiKeyboardView *emojiKeyboardView = [[AGEmojiKeyboardView alloc] initWithFrame:keyboardRect
dataSource:self];
emojiKeyboardView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
emojiKeyboardView.delegate = self;
self.textView.inputView = emojiKeyboardView;
The equivalent I came up with is the following:
var keyboardRect = CGRectMake(0, 0, platform.screen.mainScreen.widthPixels, 216);
var emojiKeyboardView = new AGEmojiKeyboardView();
emojiKeyboardView.frame = keyboardRect;
emojiKeyboardView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
emojiKeyboardView.delegate = this;
views.textInput.ios.inputView = emojiKeyboardView;
where platform is just require("platform"); and views.textInput is a view to which I need to set the inputView to AGEmojiKeyboardView.
I really don't understand where I went wrong. All that appears is a grey keyboard with no content.
EDIT:
I changed the js code to the following:
var keyboardRect = CGRectMake(0, 0, uiView.view.frame.size.width, 216);
var emojiKeyboardView = new AGEmojiKeyboardView(keyboardRect, uiView);
emojiKeyboardView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
emojiKeyboardView.delegate = uiView;
views.textInput.ios.inputView = emojiKeyboardView;
where uiView is just page.ios and something seems to happen now, but still not the intended result. An exception is thrown, namely the following: -[UIViewControllerImpl emojiKeyboardView:imageForSelectedCategory:]: unrecognized selector sent to instance 0x7e6bff60
As NativeScript has TypeScript as first-class member somethings are really easier to do with TS. For example you can also use the META-Generator
Simply run this two lines to generate metadata & typings for your CocoaPod (and all other Objective-C files) and you won't have to worry about the right syntax.(still you will need to know the basic rules)
TNS_DEBUG_METADATA_PATH="$(pwd)/metadata" tns build ios [--for-device] [--release]
TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build ios [--for-device] [--release]
Also if you want to createa a custom view the best variant is using NativeScript placeholder with creatingView
As for the syntax it shouldb look similar to this but still you will have to create your own ViewController and as the author says - conform to AGEmojiKeyboardViewDataSource and AGEmojiKeyboardViewDelegate protocol.
var frame = require('ui/frame');
var page;
function onLoaded(args) {
page = args.object;
}
exports.onLoaded = onLoaded;
function onCreatingView(args) {
setTimeout(function() {
var uiView = page.ios.view; // replace with own UIView and conform to AGEmojiKeyboardViewDataSource and AGEmojiKeyboardViewDelegate protocol.
var frame = {origin: {x:0, y:0}, size: {width: uiView.frame.size.width, height:600}};
var emojiView = AGEmojiKeyboardView.alloc().initWithFrameDataSource(frame, uiView);
emojiView.autoresizingMask = UIView.UIViewAutoresizing.UIViewAutoresizingFlexibleHeight;
emojiView.delegate = uiView;
var textContainer = NSTextContainer.alloc().initWithSize({width: 80, height: 180});
var frame = {origin: {x:0, y:0}, size: {width: 100, height:220}};
var textView = UITextView.alloc().initWithFrameTextContainer(frame, textContainer);
textView.inputView = emojiView;
args.view = textView;
}, 500);
}
exports.onCreatingView = onCreatingView;
page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
<StackLayout>
<Placeholder creatingView="onCreatingView" id="placeholder-view"/>
</StackLayout>
</Page>
I could be mistaken, but I don't think you are using marshalling properly.
The documentation states:
AGEmojiKeyboardView *emojiKeyboardView = [[AGEmojiKeyboardView alloc] initWithFrame:keyboardRect dataSource:self];
So your {N} version should be something like this:
var emojiKeyboardView = AGEmojiKeyboardView.alloc().initWithFrameDataSource(keyboardRect, uiView);
This is a great blog-post on how to create plugins based on 3rd party libraries for nativescript. It also explains step-by-step how this type of marshalling is done.
http://fluentreports.com/blog/?p=167

UI Text Field postioning Swift

I am a newbie to ios development and am fairly confused about how to position a UI Text field in swift. I am working with sprite kit and am creating a gaem that involves inputing a quadratic equation. I want to position my text fields along side my labels so it say y=_x^2+x+. When I run the following code, my text fields are in the top left corner! What should I do?
override func didMoveToView(view: SKView) {
self.backgroundColor = SKColor.blueColor()
//create y = label
let yLabel = SKLabelNode(fontNamed:"Note-Worthy-Bold")
yLabel.text = "Y = ";
yLabel.fontColor = SKColor.redColor()
yLabel.fontSize = 30;
yLabel.position = CGPoint(x:CGRectGetMidX(self.frame)-300, y:CGRectGetMidY(self.frame)+100);
self.addChild(yLabel)
//create text fielld for coefiecent of x^2 variable
var xSqrCoefInput = UITextField(frame:CGRectMake(10, 10, 30, 10))
xSqrCoefInput.backgroundColor = UIColor.orangeColor()
self.view?.addSubview(xSqrCoefInput)
//create x^2 Label
let xSqrLabel = SKLabelNode(fontNamed:"Note-Worthy-Bold")
xSqrLabel.text = "x^2+";
xSqrLabel.fontColor = SKColor.redColor()
xSqrLabel.fontSize = 30;
xSqrLabel.position = CGPoint(x:CGRectGetMidX(self.frame)-150, y:CGRectGetMidY(self.frame)+100);
self.addChild(xSqrLabel)
//create text fielld for coefiecent of x variable
var xCoefInput = UITextField(frame:CGRectMake(10, 10, 30, 10))
self.view?.addSubview(xCoefInput)
xCoefInput.backgroundColor = UIColor.orangeColor()
//create x label
let xLabel = SKLabelNode(fontNamed:"Note-Worthy-Bold")
xLabel.text = "x+";
xLabel.fontColor = SKColor.redColor()
xLabel.fontSize = 30;
xLabel.position = CGPoint(x:CGRectGetMidX(self.frame)-0, y:CGRectGetMidY(self.frame)+100);
self.addChild(xLabel)
//create text fielld for constant
var constantInput = UITextField(frame:CGRectMake(10, 10, 30, 10))
self.view?.addSubview(constantInput)
constantInput.backgroundColor = UIColor.orangeColor()
}
CGRectMake takes in 4 parameters.
CGRectMake(x position, y position, width, height)
The default starting position is the top-left corner. Your current textfield position is (10,10), so basically you just have to change the x and y positions for all the textfields.
var xSqrCoefInput = UITextField(frame:CGRectMake(10, 10, 30, 10))
If you wish to place the textfield next to the labels, it would be best to get the position of the labels and set the position from there.

Resources