July 28, 2014

Image Detection in iOS 8

By

Prior to iOS 8, Core Image included facial recognition, allowing applications to easily detect facial features such as mouth and eye positions. This is covered in the Introduction to Core Image article in our Developer Center. In iOS 8, Apple has added additional image recognizers for detecting rectangles as well as QR codes.

CIDetectors

All of the image detectors from Core Image are available in the CIDetector class. This makes the API for doing image recognition the same regardless of which type of detector you are using. You can create an image detector via factory methods on CIDetector as listed below:

  • CIDetector.CreateRectangleDetector
  • CIDetector.CreateQRDetector
  • CIDetector.CreateFaceDetector

These methods take CIContext and CIDetectorOptions instances respectively. A CIContext orchestrates everything that happens when working with Core Image, such as applying filters and performing image detection.

CIDetectorOptions, as the name implies, allows various options to be set. For example you could set the accuracy the detector should use.

Rectangle Detector

With the CIContext and CIDetectorOptions, you can create a CIDetector, as the following code does to create a rectangle detector:

var detector = CIDetector.CreateQRDetector (context, options);

Any image features recognized by the detector are returned in an array of CIFeature objects when calling FeaturesInImage for a given CIImage:

var ciImage = CIImage.FromCGImage (imageIn.CGImage);
var features = detector.FeaturesInImage (ciImage);

Each feature has a Bounds property containing a rectangle that encloses the particular feature. This can be used to perform imaging operations on the detected feature. For example, say you want to highlight a feature on an image when it is recognized. You could use the Bounds to create an overlay over the original image:

var overlay = CIImage.ImageWithColor (CIColor.FromRgba (1.0f, 0.0f, 0.0f, 0.7f));
overlay = overlay.ImageByCroppingToRect (features [0].Bounds);
var ciImageWithOverlay = overlay.CreateByCompositingOverImage (ciImage);

This results in a semi-transparent overlay as shown below:

rectangle image detector

QR Code Detector

Core Image previously included the ability to generate QR codes. Now it allows QR code detection as well.

Using a QR code detector is similar to a rectangle detector. Simply create the detector, this time by calling CreateQRDetector, and proceed in a similar fashion to retrieve a CIFeature array.

var detector = CIDetector.CreateQRDetector (context, options);

The following screenshot shows a QR code being detected:

qr code detector

One thing to be aware of, as of iOS 8 beta 4, the QR code detector only works on a device. Calling CreateQRDetector in the simulator returns null.

The addition of new detectors in Core Image, with its high-performance, easy to use API, allows for new scenarios that previously required third party imaging libraries. Combined with the extensive filtering support of Core Image, it’s very easy to create imaging applications in iOS.

The code from this post is available here.

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail
July 25, 2014

Contest: Code Monkeys in the Wild

By

We’ve shipped Xamarin Monkeys to every corner of the world, and it’s time for them to check in.  

For this contest, all you need to do is take a picture of your plush Xamarin monkey doing something awesome! Whether it be your favorite part of your town, on a trip to an exotic paradise, or simply hanging with your dog in your backyard, help show the world how far the Xamarin community reaches.

Looking for some inspiration? Check out our well-traveled friends on @ConceptMonkeys and @MotzMonkeys.

Monkeys in Seattle

How to Enter

  1. Take a picture of your monkey doing something amazing.
  2. Tweet your picture with the hashtag #xamarin #codemonkey

Don’t have a monkey yet? No problem.  Step into our Virtual Monkey Photo Booth by running our excellent “Working with Images” Xamarin.Forms tutorial on your phone for a stand-in monkey.

Local-sml

Prizes

  • Best Monkey: Exclusive Xamarin Swag Bag
  • Best Virtual Monkey: Exclusive Xamarin Swag Bag + plush Xamarin monkey

All submissions must be made by August 4th at 8am EDT. A valid entry consists of a tweet with monkey(s). We will evaluate each photo and choose a winner based on novelty, photo quality, and reliability. Winners will be announced on Twitter. Contestants should follow @XamarinHQ to enable us to DM you for private follow-up. There is no purchase necessary to enter the Code Monkeys in the Wild contest.

