toptensoftware / xibfree Goto Github PK

View Code? Open in Web Editor NEW

61.0 11.0 25.0 4.49 MB

A lightweight, code-only layout engine for iOS/MonoTouch

C# 100.00%

xibfree's Introduction

XibFree - A lightweight, code-only layout engine for iOS/MonoTouch

Sorry :( This Project is not longer under development or maintenance. The repo is kept here for posterity only.

XibFree is a simple layout engine for code-only layouts in Xamarin.iOS (aka MonoTouch)

Code only layouts - no more Xib files.
Leverages C# language features to define layouts in a concise, flexible and powerful way.
Supports LinearLayout - the workhorse of automatic layout.
Supports FrameLayout - for overlaid views.
Deliberately uses Android terminology and concepts make it instantly familiar for cross-platform developers.
Extremely light weight, uses UIViews directly without any re-wrapping or property delegation.
Easily integrated into any existing MonoTouch project - it's not a framework so you can use it as much or as little as you like!

A Quick Example

The following is a really simple example to show what a typical XibFree layout looks like:

var layout = new LinearLayout(Orientation.Horizontal)
{
	Padding = new UIEdgeInsets(10, 10, 10, 10),
	LayoutParameters = new LayoutParameters()
	{
		Width = AutoSize.FillParent,
		Height = AutoSize.WrapContent,
	},
	SubViews = new View[]
	{
		new NativeView()
		{
			View = new UILabel()
			{
				Text = "Hello World, from XibFree",
				TextColor = UIColor.White,
				BackgroundColor = UIColor.Clear,
			},
			LayoutParameters = new LayoutParameters()
			{
				Width = AutoSize.FillParent,
				Height = AutoSize.FillParent,
			}
		},
		new NativeView()
		{
			View = new UIImageView()
			{
				Image = UIImage.FromBundle("tts512.png"),
				ContentMode = UIViewContentMode.ScaleAspectFit,
			},
			LayoutParameters = new LayoutParameters()
			{
				Width = 40,
				Height = 40,
			}
		}
	},
};

Which results in this:

Why Code-Only Layout?

Xamarin's Michael James says it pretty concisely on the Xamarin iOS Forum:

... code-only layouts have a number of other advantages. To start with, many properties and behaviors of iOS layout are not exposed in Xcode’s Interface designer. Additionally, keeping layouts in C# also allows for easier management and tracking of UI changes for development teams and makes it easier to merge changes which can be extremely time consuming when developing with xibs.

Guide

Reference

Examples

Download

Source code, including examples:

http://github.com/toptensoftware/xibfree

Compiled DLL:

XibFree.dll

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this product except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

xibfree's People

Stargazers

Watchers

xibfree's Issues

Possible measuring bug

I was browsing the code, and noticed that the getTotalMeasuredHeight in LinearLayout uses Padding.TotalWidth, and getTotalMeasuredWidth uses Padding.TotalHeight. I don't have time to dig in or write a test case, but it looked like they should have been switched around. If not, then please just delete this. :) I don't see any commits for awhile now, so I hope this project is still active.

Nesting

I first have to say, great library!
Is it a problem when I nest multiple hosts?

Removing a Subview does not remove its parent

When a subview is removed, its parent is not reset to null, so if that subview is then added to another viewgroup, it causes a System.InvalidOperationException with the message "View is already a child of another ViewGroup".

Add Layer support for NativeView

ViewGroup Layers would be convenient for Native View as well. I know that I can set a Layer on the view itself, but it won't automatically resize with the view. Would be nice to add Layer to NativeView and have it resize with the view. I find myself wrapping a NativeView with a ViewGroup, just to get support for the Layer

iNoob

ViewGroup Layers only work for LinearLayout

Setting a Layer on a FrameLayout does not work. The Layer is not shown as it will be zero size. FrameLayout.onLayout, does not call the base class version which is what resizes the Layer on Layout.

When fixing this make sure that it respects padding. My first attempts to workaround it made the layer size not include padding.

Horizontal Layout with ParentRatio

I was trying to achieve a horizontal layout with a UILabel and UITextField where the label takes 60% and the UITextField takes 40% of the parent width (parent is a vertical layout).

It works when the weight is set, but not the width.
i.e. This works (side note: the LayoutParameters constructor does not set the Weight property (line 62), I will do a pull request):

var layout = new LinearLayout(Orientation.Horizontal) { LayoutParameters = new LayoutParameters(AutoSize.FillParent, 30) }; 
layout.AddSubView(TitleLabel, new LayoutParameters(1, 30, 6) { WidthUnits = Units.ParentRatio });
layout.AddSubView(TextField, new LayoutParameters(1, 30, 4) { WidthUnits = Units.ParentRatio, Gravity = Gravity.Right});

But this does not:

var layout = new LinearLayout(Orientation.Horizontal) { LayoutParameters = new LayoutParameters(AutoSize.FillParent, 30) }; 
layout.AddSubView(TitleLabel, new LayoutParameters(0.6f, 30) { WidthUnits = Units.ParentRatio });
layout.AddSubView(TextField, new LayoutParameters(0.4f, 30) { WidthUnits = Units.ParentRatio, Gravity = Gravity.Right});

Not sure if the second way should work by design?.In LinearLayout.MeasureHorizontal (line 277), the weight is used to calculate width, which is then passed to the to the child as the parentwidth, this smaller value is then multiplied times the width. In this case, 60% of 1/2 the parent.

It looks like I could give the children Weight = 0 or the layout TotalWeight = 0 and have it work. It would pass the room left instead of the weighted ratio.

KiNoob

Weird LayoutParameters issue

Using MvvmCross, I have a view with many bindings; one of those happen to be a UILabel

new StackPanel(Orientation.Horizontal)
{
    Spacing = 10,
    SubViews = new View[]
    {
        DialPrefix = new Label("DialPrefix", MainStyleType.Header2, AutoSize.WrapContent)
        {
            TextColor = UIColor.LightGray
        },
        PhoneNumber = new Label("PhoneNumber", MainStyleType.Header2)
        {
            // hack: without specifying the height here, this label doesn't get shown with numeric only
            LayoutParameters = new LayoutParameters(AutoSize.FillParent, 20)
        },
    }
},

Weirdness: PhoneNumber is binded with a VM property (which is a string);

Now with PhoneNumber LayoutParameters as AutoSize.WrapContent, if I set the property value to something like "1234", it will not be visible; using SpyTouch, I can see that the label frame has almost no height.

If I set property value to "A123", it will then show up, or "-123"; however " 123" (space before the value) isn't visible.

Setting LayoutParameter Height to a set value solves my problem for now, but it's not neat.

I have a deadline right now, else I would have uploaded a project. I will try to do that soon.

PS: Thanks for this amazing library; some forum says it can only be used with simple layout - well it works great with all my pages, and some are not so simple :)

Add Padding support for NativeView

ViewGroup supports padding, but not NativeView. Would be nice to add padding to the dimensions of a View without wrapping it to a ViewGroup just for the sake of padding..

Create constants for common LayoutParameters values

I end up typing new LayoutParameters(AutoSize.FillParent, AutoSize.WrapContent) quite a lot, so much that sometimes I will add a local variable to the method so I can use a name like FillWidth instead of that expression.

It would be nice if we had singleton instances defined in View for all 4 combinations of fill and wrap for height and width.

The one problem with that is that LayoutParameters is mutable so that if we defined Singletons then they could be modified.

To fix that you should refactor LayoutParameters to have a read-only ILayoutParameters interface and much of the API should be changed to accept this read-only interface instead. The singleton instances would then implement the read-only interface and not subclass LayoutParameters.

Padding not working with screenratio?

I have a layout with two sub LinearLayouts. The first is set to ScreenRatio of 0.4f, the second with 0.6f (40%/60% split). For the second one, I need it to have a right padding of 20, but the views inside of it always butt right up against the screen. I also tried putting right padding on the sub controls, but same thing. It seems like padding just doesn't work with this WidthUnits setting, but maybe I'm doing something wrong.