The effect of BufferType.Normal and BufferType.Spannable for textView - xamarin.android

I have this code:
TextView tv1 = FindViewById<TextView>(Resource.Id.textView1);
tv1.Text = "Text";
SpannableString wordtoSpan = new SpannableString(tv1.Text);
wordtoSpan.SetSpan(new UnderlineSpan(), 0, tv1.Text.Length, 0);
tv1.SetText(wordtoSpan, TextView.BufferType.Normal);
Whether I use BufferType.Normal or BufferType.Spannable, A line is drawn below the text,
a line appears below the text. So what is the effect of BufferType.Normal and BufferType.Spannable?

TextView.BufferType:
Normal: normal;
Editable: characters can be appended;
Spannable: use styles in the given character area;
The type of the text buffer that defines the characteristics of the text such as static, styleable, or editable. It could be used for changing the TextView in runtime.
TextView.BufferType.Editable: Insert
TextView tv2 = FindViewById<TextView>(Resource.Id.textView2);
tv2.SetText("Hello", TextView.BufferType.Editable);
var s = tv2.EditableText;
s.Insert(1, " Hello");
OutPut:
TextView.BufferType.Spannable: set the different color in a single Textview
TextView tv3 = FindViewById<TextView>(Resource.Id.textView3);
tv3.Text = "Hello World";
SpannableString wordtoSpan3 = new SpannableString(tv3.Text);
wordtoSpan3.SetSpan(new ForegroundColorSpan(Color.Red), 0, 5, 0); // "Hello" is red
wordtoSpan3.SetSpan(new ForegroundColorSpan(Color.Blue), 7, 11, 0); // "orld" is blue
tv3.SetText(wordtoSpan3, TextView.BufferType.Spannable);
Output:

Related

Xamarin iOS display image and text in a UIButton

I am relatively new to iOS so go easy on me! In my app I need to have a button which contains an image a title. The image needs to go above the title. The image is defined dynamically from a base64 string.
My problem is I can’t work out how to display the title and the image in the button at the same time. I can display them individually but not together. I have tried following the approach in the below link but I have been unable to get it to work:
Display Button With Text & Image In Xamarin IOS
This is how the button needs to look:
In Xamarin iOS I am using the below code to set the image and lay out the controls in the button:
DeviceMenuItems m_menuItem = HHMenuContainer.Instance.GetMenuItems().DeviceMenuItems.SingleOrDefault(l => l.LineNo.ToString() == m_lineNo);
if (m_menuItem != null && m_menuItem.Base64Picture != null)
{
byte[] bytes = Convert.FromBase64String(m_menuItem.Base64Picture);
NSData data = NSData.FromArray(bytes);
UIImage uiimage = UIImage.LoadFromData(data);
//this line is not relevant to the problem
uiimage = ChangeImageBackground(uiimage);
if (uiimage != null)
{
//m_control is the UIButton
//commenting this out removes the image and shows the text
m_control.SetImage(uiimage, UIControlState.Normal);
float titleLabelHeight = (float)(m_control.TitleLabel.Frame.Size.Height + 10);
m_control.ImageEdgeInsets = new UIEdgeInsets(-(titleLabelHeight), 0, titleLabelHeight, 0 );
float imageHeight = (float)(m_control.ImageView.Frame.Size.Height * 0.5);
imageHeight -= titleLabelHeight;
m_control.TitleEdgeInsets = new UIEdgeInsets(imageHeight, 0, -(imageHeight), 0);
}
}
With the above code I get the following button (without the required text):
If I comment the ‘SetImage’ line out I get the following button:
Does anyone have any ideas why the above approach isn’t working?
From the shared link , it show left title and right image.If want up and down layout, you can try this:
button.TitleEdgeInsets = new UIEdgeInsets(0, -button.ImageView.Frame.Size.Width, -button.ImageView.Frame.Size.Height - 5,0);
button.ImageEdgeInsets = new UIEdgeInsets( -button.TitleLabel.Frame.Size.Height - 5, 0 , 0, -button.TitleLabel.Frame.Size.Width);
Note: If the button's frame is set and the width of the button is not enough to display the size of the image and text at the same time, the size of the titleLabel will get an error. So if you need to set the frame, it is recommended to set the width of the button to frame.size.width * 2, and then set the frame after the titleEdgeInsets and imageEdgeInsets are all set.

TCPDF create move-able "box" with text without using ln settings