TwitterFacebookGoogle+LinkedInEmail

Build Your First F# Mobile App Contest Winners

By

The launch of Xamarin 3 at the end of May brought Xamarin developers access to first-class support for F#, enabling succinct, expressive and functional mobile apps for iOS and Android. We received many great entries, making it difficult to select just two winners.

First place goes to Bernard Hsu for his app Evolution! Evolution is, “a mobile app (iOS written in Xamarin) that demos Evolutionary situations in-silico.” Bernard ported the C# version of Evolution to utilize all of the functional power of F# and will be rewarded with a new Apple Mac Mini for the valiant effort. Congratulations!

Evolution App by Bernard Shoe

Second place goes to Peter Klima’s TripDiary app. TripDiary allows you to track your, “trips to nature, for culture or wherever you want, to go take pictures and make notes during your journey.” TripDiary shows off how to interact with a SQLite database in F#, as well as how to build up a complete user interface with maps, photos, and more. Congratulations, Peter, you’ll soon be sporting a new Samsung Gear Live Watch!

tripdiary

Thank you to everyone who participated in the F# contest! Once again, we are amazed to have such a strong and inspiring community following Xamarin. To show our thanks, everyone who submitted a valid entry to the contest will be receiving a plush Xamarin monkey. If you didn’t manage to get an entry submitted this time, no worries; keep an eye on the Xamarin Blog for future contest announcements!

TwitterFacebookGoogle+LinkedInEmail
July 23, 2014

New Sprite Kit Physics Features in iOS 8

By

Sprite Kit, the 2D game framework from Apple, has some interesting new features in iOS 8 and OS X Yosemite. These include integration with Scene Kit, shader support, lighting, shadows, constraints, normal map generation and physics enhancements. Previously, I went through an introduction to Sprite Kit. This post will take a look at some of the new physics features, particularly improvements to physics bodies and physics fields.

bananas

Creating a Physics Body from a Texture

Sprite Kit now supports deriving the physics body of a sprite from its texture. This makes it easy to implement collisions that look more natural.

For example, notice in the following collision how the banana and monkey collide nearly at the surface of each image:

physics collision

Sprite Kit makes creating such a physics body possible with a single line of code. Simply call SKPhysicsBody.Create with the texture and size:

sprite.PhysicsBody = SKPhysicsBody.Create (sprite.Texture, sprite.Size);

Additionally, you can tune how the physics body is derived by passing in an alpha threshold, which defines the minimum alpha value a pixel must have to be included in the resulting physics body.

sprite.PhysicsBody = SKPhysicsBody.Create (sprite.Texture, 0.7f, sprite.Size);

Tweaking the alpha threshold like this fine-tunes the previous collision, such that the monkey falls over when colliding with the banana:

physic collision alpha threshold

Physics Fields

Another great addition to Sprite Kit is the new physics field support. These allow you to add things such as vortex fields, radial gravity fields and spring fields to name just a few.

Physics fields are created using the SKFieldNode class, which is added to a scene just like any other SKNode. There are a variety of factory methods on SKFieldNode to create different physics fields. You can create a spring field by calling SKFieldNode.CreateSpringField(), a radial gravity field by calling SKFieldNode.CreateRadialGravityField(), etc.

SKFieldNode also has properties to control field attributes such as the field strength, the field region, the noise used to generate forces, and the amount of attenuation of field forces as you move away from the field.

For example, the following code creates a spring field and adds it to the scene:

SKFieldNode fieldNode = SKFieldNode.CreateSpringField ();
fieldNode.Enabled = true;
fieldNode.Position = new PointF (Size.Width / 2, Size.Height / 2);
fieldNode.Strength = 0.5f;
fieldNode.Region = new SKRegion(Frame.Size);
AddChild (fieldNode);

You can then add sprites and set their PhysicsBody properties so that the sprites will be affected by the physics field, as the following code does when the user touches the screen:

