I have been using MT.D for some time now to make table-based UI layouts. However, I have found that XibFree is awesome for laying out custom pages while keeping the layout code as code (rather than using a designer). This is for (a) easy customization through code and (b) maintainability by other developers.
I would like to use both at the same time. XibFree's table creation isn't as easy to use as MT.D but I can't find a way to extract a UIView from a section and place it into my XibFree layout (all I need is a UIView to do this).
Any ideas? I've tried using the View from the DVC, and the TableView from the RootElement, but no luck with getting either to display in my layout.
Example:
new NativeView()
{
// table view from RootElement - shows empty space where table should be
View = entryView.TableView
},
I've also tried adding a UITableView to my view, and setting the TableView property of the DVC to that, with a call to ReloadData(), with no success.
I was able to get it to load this way:
var re = new RootElement ("") {
new Section("Please Sign In")
{
(userName = new EntryElement("User name", "Your user name", "")),
(password = new EntryElement("Password", "Your password", "", true))
}
};
var entryView = new DialogViewController (re, false);
//entryView.
var uitv = new UITableView (RectangleF.Empty, UITableViewStyle.Grouped);
entryView.LoadView ();
//entryView.TableView = uitv;
re.TableView.Frame = RectangleF.Empty;
uitv = re.TableView;
Then in my layout:
new NativeView()
{
View = uitv,
LayoutParameters = new LayoutParameters()
{
Width = AutoSize.FillParent,
Height = 200
}
},
Which gives me a scrollable region inside the view:
The region with the lines is its own scrollable view, which I did not expect given I was just giving the area the table view from the one section I created. I want to take the sections out of it and insert them into my view, so there is no scrollable view inside my view. (Never mind the weird look of the UITextfields, I'm using Pixate to style stuff.)
I hope it's just something small I am missing here and that this should be a trivial task.
EDIT: Is there also a way to calculate the height for the rendered section, to give to the LayoutParameters object?
Related
I'm trying to dynamically add new views to an existing relative layout through C# code in Xamarin.Android. I haven't find any solution on how to position child views in the relative layout. Right now they are just placed at their default location in the top left corner of the application. I've seen solutions to this problem in Xamarin.Forms but not Xamarin.Native.
I have been able to specify width and height of the view through passing a ViewGroup.LayoutParams to the AddView method of the relative layout object, but there are no constructors etc of that class that handle position.
var root = FindViewById<RelativeLayout>(Resource.Id.relativeLayout1);
var tv = new TextView(this);
root.AddView(tv, new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WrapContent,
ViewGroup.LayoutParams.WrapContent));
I want to be able to use "layout_below" on the tv view through C# and not statically through AXML.
You just need to add a rule to the layout parameters using AddRule() to place the view below the other one. Here is an example I put together that adds two TextViews, with the first being placed at the top (using .AlignTop) and the 2nd being placed below the first (using .Below).
protected override void OnCreate(Bundle savedInstanceState) {
base.OnCreate(savedInstanceState);
RelativeLayout rl = new RelativeLayout(this);
TextView tv1 = new TextView(this) {Id = View.GenerateViewId(), Text = "TextView #1"};
RelativeLayout.LayoutParams parms1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
parms1.AddRule(LayoutRules.AlignTop);
tv1.LayoutParameters = parms1;
rl.AddView(tv1);
TextView tv2 = new TextView(this) {Id = View.GenerateViewId(), Text = "TextView #2"};
RelativeLayout.LayoutParams parms2 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
parms2.AddRule(LayoutRules.Below, tv1.Id);
tv2.LayoutParameters = parms2;
rl.AddView(tv2);
SetContentView(rl);
}
Screenshot
I have a Xamarin forms application which has an event that runs every second and fetches data from a Characteristic. In this event I create the whole layout, set the data and update the view like this:
public void UpdateDisplay (ICharacteristic c) {
//Lots of irrelevant code above this.
foreach (Accelerometer item in acceloReadings)
{
counter += 1;
//Y-graph data
DataPoint itemPointY = new DataPoint();
itemPointY.X = counter;
itemPointY.Y = item.yAxes;
PointsY.Add(itemPointY);
}
yAs = new PlotModel("Variations Y-Axis");
yAs.PlotType = PlotType.XY;
yAs.Axes.Add(new LinearAxis(AxisPosition.Left, -270, 270));
y = new LineSeries();
//Custom color
y.Color = OxyColor.FromArgb(255, 154, 200, 253);
y.ItemsSource = PointsY;
yAs.Series.Add(y);
opvY = new OxyPlotView
{
WidthRequest = 100,
HeightRequest = 100,
BackgroundColor = Color.Aqua
};
opvY.Model = yAs;
Content = new StackLayout
{
opvY,
}
};
}
That code fills up all the models etc and I then want to update my graphs in the same method. I've tried a few ways:
//After all the data is re-loaded and added I want to refresh my graphs.
xAs.InvalidatePlot(true);
opvX.Model.InvalidatePlot(true);
opvX.InvalidateDisplay();
However none of these have any succes. When you look at the official docs you can see clearly it states:
"To update the plot, you must do one of the following alternatives:
Change the Model property of the PlotView control
Call Invalidate on the PlotView control
Call Invalidate on the PlotModel"
While I've tried all these ways none of them update my graphs/view. When I manually click and resize the graph I can see the data is refreshed. Eventually I want to create the graphs just once in the main method and then update the graphs with the InvalidateDisplay.
So, what am I doing wrong?!
Is it possible to replace the entire tab button for each tab with a different image in the UITabBarController?
INSTEAD OF THIS - (Standard Default Tab Controller Appearance)
DO THIS - (Custom Tab Controller Appearance Using Images)
How would I go about doing this?
Customization of the UITabBarController seems pretty nasty. You can change the tint colour, but that affects the colour of the tab image in it's various selected/not-selected states....
It's not obvious. But here's how to use full colored images and optionally omit the text label.
var tabBarItem = new UITabBarItem("Item Text", null, 1);
tabBarItem.SetFinishedImages(UIImage.FromBundle("./Images/addexpense.png"), UIImage.FromBundle("./Images/addexpense.png"));
var controllerToAdd = new UIViewController()
{
TabBarItem = tabBarItem
};
tabBarController.SetViewControllers(new UIViewController[]
{
controllerToAdd
};
The result can then look something like this (of course you can also get rid of the text completely by omitting the "Item Text" shown in my example):
I've created a view that will need to be added to several different screens. I'm struggling to figure out how to align the elements correctly in the view.
The output needs to look like the following:
I've tried the following with no success:
var uiiv = new UIImageView(image);
var firstLine = new UITextField { Text = description};
var secondLine = new UITextField { Text = summary};
this.Add(uiiv);
this.Add(firstLine );
this.Add(secondLine );
Every UI element should have a Frame property that allows you to specify the position of the element relative to it's parent view. Using this property will allow you to position the element.
I have a TabViewController. It consists of several views. For a particular view I want to add some buttons dynamically at runtime. The view already have some controls which has been created using Interface Builder.
You can add controls like this:
// create new control
var control = new UIView(); // or UIButton, etc.
// set control props ..
control.Hidden = false;
control.Frame = x // = Bounds
// ...
// add control to parent
window.AddSubview(control);
just sample code for UIButton
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self action:#selector(aMethod:) forControlEvents:UIControlEventTouchDown];
[button setTitle:#"Show View" forState:UIControlStateNormal];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[yourView addSubview:button];
Here you can set Button Type/Controlling Event/Title etc as per your requirement.
Hope this helps.