I am trying to create a bit of a unique table in TCPDF as shown below:
Getting the captions, headers and rows setup is easy. The hard part is the "bar".
The bar needs a few things:
Editable X-position
Text
Originally I was trying to use MultiCell; however, I got some weird behavior as shown below:
Multi-Cell:
I believe this is because of the ln settings. If we look at my code you can see that I am trying to create a Cell and then a MultiCell inside of it. Both of these use the have the ln setting to put the next cell below.
I tried setting the MultiCell's ln to 0 (to the right) but it had no visible change.
//multi cell
// extend TCPF with custom functions
class MYPDF extends TCPDF {
// SCC table
public function SCCTable($headers,$rows) {
// Colors, line width and bold font
$this->SetFillColor(0,128,128);
$this->SetTextColor(0);
$this->SetDrawColor(0);
$this->SetLineWidth(0.3);
$this->SetFont('', 'B');
// Header
$num_headers = count($headers);
for($i = 0; $i < $num_headers; ++$i) {
$this->Cell(
$headers[$i]->width,
$headers[$i]->height,
$headers[$i]->text,
1,
0,
'C',
1
);
}
$this->Ln();
// Color and font restoration
$this->SetFillColor(255);
$this->SetTextColor(0);
$this->SetFont('');
// Data
$fill = 0;
$num_rows = count($rows);
for($i = 0; $i < $num_rows; ++$i){
$this->Cell(//Row
$headers[$i]->width * $num_headers, //Row width should be the sum of all header width.
$rows[$i]->height,
//Row's Text
$this->MultiCell(
$rows[$i]->width,
$rows[$i]->height,
$rows[$i]->text,
0, //Border
"C", //Text Align
false, //fill, determines if the background is painted or transparent (false).
2, //ln, 1 = Next cell starts at beginning of new line.
$rows[$i]->x,
$rows[$i]->y
),
1, //Border
2, //ln, 1 = Next cell starts at beginning of new line.
"L" //text align
);
}
}
}
After this I found out about TextField. When I tried this I got just as weird behavior...
//text field
// extend TCPF with custom functions
class MYPDF extends TCPDF {
// SCC table
public function SCCTable($headers,$rows) {
// Colors, line width and bold font
$this->SetFillColor(0,128,128);
$this->SetTextColor(0);
$this->SetDrawColor(0);
$this->SetLineWidth(0.3);
$this->SetFont('', 'B');
// Header
$num_headers = count($headers);
for($i = 0; $i < $num_headers; ++$i) {
$this->Cell(
$headers[$i]->width,
$headers[$i]->height,
$headers[$i]->text,
1,
0,
'C',
1
);
}
$this->Ln();
// Color and font restoration
$this->SetFillColor(255);
$this->SetTextColor(0);
$this->SetFont('');
// Data
$fill = 0;
$num_rows = count($rows);
for($i = 0; $i < $num_rows; ++$i){
$this->Cell(//Row
$headers[$i]->width * $num_headers, //Row width should be the sum of all header width.
$rows[$i]->height,
//Row's Text
$this->TextField(
$rows[$i]->text,
$rows[$i]->width,
$rows[$i]->height,
[],
[],
$rows[$i]->x,
$rows[$i]->y
),
1, //Border
2, //ln, 1 = Next cell starts at beginning of new line.
"L" //text align
);
}
}
}
Finally I thought of using the Rect function to create a rectangle and Text to the draw the text. Using variables I could "glue" the Text to the Rectangle; however, the textfield uses the ln setting as well; furthermore, looking at the actual code there is this line:
$this->Cell(0, 0, $txt, $border, $ln, $align, $fill, $link, $stretch, $ignore_min_height, $calign, $valign);
Seeing as it creates a cell, then it should run into the same problem as MultiCell, as the only difference between Cell and MultiCell in my case is the ability to change the x-position from the left border.
So I'm stuck with this question: How can I draw a "box" that has text and can be pushed along horizontally?
How this is done is not that important except that images aren't an option.
I realized I didn't actually need to have the original row. I could just make due with the "bar".
$this->MultiCell(
$rows[$i]->width,
$rows[$i]->height,
$rows[$i]->text,
1, //Border
"C", //Text Align
true, //fill, determines if the background is painted (true) or transparent (false).
2, //ln, 1 = Next cell starts at beginning of new line.
$rows[$i]->x,
$rows[$i]->y
);
Though with that said it would still be nice to know how to do with rows...

Vaadin Alignment with GridLayout to center over cells