public override void TouchesBegan (NSSet touches, UIEvent evt)
{
    var touch = touches.AnyObject as UITouch;
    var pt = touch.LocationInNode (this);
    var node = SKSpriteNode.FromImageNamed ("TinyBanana");
    node.PhysicsBody = SKPhysicsBody.Create (node.Texture, node.Size);
    node.PhysicsBody.AffectedByGravity = false;
    node.PhysicsBody.AllowsRotation = true;
    node.PhysicsBody.Mass = 0.03f;
    node.Position = pt;
    AddChild (node);
}

This causes the bananas to oscillate like a spring around the field node:

spring force field

Adding a different field is similar. For instance, the following code creates a radial gravity field:

SKFieldNode fieldNode = SKFieldNode.CreateRadialGravityField ();
fieldNode.Enabled = true;
fieldNode.Position = new PointF (Size.Width / 2, Size.Height / 2);
fieldNode.Strength = 10.0f;
fieldNode.Falloff = 1.0f;

As you can see, this results in a different force field, where the bananas are pulled radially about the field:

radial gravity field

With the new features added to Sprite Kit in iOS 8, it’s now very easy to create interesting effects in 2D iOS and OS X games. Have fun!

The code from this post is available in my GitHub repo.

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail
July 22, 2014

Announcing the Xammy Awards

By

Xammy BadgesWe are excited to announce the Xammy Awards, which will be awarded this year at Xamarin Evolve 2014. Xamarin developers represent the world’s top mobile developers and this is your chance to be recognized on our global stage.

Apps can be submitted in the following 4 categories:

  • Consumer: Tell us how your app changes the way we interact with the world and each other.
  • Gaming: Show us how you’ve created a breakthrough new game concept, or otherwise advanced the craft of game development.
  • Enterprise: Highlight how your app is transforming business processes and making BYOD work for employees and businesses.
  • Emerging Devices: Showcase how you’re taking C# to new form factors, and pioneering the next generation of mobile experiences.

There will be winners in each category, a Grand Prize winner, and a Developers’ Choice winner. Submissions are open from now until August 11th, and winners in the 4 categories will be announced at Xamarin Evolve 2014.

There is only one chance to claim a category for this inaugural year of the Xammy Awards — submit your app today!

TwitterFacebookGoogle+LinkedInEmail

Xamarin Evolve 2014: Announcing Training Classes & 39 Conference Sessions

By

Xamarin Evolve 2014 in Atlanta, GA, October 6-10We are very excited to announce the first major wave of amazing, expert-led sessions for Xamarin Evolve 2014, our annual developer conference, happening from October 6-10 in Atlanta, Georgia.

In-Depth Training Sessions Announced

Attend two days of training from Xamarin University spanning all topics from mobile development fundamentals to advanced areas such as enterprise security and data integration, getting the most from Xamarin.Forms, advanced iOS and Android topics such as graphics and animation, and tackling mobile quality with Xamarin Test Cloud.

Ten Tracks to Meet All of Your Mobile Development Needs

During three conference days, you will have the chance to attend over 50 live sessions, in 10 tracks, led by industry leaders and experts from Microsoft, GitHub, Facebook and more, covering all areas of mobile development:

  • Xamarin Platform: deep dive into C#, F#, Async, and getting the most from Xamarin Studio and Visual Studio.
  • iOS: learn about what’s new in Xamarin.iOS and iOS 8, binding Objective-C libraries, and memory management tips and tricks.
  • Android: get the scoop on Material design in Android L, the latest in Xamarin.Android, and effective navigation.
  • Cross-Platform: gain new skills in hybrid app development, Xamarin.Forms, iBeacons, augmented reality, and code-sharing architectures.
  • Mobile Best Practices: see how experts are achieving great mobile UI and UX, using functional reactive programming, and navigating the tricky world of app stores.
  • Enterprise Mobility: hear from a panel of experts on mobile security, building a modern DevOps solution, and learn from real world case studies from top companies.
  • Emerging Devices: mobile is rapidly moving beyond phones and tablets, so this is your chance to learn how Xamarin helps you get C# to all of these new form factors.
  • Gaming: From building games in iOS 8 to some secret announcements, you’ll be well equipped to build the next with Xamarin.
  • Testing: crashes and regressions are the top reasons for poor app adoption. Learn how to incorporate automated UI testing into your development workflow. Your users with thank you.
  • Mobile Ecosystem: add more awesome to your apps by leveraging the rich ecosystem of cloud services, libraries and controls that integrate with the Xamarin platform.

