Adding nested stackviews programmatically using xamarin.ios c# - xamarin.ios

I am creating a app for both android and ios using xamarin and mvvmcross.
In the ios app I want to add outer vertical stackview having nested horizontal stackviews. Basically I just want to create a basic person details screen where will be Label on left and textfield on right which will go in one horizontal stackview and like this there will many horizontal stackviews nested in outer vertical stackview.
I am looking for such example on internet but seems most of the examples are in swift but I was hardly able to find some in c#.
Can someone please help.
Thanks,
Santosh

UIStackView leverages the power of Auto Layout and Size Classes to manage a stack of subviews, either horizontally or vertically, which dynamically responds to the orientation and screen size of the iOS device. You can learn about it through this documentation.
In your case, we can construct a vertical stack to place several horizontal stack:
UIStackView verticalStack = new UIStackView();
View.AddSubview(verticalStack);
verticalStack.Axis = UILayoutConstraintAxis.Vertical;
verticalStack.TranslatesAutoresizingMaskIntoConstraints = false;
// Use auto layout to embed this super vertical stack in the View. Also there's no need to set the height constraint, vertical stack will automatically adjust that depending on its content
verticalStack.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor).Active = true;
verticalStack.TopAnchor.ConstraintEqualTo(TopLayoutGuide.GetBottomAnchor()).Active = true;
verticalStack.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor).Active = true;
for (int i=0; i<10; i++)
{
// Here try to put some horizontal stack with Label on left and textfield on right in the father stack.
UIStackView horizontalStack = new UIStackView();
horizontalStack.Distribution = UIStackViewDistribution.EqualSpacing;
horizontalStack.Axis = UILayoutConstraintAxis.Horizontal;
// UIStackView should use AddArrangedSubview() to add subviews.
verticalStack.AddArrangedSubview(horizontalStack);
UILabel textLabel = new UILabel();
textLabel.Text = "text";
UITextField textField = new UITextField();
textField.Placeholder = "enter text";
horizontalStack.AddArrangedSubview(textLabel);
horizontalStack.AddArrangedSubview(textField);
}
But if every horizontal stack's subViews are almost the same style and layouts. Why not try to use UITableView? You just need to set the single cell's contents and layouts, then use it in the tableView. Moreover this control is reused and scrollable.

Related

Vaadin 10 Dialog emulating Vaadin 8 Window Caption

Using Vaadin Flow Java API I would like to emulate a Vaadin 8 Window feature: particularly I need to emulate Caption behaviour.
I mean a fixed top "Title" not scrollable as the real content of the Dialog. Anyone can tell me some Example I could learn from ?
Thanks in advance
This is the workaround I found.
public MainView() {
Button button = new Button("Click me",
event -> {
Dialog dialog = new Dialog();
HorizontalLayout horizontalLayout = new HorizontalLayout();
VerticalLayout verticalLayout = new VerticalLayout();
Div headerDiv = new Div();
Div bodyDiv = new Div();
bodyDiv.getElement().getStyle().set("overflow", "auto");
bodyDiv.getElement().getStyle().set("max-height", "420px"); // !!!
dialog.add(headerDiv, bodyDiv);
headerDiv.add(horizontalLayout);
bodyDiv.add(verticalLayout);
horizontalLayout.add(new Label("Hi there !"));
for (int i = 1; i <= 20; i++) {
verticalLayout.add(new TextField("TextField_" + i));
}
dialog.open();
});
add(button);
}
The trouble is that I have to fix max-height size to avoid scrolling of all the contained components. So I cannot take advantage from the auto-size behaviour of the Dialog Container. Also tried using setFlexGrow, but I did not reach the solution.
Any Hint ?
In Vaadin 10+ there is no component called Window, but there is component called Dialog. It does not have Title like Window, but otherwise it has similar baseline. I.e. it is popup. Based on your question you have found already that.
Dialog itself is component container, which means you can add components there. I would just create e.g two Divs (the simplest of the layout components in Vaadin 10). I would style the first one to have fixed height and place the Title there. And then I would apply component.getElement().getStyle().set("overflow", "auto") to the other one, which is the actual content body. The mentioned style will enable the scrollable feature. You could potentially use VerticalLayout / HorizontalLayout instead of Div as well depending what you need.
See also: https://vaadin.com/docs/v10/flow/migration/5-components.html

List view with custom view items with partially overlaps (Android)

I want to implement a list in Android that contains some customized views.
My problem is that I want the the views will be put one after the other with a little overlap between them. like in the following schema:
I also want to control this overlap in such a way that when the user clicks on one of the items, they will move apart from each other.
I tried to extend ListView but it seems to be very obscured, any suggestions?
Edit:
This can be more clear:
I did it by setting the divider height to -50dp.
this is exactly what I want to achieve, but somehow it doesn't reflect on my app.
I managed to achieve this by using scroll view with a single relative layout as a child.
I then dynamically place the views by defining a rule and margin:
for (int i = 0; i < 30; i++) {
TextView tv = new TextView(context);
tv.setText("Text \n Text" + i);
tv.setBackgroundColor(i % 2 == 0 ? Color.RED : Color.GREEN);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
lp.leftMargin = 0;
lp.topMargin = (i * 45);
rl.addView(tv, lp);
}
Later, you can control the positioning of the sub-views by changing their y value (for example: if you want to add animation).
This is the final result:
This can probably be achieved by using the Camera.setTranslate function. See Android: Vertical ListView with overlaped rows and Android: vertical 3d listview for similar questions (with solutions)

How can I create resizing spacers in JavaFX?