I trying to get image and title to be in the center
the login in box works OK
private void createTitle(final AbstractOrderedLayout parentLayout) {
GridLayout layout = new GridLayout(6, 2);
layout.setSpacing(true);
layout.setWidth( 100, Sizeable.Unit.PERCENTAGE );
layout.setHeight( 100, Sizeable.Unit.PERCENTAGE );
parentLayout.addComponent(layout);
parentLayout.setComponentAlignment(layout, Alignment.TOP_CENTER);
Embedded image = new Embedded("", new ClassResource("Icon_25x32.png"));
layout.addComponent(image, 2, 0);
layout.setComponentAlignment(image, Alignment.TOP_CENTER);
Label titleLabel = new Label("YT-100 ATU Control Center");
titleLabel.addStyleName("v-label-largeTitleText");
//layout.addComponent(titleLabel, 3, 1);
layout.addComponent(titleLabel, 3, 1, 4,1);
layout.setComponentAlignment(titleLabel, Alignment.TOP_CENTER);
mUserLayout = new GridLayout(2, 2);
mUserLayout.setSpacing(true);
layout.addComponent(mUserLayout, 5, 0);
layout.setComponentAlignment(mUserLayout, Alignment.MIDDLE_CENTER);
}
why does this not center?
Fixed:
titleLabel.setSizeUndefined();
and
.v-caption-centered, input.centered {
text-align: center;
}
notice that title label has 100% width by default, so it will take the entire width of the containing layout cell. Centering is only meaningful for components that take less width than the containing cell. Hence, you'd need to set the label width to undefined.

How to Change Title Kerning Value of NavigationBar in iOS using Xamarin

I'm trying to adjust the kerning for the title text in the NavigationBar. I've gotten as far as assigning a custom UIStringAttributes to the NavigationBar title. Setting the font and the text color seems to work fine, but when I input the Kerning Adjustment, nothing happens, regardless of what value I input.
public void SetTitleFont (string fontName, float fontSize, Color foregroundColor)
{
var TitleAttr = new UIStringAttributes {
ForegroundColor = foregroundColor.ToUIColor(),
Font = UIFont.FromName (fontName, fontSize),
KerningAdjustment = 50
};
this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr;
}
Figured this one out.
What worked out for me was creating a new UILabel, set the attributes for the UILabel, then set the TitleView to the UILabel.
// We will grab the actual title of the Page further down.
string viewTitle = string.Empty;
UINavigationItem navItem = new UINavigationItem();
if (this.NavigationController != null)
{
if (this.NavigationController.VisibleViewController != null)
{
if (this.NavigationController.VisibleViewController.NavigationItem != null)
{
navItem = this.NavigationController.VisibleViewController.NavigationItem;
// Grab the title of the Page you are on.
if (navItem.Title != null)
{
viewTitle = this.NavigationController.VisibleViewController.NavigationItem.Title;
}
}
}
}
// We do not want to set an arbitrary size for the UILabel.
// Otherwise, positioning it will be very difficult.
// The StringSize function will set the size of the UILabel to the absolute
// minimum size of whatever string you specify - given the correct
// parameters (font and fontSize).
CGSize titleSize = viewTitle.StringSize(UIFont.FromName (fontName, size));
// Create the new title UILabel. Make sure to set the Bounds!
pageTitleView = new UILabel {
Bounds = new CGRect (0, 0, titleSize.Width, titleSize.Height),
BackgroundColor = UIColor.FromRGBA(0, 0, 0, 0)
};
var titleAttributes = new NSAttributedString (viewTitle,
new UIStringAttributes () {
ForegroundColor = foregroundColor.ToUIColor(),
Font = UIFont.FromName (fontName, size),
KerningAdjustment = 1.1f
});
// Apply the new attributes to the UILabel and center the text.
pageTitleView.AttributedText = titleAttributes;
pageTitleView.TextAlignment = UITextAlignment.Center;
// Set the TitleView to the new UILabel.
navItem.TitleView = pageTitleView;
I hope this helps!

TextArea scrolling not working [Titanium]

I am creating an iOS app in which the user clicks an image and letter "A" is concatenated to a string variable.
Now, I have a text area with value of the variable string. The text area value is updated every time a new letter is concatenated to the variable string.
The problem is that when the width of the text area; the letters that are added after that cannot be seen. How can I make the last character entered to be always visible once the string length has exceeded the width of the text area?
Need a fix for this !
Code :
var image = Ti.UI.createImageView({
backgroundColor:'red',
width: 200,
height:100
});
win.add(image);
var scroll = Ti.UI.createScrollView({
top:40,
left:230,
width:290,
height:50,
borderRadius:10,
backgroundColor:'transparent',
scrollType:'horizontal',
scrollingEnabled : 'true',
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true,
});
win.add(scroll);
var textType = Ti.UI.createTextArea({
backgroundColor:'#E6E6E6',
borderColor:'blue',
borderRadius:10,
top:0,
left:-70,
width:390,
height:50,
font:{fontSize:26, fontFamily:customFont},
editable:true,
enabled:false,
textAlign:'right',
scrollable:true,
horizontalScroll : true,
scrollType:'horizontal'
});
scroll.add(textType);
image.addEventListener('click, function(e){
string = string + "A";
textType.setValue(string);
}
You could try setting horizontalWrap:true;, which would make the text appear on the next line rather than off screen.
Or alternatively, set scroll.contentOffset.x = textType.width - scroll.width if textType.width > scroll.width. I'm not sure about the syntactical nuances of Titanium, but this is how you would do it in regular Objective-C / iOS programs.

Resources