Register now to get your ticket to mobile expertise!

Register Now

Team Xamarin

TwitterFacebookGoogle+LinkedInEmail
July 21, 2014

Live Webinar: Test Apps on Hundreds of Devices with Xamarin Test Cloud

By

Xamarin Test Cloud

There are hundreds of mobile devices, OS versions, form factors and screen resolutions in use today, and your app needs to run on all of them. Xamarin Test Cloud makes it fast and easy to test your mobile apps on hundreds of real iOS and Android devices in the cloud, automatically.

Join Chris King, Xamarin’s Sr. Customer Success Engineer, for a live webinar this Thursday, July 24th at 8am PDT/ 11am EDT to find out why Xamarin Test Cloud is the easiest and fastest way to automate UI testing to ensure that you find bugs before your users do.

All registrants will receive a copy of the webinar, so please feel free to register even if you can’t attend.

Register Here

Want to get a head-start for the webinar? Take a few minutes to learn more about Xamarin Test Cloud.

TwitterFacebookGoogle+LinkedInEmail
July 17, 2014

Using Custom Controls in Xamarin.Forms on Windows Phone

By

Xamarin.Forms lets developers create native user interfaces on iOS, Android and Windows Phone from a single, shared C# codebase. Since the UI is rendered using the native controls of the target platform, it gives you great flexibility in customizing the controls separately on each platform. Each control is rendered differently on each platform using a Renderer class, which in turn creates a native control, arranges it on the screen and adds the behavior specified in the shared code.

Previously, we showed you how to build custom renderers in Xamarin.Forms on iOS and Android platforms to extend custom built controls. In case you missed it, its all here:

In practice,  you will use the same techniques to create custom renderers on Windows Phone as well.

WP-CustomControls-Xamarin.Forms

Windows Phone Custom Controls

.NET third party vendors provide you with wide range of top quality reusable UI controls on the Windows Phone platform. Sometimes it is easier to buy and use them than to build something on your own. Especially, the data visualization controls such as charts that transform your tabular data into something beautiful on the Windows Phone screen.

In this blog post, I will take you through steps involved in integrating a Infragistics XamDataChart control for Windows Phone in Xamarin.Forms. Xamarin.Forms-CustomControl-Charts

There are two main parts to implementing a custom control with a renderer -

  1. Create your own custom Xamarin.Forms control with bindable properties in Shared Project so that Xamarin.Forms API can refer them.
  2. Create a renderer in Windows Phone platform that will be used to display the Infragistics XamDataChart control and subscribe to property changed notifications

CustomChartView Control

In my shared project, I’m going to create a new control called CustomChartView that will be used in my Xamarin.Forms page. CustomChartView must inherit from Xamarin.Forms.View.

public class CustomChartView : View
{
  public static readonly BindableProperty ItemSourceProperty =
    BindableProperty.Create<CustomChartView, StockMarketDataSample>(p =>
    p.ItemSource, new StockMarketDataSample());
  public StockMarketDataSample ItemSource
  {
    get { return (StockMarketDataSample)GetValue(ItemSourceProperty); }
    set { SetValue(ItemSourceProperty, value); }
  }
  // Additional bindable properties
}

Notice the BindableProperty called ItemSourceProperty - this property is my DataModel which is of type StockMarketDataSample that has some necessary logic to simulate live data. In a real scenario, this will be replaced with the data that comes from a web service or something similar. In the code, you will see two more properties PriceDisplayType and ShowSpline. These are the properties that will help us interact with the chart for e.g. for changing the Price Type (CandleStick or OHLC) or Show/Hide a SplineAreaSeries from Xamarin.Forms controls.

CustomChartView Renderer

Now, with my Xamarin.Forms control in place I can write some Windows Phone platform specific code. I will implement a CustomChartViewRenderer class that inherits from a ViewRenderer and layout the XamDataChart on it.

public class CustomChartViewRenderer : ViewRenderer<CustomChartView, XamDataChart>
{
  XamDataChart DataChart;
  public CustomChartViewRenderer()
  {
    DataChart = new XamDataChart();
    //..code
  }
  //.. code
}

