Xamarin UITabbar multi bar items - ios

I am using Xamarin Studio 6.0
I have created a TabBar and have added multi items to it, the items cover each others.
This is the code and screenshot:
var items = new UITabBarItem[10];
for (int i = 0; i < 10; i++)
{
var tabBarItem = new UITabBarItem("TAB ITEM"+i, null, i);
items[i] = tabBarItem;
}
TabLanguageBar.Items = items;
TabLanguageBar.ItemSpacing = 10;
TabLanguageBar.ItemSelected += (sender, e) =>
{
Console.WriteLine("tab bar button item slected");
};

That is the way a UITabBar works, you will need to either display a subset of them at one time or alter your UI design.
A tab bar displays all of its tabs onscreen at once, using the itemPositioning property to determine how to position items in the available space.
If you have more items than can fit in the available space, display only a subset of them and let the user select which tabs are displayed. The beginCustomizingItems: method displays an interface for selecting which tab bar items to display.
Ref: UITabBar

Related

ToolbarItems do not look right in iOS

I have a Xamarin.Forms app with FreshMvvm, and am trying to use secondary ToolbarItems. Here is a part of my PageModel code:
public override void Init(object initData)
{
CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "About LATICRETE", Command = AboutCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Call LATICRETE", Command = CallCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Email Technical Support", Command = EmailTechSupportCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
CurrentPage.ToolbarItems.Add(new ToolbarItem() { Text = "Visit LATICRETE Website", Command = VisitWebsiteCommand, Priority = 0, Order = ToolbarItemOrder.Secondary });
For Android, after pressing the hamburger button, the menu looks like I expect:
But at iPhone, it is quite different:
As you can see, there is no hamburger button, and all the ToolbarItems are placed horizontally next to each other, and as they do not fit withing the width of the screen, they overlap. I realize that this is the normal behavior for iOS, and yet it is not acceptable for me. Is there any way to fix it?
On iOS, the Secondary items menu appears below the navigation bar as a horizontal list.
if you want to acheve the effect like in Android,you could create a custom PageRenderer.
here is a sample,you could refer to it iOSSecondaryToolbarMenubar
the effect in Android :
the effect in ios (you could change the icon in your renderer):
1) the first page has the toolbar items:
2) all pages have the toolbar items:

iOS UITabBar items location

Is there any way to create a tab bar in iOS with 3 tab bar items having these positions:
Tab1 - margin left equals 0;
Tab2 - centered horizontally;
Tab3: margin right equals 0 ?
I tried UITabBarItemPositioning.Fill and creating a custom UITabBar in order to find some methods/properties to override, but I didn't find anything useful.
Use TitlePositionAdjustment in UITabBarItem.
You can set the horizontal margin or vertical margin.
Since UITabbarItem is not a UIView , We can't access its subview and can't get the frame from it , so we have to set different fixed values on different devices.
Ugly but it works:
nfloat TitlePositionAdjustment = 0;
if (IPhone4) {
TitlePositionAdjustment = xx;
}
else if (IPhone5)
{
TitlePositionAdjustment = xx;
}
//xxx and so on..
tab.TitlePositionAdjustment = new UIOffset(TitlePositionAdjustment, 0);
If you don't want this solution, I think you need to create custom view to simulate UITabBar.

How to get all the tab elements listed in android.widget.TextView using appium?

I want to click all the tab elements listed in TextView which is inside HorizontalScrollView. There are 13 tabs but following code fails to get the actual count, Any suggestion or alternative method to find tab elements?
List <WebElement> tablist = driver1.findElementsByAndroidUIAutomator("UiSelector().className(\"android.widget.TextView\").resourceId(\"net.abc.xyz:id/txt_tab\")");
int n = tablist.size();
System.out.println("Number of tabs " +n);
for (int i=0; i<n; i++)
{
tablist.get(i).click();
}
Thanks In Advance
Have you tries using findElements by xpath?
First locate the HorizontalScrollView element and search for the TextView elements in the scroll view.
So your code will be something like this.
Webelement scrollView = driver.finElement(By.xpath("scroll view locator here"))
scrollView.finElements(By.xpath("//android.widget.TextView[#resourceId='net.abc.xyz:id/txt_tab']"))

Setting the height of a devexpress mvc Gridview combo box

I am using a DEvExpress mvc grid with a few combo boxes and I was wondering how I can set the maximum/minimum height (in a number of rows) of the drop down section.
For example can I set the rows visible before you have to scroll or even if there is only one row of data for the drop down height to be set to a certain number of rows.
The current code for the combo I have now is
#Html.DevExpress().ComboBox(edtSettings =>
{
edtSettings.ControlStyle.CssClass = "employeeDetailsGridEditField";
edtSettings.Name = "DepartmentID";
edtSettings.Width = 350;
//edtSettings.Height = 200;
//THIS sets the height of the initial control not the drop down part
edtSettings.Properties.TextField = "DepartmentName";
edtSettings.Properties.ValueField = "DepartmentID";
edtSettings.Properties.ValueType = typeof(int);
edtSettings.Properties.DropDownStyle = DropDownStyle.DropDown;
edtSettings.ShowModelErrors = true;
}).BindList(Model.DepartmentList).Bind(Model.EmployeeSingle.DefaultDepartmentID).GetHtml()
Is there a property for the drop down section height?
Use the ComboBoxProperties.DropDownRows property to get or set the number of list items displayed within the editor's scrollable dropdown window simultaneously:
#Html.DevExpress().ComboBox(edtSettings =>
{
//...
edtSettings.Properties.DropDownRows = 5; // default is 7
//...
}).BindList(Model.DepartmentList).Bind(Model.EmployeeSingle.DefaultDepartmentID).GetHtml()

Hide and Collapse menu using Vaadin

Does any one know about how to create hide and collapse content using vaadin api.
All components inherit the setVisible() method which can trigger visibility on and off. This means all components and component containers at least. This happens without animations, though.
If you like some animations, you have to rely to add-ons, e.g. Henrik Paul's Drawer does some kind of hide and show animations.
Is this what you were thinking about?
I achieved it by using TabSheet functionality of vaadin.I created two tabs '+' and '-' whenever user clicks on '-' Tab It am setting the TabSheet height to 100% and whenever the user clicks on the '+' Tab I am setting the height of the TabSheet to 20% (visible height of the tabsheet) so whatever the content in the TabSheet will be hided in user perspective.
// Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Defining Vertical Layout for Tab 1 content
final VerticalLayout verLayout1 = new VerticalLayout();
// Tab 2 content
VerticalLayout verLayout2 = new VerticalLayout();
verLayout2.setSizeUndefined();
verLayout2.setMargin(true);
tabsheet.addTab(verLayout1, "+", null);
tabsheet.addTab(verLayout2, "-", null);
tabsheet.addListener(listenerForTab());
/**
* Method to handle tab sheet hide/show event
*
* #return TabSheet.SelectedTabChangeListener
*/
public TabSheet.SelectedTabChangeListener listenerForTab() {
_logger.info("Entering in to tabChangeListener of WizardUtil");
// Instance of TabSheet.SelectedTabChangeListener
TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
TabSheet tabsheet = event.getTabSheet();
Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
// Tab content displayed on setting height to the tab sheet
if(tab.getCaption().equals("+")) {
tabsheet.setHeight("100%");
} else {
tabsheet.setHeight("33px");
}
}
};
_logger.info("Exiting from tabChangeListener of WizardUtil");
return listener;
}

Resources