First of all, I'm a long time Java/Swing developer. I recently installed JavaFX 2.2 to play around with.
I'm creating a fairly simple app, whose main window has a toolbar on top and content in the rest of the window. The obvious way to accomplish this is to use a BorderPane, and stick a ToolBar into the top section. So far, so good. However, I would like some of the controls in the toolbar to be at the left edge of the window, and some at the right edge. I can find no way to do this. I can put an invisible spacer object into the toolbar, but I only know how to give it a fixed width; it doesn't resize when the window is resized.
So I thought that instead of using a ToolBar object, I'll just use an HBox; it should be equivalent to a horizontally-oriented Swing Box object, right? And the Swing Box class has a createHorizontalGlue() method that inserts an auto-sizing spacer. Well, I can't find an equivalent in the JavaFX HBox class. Is there no simple way to do this?
I figured out how to do it using an HBox instead of a ToolBar to hold the controls; the key is the HBox.setHgrow() method, which allows you to set a spacer object to grow to fill the available space. I still don't know if it's possible to do this with an actual ToolBar instance.
/**
* Creates and populates the Node that serves as the window toolbar.
*
* #return a newly constructed and populated toolbar component
*/
private Node makeToolbar() {
// Auto-sizing spacer
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
// Horizontal box containing toolbar controls
HBox box = new HBox();
box.setPadding(new Insets(8));
box.setAlignment(Pos.CENTER);
box.getChildren().addAll(openButton, spacer, resizeSlider);
// Colored background panel with drop shadow
Pane bgRect = new Pane();
bgRect.setStyle("-fx-background-color: #e0e0e0;");
bgRect.setEffect(DropShadowBuilder.create().width(1).build());
// StackPane to hold box and rectangle
StackPane stack = new StackPane();
stack.getChildren().addAll(bgRect, box);
return stack;
}
i do it this way:
private Node makeFooter(Node left, Node right) {
ToolBar footer = new ToolBar();
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
spacer.setMinWidth(Region.USE_PREF_SIZE);
footer.getItems().addAll(left, spacer, right);
return footer;
}
hope i could help someone

placing buttons at customized locations(say a circle) in blackberry

I am developing a game app for blackberry where i want to place the buttons in a semi circle fashion on the home screen.....so far I have seen all the buttons being aligned either horizontally or vertically....is there any way out where we can place buttons at custom locations such as using a layout in android and hardcoding to place them in terms of pixels? Any help is greatly appreciated
thanks
You may do this by overriding sublayout in your field manager.
In the following example setPositionChild defines the X,Y position of the first field (field 0) added to this manager. To add additional fields increment the number in this.getField() and add the fields to hfm in the order you position them.
public HorizontalFieldManager testingXYPlacement() {
HorizontalFieldManager hfm = new HorizontalFieldManager() {
// Define the x,y, positions of the fields
protected void sublayout( int width, int height ) {
super.sublayout( width, height );
Field field = null;
field = this.getField(0);
if (field != null && equals(field.getManager())) {
setPositionChild(field, XPOS, YPOS);
}
setExtent( width, height);
}
};
hfm.add(new ButtonField("hello!"));
return hfm;
}
if you are used custom button than sometimes set margin is not working properly so used button.setpadding for place your desire location .please keep USEALLWIDTH for your Horizontal or Vertical layout
If your layout is a RelativeLayout you can position elements relative to other elements within the layout (or to the entire RelativeLayout). This directly lets you place views next to other views, and you can apply margins to offset the views from others.

Monotouch - make UIView scrollable

I have a view with 4 text boxes and and a logo at the top - when the user is entering information the text pad covers up some of these controls, how can I make the view scroll so that this isn't an issue.
I have tried adding the view to a UIScrollView but that doesn't seem to do anything?
I've included a snippit below of how I've handled your situation. If I'm understanding you correctly, you do not wish to have a scrollable view, rather you want to the view to move in conjunction with switching to and from fields to alleviate and visual hindrances caused by the keyboard.
Goodluck!
private void ScrollTheView(bool movedUp, float scrollamount, UIView ViewToMove)
{
//To invoke a views built-in animation behaviour,
//you create an animation block and
//set the duration of the move...
//Set the display scroll animation and duration...
UIView.BeginAnimations(string.Empty, System.IntPtr.Zero);
UIView.SetAnimationDuration(0.15);
//Get Display size...
RectangleF frame = ViewToMove.Frame;
if (movedUp) {
//If the view should be moved up,
//subtract the keyboard height from the display...
frame.Y -= scrollamount;
}
else {
//If the view shouldn't be moved up, restore it
//by adding the keyboard height back to the original...
frame.Y += scrollamount;
}
//Assign the new frame to the view...
ViewToMove.Frame = frame;
//Tell the view that your all done with setting
//the animation parameters, and it should
//start the animation...
UIView.CommitAnimations();
}
You need to set more to the UIScrollView than just put subviews in it. Set up the ContentSize property properly for the complete size of the subviews so the scrollview knows about the larger content in it, than you can control the scrolling position, zoom factor and so on.
There are plenty of samples on iOS SDK, just check the UIScrollView documentation, transformation to Monotouch from ObjectiveC is straightforward or check blog post at http://blog.touch4apps.com/home/iphone-monotouch-development/monotouch-infinite-loop-image-scroll-view where I have a sample with images autoscrolled in UIScrollView.
something like this.
textBox.EditingDidBegin += delegate {
var offset = scrollView.contentOffset;
offset.Y -= 200;
scrollView.contentOffset = offset;
}

Resources