Since this renderer on Windows Phone inherits from View, which means Xamarin.Forms will handle all of the size calculations and will have the normal properties of a standard Windows Phone View. Add the XamDataChart to the project and update the references accordingly. Additionally, you will need to add more code to set your XAxis, YAxis and the FinancialPriceSeries to the XamDataChart. That code has been omitted from this post for brevity.

Now, I will set my renderer to display the XamDataChart control when the CustomChartView is added to the page layout. This is done by overriding the OnElmentChanged method and calling the SetNativeControl method in it.

protected override void OnElementChanged(ElementChangedEventArgs<CustomChartView> e)
{
  base.OnElementChanged(e);
  if (e.OldElement != null || this.Element == null)
    return;
  UpdateChart();
  SetNativeControl(DataChart);
}

UpdateChart() method is a private method that sets the DataContext of the XamDataChart control to the Xamarin.Forms CustomChart control’s ItemSource property.

private void UpdateChart()
{
  DataChart.DataContext = this.Element.ItemSource;
  DateXAxis.ItemsSource = this.Element.ItemSource;
  series.ItemsSource = this.Element.ItemSource;
  //.. code
}

Export Renderer Attribute

[assembly: ExportRenderer((typeof(CustomChartView)), typeof(CustomChart.WinPhone.ViewRenderers.CustomChartViewRenderer))]
namespace CustomChart.WinPhone.ViewRenderers
{
  public class CustomChartViewRenderer : ViewRenderer<CustomChartView, XamDataChart>
  {
  }
}

To get the control to show up in the actual view, I need to set an attribute ExportRenderer to the CustomChartViewRenderer class.

Wiring up the UI in XAML

Finally, I will add our custom control to the Page.  There are two approaches to create user interfaces in Xamarin.Forms. The first one is to create UI views entirely with source code using the Xamarin.Forms API. The other option available is to use Extensible Application Markup Language (XAML) which is the approach I’ve taken to build this demo.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		     x:Class="CustomChart.HomePage"
             xmlns:custom="clr-namespace:CustomChart.CustomControls;assembly=CustomChart.WinPhone">
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="*" />
            <RowDefinition Height="1" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="1"/>
        </Grid.ColumnDefinitions>
        <Grid.Padding>20</Grid.Padding>
        <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center">
            <Button Text="Start" x:Name="StartButton" />
            <Button Text="Stop"  x:Name="StopButton"  />
            <Label Text="Spline:" VerticalOptions="Center"/>
            <Switch x:Name="ShowSplineSwitch"/>
        </StackLayout>
        <Picker x:Name="chartPicker" Title="Chart Type" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Grid.Row="1"/>
        <custom:CustomChartView x:Name="chart" Grid.Row="2" />
    </Grid>
</ContentPage>

This page contains a Start Button – that starts a live feed, a Stop Button – thats stops the live feed, a Switch – that lets you show/hide a SplineAreaSeries in the Chart, and a Picker – that let’s you choose the Price Display Type (CandleStick or OHLC).

Xamarin.Forms-CustomControl-Charts-Spline

Handling Property Changes 

In the CustomChartControl of the shared project, along with the ItemSourceProperty, I have exposed the PriceDisplayTypeProperty and ShowSplineProperty as well. We can now easily set these property to interact with the XamDataChart. To make this work, we need to listen to the property changed event and set appropriate property of the XamDataChart. We will override the OnElementPropertyChanged method in the CustomChartViewRenderer class to do so.

protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
  base.OnElementPropertyChanged(sender, e);
  if (Control == null || Element == null)
    return;
  if (e.PropertyName == CustomChart.CustomControls.CustomChartView.PriceDisplayTypeProperty.PropertyName)
    series.DisplayType = Element.PriceDisplayType.ToIGPriceType();
  if (e.PropertyName == CustomChart.CustomControls.CustomChartView.ShowSplineProperty.PropertyName)
    ShowHideSpline();
}
private void ShowHideSpline()
{
  if (this.Element.ShowSpline)
    DataChart.Series.Add(splineSeries);
  else if (DataChart.Series.Contains(splineSeries))
    DataChart.Series.Remove(splineSeries);
}

