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.
Related
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...
In Appcelerator Titanium (iOS project) I have a TextField with height:50. The TextField contains much more text but the fact that its height is set to 50 lets me use the TextField as a preview of the remaining text: under the TextField I have a button and when I tap this button I want to show the entire text, so I would like to animate the TextField from its current height to Ti.UI.SIZE. Is this possible? How? I noticed some iOS properties (eg. anchorPoint) but I could not understand if they can be useful in my case.
You need to use TextArea instead of TextField if you want multiple lines and word wrapping.
I've added the TextArea to a View so I can animate it to both expand and shrink it.
You can try something like this..
// Create the text area for multiple lines and word wrapping.
var messageField = Ti.UI.createTextArea({
backgroundColor: 'transparent',
color: 'black',
height: Ti.UI.SIZE, // Set here the height to SIZE and the view's height to the required one, ex. 50
textAlign: 'left',
value: 'This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field, again, This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field.',
verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
width: '90%',
font: { fontSize: 20 }
});
// Add the text area to a view to be able to animate it
var view = Titanium.UI.createView({
height: 50, // Required height
top: 250,
width: '90%',
borderColor: 'black',
borderRadius: 10,
borderWidth: 2,
});
view.add(messageField);
// Create animation object
var animation = Titanium.UI.createAnimation();
animation.duration = 1000; // Set the time of animation, 1000 --> 1 second
var button = Ti.UI.createButton({
title: "Show More",
font: { fontSize: 18 },
width: 100,
top: 200
});
var isExpanded = false;
button.addEventListener('click', function() { // Event listener for your button
if(isExpanded) {
isExpanded = false;
animation.height = 50; // Set the animation height to 50 to shrink the view
view.animate(animation); // Start animating the view to the required height
button.title = "Show More";
} else {
isExpanded = true;
animation.height = Ti.UI.SIZE; // Set the animation height to SIZE to make it expand
view.animate(animation); // Start animating the view to the required height
button.title = "Show Less";
}
});
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
win.add(button);
win.add(view);
win.open();
I have 4 objects in a view with a horizontal layout in this order:
label
slider
label
button
labels and button are set to Ti.UI.SIZE and slider is set to Ti.UI.FILL
I am basically making my own video controls so
currentTimeLabel, slider, totalTimeLabel, playPauseButton
My issue is when I set the slider to FILL it fills the parent (which it should do I suppose) and pushes the 2nd label and button to a new line.
I need all 4 items on the same line. I've tried turning horizontalWrap to false on the parent view, but that just makes it so I cannot see the remaining two items.
The reason I am not using static widths is I need this slider to adjust its width based off the phone being in portrait and landscape modes.
If I use SIZE instead of fill, the slider basically has 0 width.
My simplified code is below:
var win = Ti.UI.currentWindow;
var transportBg = Ti.UI.createView({
bottom:0,
height:50,
width:'100%',
backgroundColor:'#50000000'
});
win.add(transportBg);
var transportControls = Ti.UI.createView({
layout:'horizontal',
width:'100%'
});
transportBg.add(transportControls);
var currentTimeText = Ti.UI.createLabel({
left:25,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var transport = Titanium.UI.createSlider({
min:0,
max:100,
value:0,
width:Ti.UI.FILL,
backgroundColor:'red'
});
var totalTimeText = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var playPauseBtn = Ti.UI.createButton({
backgroundImage:'/images/pause.png',
width:Ti.UI.SIZE,
height:Ti.UI.SIZE
});
transportControls.add(currentTimeText);
transportControls.add(transport);
transportControls.add(totalTimeText);
transportControls.add(playPauseBtn);
And a screen shot of the current layout
In your case horizontal layout isn't very helpful and best effects can be achieved with absolute layout and setting left, right properties. The only problem which you have is that you have to make sure how much space you have to leave on both sides of slider.
Here are changes to your code which I've made:
var transportControls = Ti.UI.createView();
Removed width and layout property
var transport = Titanium.UI.createSlider({
left: 50,
right: 70,
…
});
Removed width property and set left/right property.
var totalTimeText = Ti.UI.createLabel({
right: 40,
…
});
var playPauseBtn = Ti.UI.createButton({
right: 0,
…
});
Add right property.
Horizontally, I want to display two bitmaps, and between them display a label field.
The code seems straightforward, but all the fields are added on the left side of the screen.
HorizontalFieldManager hfm = new HorizontalFieldManager();
callbmp = new BitmapField(ei.getBitmap(),Field.FOCUSABLE |BitmapField.FIELD_LEFT);
LabelField NAME = new LabelField("mylable", LabelField.FIELD_HCENTER);
mailbmp = new BitmapField(mail.getBitmap(),Field.FOCUSABLE|BitmapField.FIELD_RIGHT);
hfm.add(callbmp);
hfm.add(NAME);
hfm.add(mailbmp);
add(hfm);
Manager customManager = new Manager(0)
{
protected void sublayout(int width, int height) {
setPositionChild(
getField(0),
0,
0);
layoutChild(
getField(0),
getField(0).getPreferredWidth(),
getField(0).getPreferredHeight());
setPositionChild(
getField(1),
Graphics.getScreenWidth()/2 - getField(1).getPreferredWidth()/2,
0);
layoutChild(
getField(1),
getField(1).getPreferredWidth(),
getField(1).getPreferredHeight());
setPositionChild(
getField(2),
Graphics.getScreenWidth() - getField(2).getPreferredWidth(),
0);
layoutChild(
getField(2),
getField(2).getPreferredWidth(),
getField(2).getPreferredHeight());
setExtent(width, height);
}
};
customManager.add(new BitmapField(Bitmap.getBitmapResource("image1.png")));
customManager.add(new LabelField("Hello Alignment"));
customManager.add(new BitmapField(Bitmap.getBitmapResource("image2.png")));
HorizontalFieldManager lays out the fields left-to-right in the order in which they are added. The style bits for horizontal layout are ignored.
If you want left, right and center on a horizontal line, you'll need a custom manager.
This should be your requirement:
It can be done simply by subtracting the widths of the items you are adding on your horizontal field manager. By default the leftButton or the first item you add on the HFM will be added on left. Then you can add your label(userName) and the rightButton in the following way:
LabelField userName = new LabelField("MaheshBabu");
HorizontalFieldManager horizontalBar = new HorizontalFieldManager(USE_ALL_WIDTH|Manager.NO_HORIZONTAL_SCROLL|Manager.NO_HORIZONTAL_SCROLLBAR);
horizontalBar.setBackground(BackgroundFactory.createSolidBackground(Color.BLACK));
rightButton.setMargin(0, 0, 0, Display.getWidth()-rightButton.getPreferredWidth()-leftButton.getPreferredWidth()-userName.getPreferredWidth());
horizontalBar.add(leftButton);
horizontalBar.add(userName);
horizontalBar.add(rightButton);
What I want to achieve is to have a custom popup screen with specified width and height.
On that screen I add two buttons which stay in one row and align center horizontally.
public class CustomPopupScreen extends PopupScreen {
ButtonField minimizeBf;
ButtonField cancelBf;
HorizontalFieldManager hfm;
public CustomPopupScreen() {
super(new VerticalFieldManager());
minimizeBf = new ButtonField("Minimize", FIELD_HCENTER|Field.USE_ALL_WIDTH);
cancelBf = new ButtonField("Cancel", FIELD_HCENTER|Field.USE_ALL_WIDTH);
hfm = new HorizontalFieldManager(FIELD_HCENTER|Field.USE_ALL_WIDTH);
hfm.add(minimizeBf);
hfm.add(cancelBf);
add(hfm);
//add(minimizeBf);
//add(cancelBf);
}
protected void sublayout(int width, int height) {
// TODO Auto-generated method stub
int xPos = 0;
int yPos = 0;
int sideMargin = 30;
int screenWidth = width - (2 * sideMargin);
int screenHeight = 100;
layoutDelegate(screenWidth, screenHeight);
//setPositionDelegate(0, 0);
super.sublayout(screenWidth, screenHeight);
setExtent(screenWidth, screenHeight);
xPos = (width - screenWidth) / 2;
yPos = (height - screenHeight) / 2;
setPosition(xPos, yPos);
// layout(screenWidth, screenHeight);
}
}
If I add those buttons to the screen, then it will align center horizontally, but the buttons appear on different row, while I want it to appear in the same row.
Can somebody tell me where have I code wrong ?
Try removing the USE_ALL_WIDTH flag from your HorizontalFieldManager allocation. That should do the trick.
Try putting a couple of vertical field managers, each taking half the available width, inside the horizontal manager. then add one button to each of the vertical managers.
I was just wondering the purpose of having a custom size. There is often a correct way to do something without having to modify the layout manually. If you share your end goal, we may be able to help better. Since it almost appears that you want to simply make two buttons be side to side. To add width and height you can add spacers (add(new SeparatorField())) to the field managers and specify their width/height as well as where in the manager you want them. This would allow all the fields to use their default layout patterns.
just do one
hfm = new HorizontalFieldManager(USE_ALL_WIDTH);
i think it might help you just give it a try.