Bringing it all together

That’s it! Now we can set these properties in the appropriate event handlers of the controls. Also, setting the ItemSource property to a StockMarketDataSample will populate the chart with the values.

public HomePage ()
{
  InitializeComponent ();
  chart.ItemSource = _data = new StockMarketDataSample();
}
void ShowSplineSwitch_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
  chart.ShowSpline = e.Value;
}
void chartPicker_SelectedIndexChanged(object sender, EventArgs e)
{
  PriceDisplayType priceDisplayType;
  if (Enum.TryParse<PriceDisplayType>(chartPicker.Items[chartPicker.SelectedIndex], out priceDisplayType))
    chart.PriceDisplayType = priceDisplayType;
}

To simulate a Live Data, StockMarketServiceClient is used which has a timer that ticks every few milliseconds and raises an event with new value. Subscribing to that event and updating the ItemSource will change the visualization in the chart.

Xamarin.Forms-CustomControl-WPTo learn more about customizing your Xamarin.Forms controls and applications be sure to read our documentation.

Infragistics controls were used as an example in this post to show you how well Xamarin.Forms can integrate with third party controls. You can use any third party controls or custom controls that you have built with Xamarin.Forms and the procedure to get that working remains the same. 

Source Code

You can download the full source code for this project from my GitHub. Make sure you download and install Infragistics libraries before compiling.

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail
July 16, 2014

New Collection View Features in iOS 8

By

Collection Views are a powerful user interface technology for laying out collections of data. With fantastic support for high performance grid layouts, flexible line based layouts, and fully custom layouts, along with integrated animation capabilities, they make creating beautiful data-driven UIs a wonderful experience both for the developer and the end user.

collection views

iOS 8 adds some nice enhancements to Collection Views, including the ability to self-size cells without the need for using a delegate. Likewise, the layout attributes of individual cells can now be adjusted directly from within the cell class without having to use a delegate. This makes it easier to make small layout changes that are related to a particular cell.

Self-sizing Cells

First, let’s look at how to self-size cells. Before iOS 8, creating cells that sized to their content required working within a layout class directly or via a layout’s delegate, such as the UICollectionViewDelegateFlowLayout.

For example, the following code adjusts the cell size to fit cells comprised of simple UILabels, presented using a UICollectionViewFlowLayout:

class FlowLayoutDelegate : UICollectionViewDelegateFlowLayout
{
  string[] items;
  UIStringAttributes attr;
  public FlowLayoutDelegate (string[] items)
  {
    this.items = items;
    attr = new UIStringAttributes {
      Font = new UILabel ().Font
    };
  }
  public override SizeF GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
  {
    string text = items [indexPath.Row];
    return new NSString (text).GetSizeUsingAttributes (attr);
  }
}

This code results in a Collection View where each cell fits the text it contains:

self sizing cells

Creating cells that are self-sized is much easier in iOS 8. Simply set the EstimatedItemSize on the UICollectionViewFlowLayout and implement SizeThatFits or use AutoLayout in the cell class.

For example, to self-size the cells in the example above, set EstimatedItemSize as shown below:

flowLayout = new UICollectionViewFlowLayout (){
  EstimatedItemSize = new SizeF (44, 144)
};

Then, simply adding the following implementation of SizeThatFits in the cell class produces the same result, without the need for the UICollectionViewDelegateFlowLayout implementation:

public override SizeF SizeThatFits (SizeF size)
{
  label.Frame = new RectangleF (new PointF (0, 0), label.AttributedText.Size);
  return label.AttributedText.Size;
}

Adjusting Layout Attributes in Cells

iOS 8 also makes it easier to manipulate the layout attributes returned from within the cell class without resorting to a UICollectionViewDelegateFlowLayout. Just override PreferredLayoutAttributesFittingAttributes in the cell class.

The following code changes the font of every other label and adjusts the layout for each cell appropriately:

public override UICollectionViewLayoutAttributes PreferredLayoutAttributesFittingAttributes (UICollectionViewLayoutAttributes layoutAttributes)
{
  var newLayoutAttributes = (UICollectionViewLayoutAttributes)layoutAttributes.Copy ();
  if (layoutAttributes.IndexPath.Row % 2 == 0) {
    //
    label.TextColor = UIColor.Red;
    ContentView.BackgroundColor = UIColor.LightGray;
    var attr = new NSAttributedString (Text, UIFont.SystemFontOfSize (28.0f));
    label.Font = UIFont.SystemFontOfSize (28.0f);
    //
    newLayoutAttributes.Frame = new RectangleF (new PointF (0, 0), attr.Size);
    label.Frame = new RectangleF (new PointF (0, 0), attr.Size);
  } else {
    //
    newLayoutAttributes.Frame = new RectangleF (new PointF (0, 0), label.AttributedText.Size);
    label.Frame = new RectangleF (new PointF (0, 0), label.AttributedText.Size);
  }
  return newLayoutAttributes;
}

This allows fine-grained control at the cell level, as shown below:

layout attributes

As you can see, iOS 8 adds flexibility to Collection Views, allowing granular control of cells directly from the cell class and making it easier to control cell layout and sizing when needed.

The code from this post is available here.

Discuss this blog post in the Xamarin Forums

TwitterFacebookGoogle+LinkedInEmail
July 15, 2014

Mobile .NET Meetups and Xamarin 3 Celebrations in July

By

We’ve had some amazing Xamarin 3 celebrations over the last few months, but we aren’t done just yet. This month, Mobile .NET developer groups around the world are joining in to celebrate the latest Xamarin release with pizza, cake, and in-depth sessions on all of the new features in Xamarin 3. We have also launched a brand new Twitter account, @XamarinEvents, which will regularly tweet about upcoming Xamarin and community events.

Xamarin Cake

Here are some upcoming Xamarin developer group meetups:

Nashville Xamarin User Group us

  • Nashville, TN: Tuesday, July 15th 6:30PM

  • Xamarin.Forms Demo & Lab

Austin Mobile .NET Developers Group us

  • Austin, TX: Wednesday, July 16th 6:30PM
  • Cross Platform Development with Portable Class Libraries

Portland Area .NET Users Group in

  • Portland, OR: Thursday, July 17th 6:00PM
  • Creating UIs for Cross-Platform Apps with Xamarin, with Xamarin’s James Montemagno

Los Angeles Mobile .NET Developers Group in

  • Los Angeles, CA: Monday, July 21st 7:00PM
  • Xamarin Basics

Israel .NET Developer Group il

  • Tel Aviv, Israel: Tuesday, July 22nd 5:30PM
  • Building Cross Platform Apps with Xamarin

Minnesota Enterprise Mobile in

  • Wayzata, MN: Tuesday, July 22nd 5:30PM
  • Building iOS User Interfaces with Xamarin

Northwest Valley .NET User Group in

  • Glendale, AZ: Wednesday, July 23rd 6:00PM
  • Building iOS, Android, and Windows Apps in C# with Xamarin, with Xamarin’s James Montemagno

Boston Mobile C# Developers Group us

  • Cambridge, MA: Thursday, July 24th 6:00PM
  • Introduction to Xamarin.Forms, with Xamarin’s Pierce Boggan

Arizona – Xamarin us

  • Scottsdale, AZ: Thursday, July 24th 6:00PM
  • Xamarin 3! iOS and Android Development in C# with Xamarin

Chicago .NET Mobile Developers us

  • Chicago, IL: Thursday, July 31st 5:45PM

  • Introduction to the MVVMCross Cross Platform Framework

Xamarin events are always happening around the world, so if you don’t see your city listed above, be sure to also check out the Xamarin Events forum where new meetups are being added all the time. Additionally, don’t forget to follow our brand new @XamarinEvents Twitter account to make sure you never miss an upcoming Xamarin event.

Don’t see a developer group in your area and want to get one started? We’re here to help! We have a tips and tricks guide on starting a developer group, our introduction to Xamarin slide deck, and of course our community sponsorship program to get you on your way. We also want to hear from you, so please feel free to send us an email or tweet @XamarinHQ so we can help spread the word and continue to grow the Xamarin community.

TwitterFacebookGoogle+LinkedInEmail