Workout, a Tizen Sample App: Using CircleListView to Display Data

[Samsung Newsroom]

This is the final blog in a series to introduce the sample application Workout, a Tizen example for monitoring health sensors on a wearable device.

The first blog, Workout -- A Tizen Sample App for Monitoring Health Sensors, presented the basic features of the application. The second blog, Adding Distance Traveled to the Tizen Workout Sample App, described how distance traveled is calculated. The third blog, Adding Heart Rate Summary to the Tizen Workout App, demonstrated how heart rate data is gathered.

This blog describes how the application uses the Tizen.Wearable.CircularUI extension of the Xamarin.Forms framework. This extension provides a set of components customized for the wearable profile that makes development easier and efficient. It provides, among others, a CircleListView component, which is used on the summary view of the application. The list contains elements that differ from each other in terms of appearance. Apart from the different contents of the text, they allow you to:

• Use different icon images
• Set different positions of text elements on selected elements
• Use converters for selected list items
• Display the action button on selected elements of the list

Time

Distance

Pace

Intensity

ItemSource

The information about how the individual elements of the list should look like is provided by ItemSource, which is represented by the list of elements of the DetailsItemData class.

Views/Workout/DetailsPageView.xaml

<cui:CircleListView.ItemsSource>
    <x:Array Type="{x:Type models:DetailsItemData}">
        <models:DetailsItemData Name="time"
                                Value="{Binding ElapsedTime}"
                                Icon="images/details_time_icon.png">
            <models:DetailsItemData.ValueBounds>
                <Rectangle X=".5" Y="193" Width="-1" Height="-1" />
            </models:DetailsItemData.ValueBounds>
            <models:DetailsItemData.NameBounds>
                <Rectangle X=".5" Y="245" Width="-1" Height="-1" />
            </models:DetailsItemData.NameBounds>
        </models:DetailsItemData>
        <models:DetailsItemData Name="distance"
                                Value="{Binding Distance}"
                                Icon="images/details_distance_icon.png">
            <models:DetailsItemData.ValueBounds>
                <Rectangle X=".5" Y="193" Width="-1" Height="-1" />
            </models:DetailsItemData.ValueBounds>
            <models:DetailsItemData.NameBounds>
                <Rectangle X=".5" Y="245" Width="-1" Height="-1" />
            </models:DetailsItemData.NameBounds>
        </models:DetailsItemData>
        <models:DetailsItemData Name="average pace"
                                Value="{Binding AveragePace}"
                                Icon="images/details_average_pace_icon.png">
            <models:DetailsItemData.ValueBounds>
                <Rectangle X=".5" Y="193" Width="-1" Height="-1" />
            </models:DetailsItemData.ValueBounds>
            <models:DetailsItemData.NameBounds>
                <Rectangle X=".5" Y="245" Width="-1" Height="-1" />
            </models:DetailsItemData.NameBounds>
        </models:DetailsItemData>
        <models:DetailsItemData Name="intensity"
                                Value="{Binding Intensity, Converter={StaticResource BpmRangeValueConverter}}"
                                Icon="images/details_intensity_icon.png"
                                IsActionButtonVisible="True">
            <models:DetailsItemData.ValueBounds>
                <Rectangle X=".5" Y="172" Width="-1" Height="-1" />
            </models:DetailsItemData.ValueBounds>
            <models:DetailsItemData.NameBounds>
                <Rectangle X=".5" Y="224" Width="-1" Height="-1" />
            </models:DetailsItemData.NameBounds>
        </models:DetailsItemData>
    </x:Array>
</cui:CircleListView.ItemsSource>

Models/Workout/DetailsItemData.cs

using Xamarin.Forms;
 
namespace Workout.Models.Workout
{
    /// <summary>
    /// Details item data class.
    /// Used as one element of the details page list.
    /// </summary>
    public class DetailsItemData : BindableObject
    {
        #region properties
 
        public static readonly BindableProperty ValueProperty =
            BindableProperty.Create("Value", typeof(string), typeof(DetailsItemData), default(string));
 
        /// <summary>
        /// Workout detail name.
        /// </summary>
        public string Name
        {
            get;
            set;
        }
 
        /// <summary>
        /// Workout detail value.
        /// </summary>
        public string Value
        {
            get => (string)GetValue(ValueProperty);
            set => SetValue(ValueProperty, value);
        }
 
        /// <summary>
        /// Workout detail icon.
        /// </summary>
        public string Icon
        {
            get;
            set;
        }
 
        /// <summary>
        /// Item layout value bounds.
        /// </summary>
        public Rectangle ValueBounds
        {
            get;
            set;
        }
 
        /// <summary>
        /// Item layout name bounds.
        /// </summary>
        public Rectangle NameBounds
        {
            get;
            set;
        }
 
        /// <summary>
        /// Workout detail action button visibility flag.
        /// </summary>
        public bool IsActionButtonVisible
        {
            get;
            set;
        }
 
        #endregion
    }
}

ItemTemplate

The values provided by ItemSource are used in ItemTemplate.

Views/Workout/DetailsPageView.xaml

<cui:CircleListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <AbsoluteLayout HeightRequest="360"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand">
                <Image AbsoluteLayout.LayoutFlags="XProportional"
                       AbsoluteLayout.LayoutBounds=".5, 74, AutoSize, AutoSize">
                    <Image.Source>
                        <FileImageSource File="{Binding Icon}" />
                    </Image.Source>
                </Image>
                <Label Text="{Binding Value}"
                       FontSize="{StaticResource FontSizeM}"
                       TextColor="#FFF"
                       AbsoluteLayout.LayoutFlags="XProportional"
                       AbsoluteLayout.LayoutBounds="{Binding ValueBounds}">
                </Label>
                <Label Text="{Binding Name}"
                       FontSize="{StaticResource FontSizeXXS}"
                       FontAttributes="Bold"
                       TextColor="#AAFFCC"
                       AbsoluteLayout.LayoutFlags="XProportional"
                       AbsoluteLayout.LayoutBounds="{Binding NameBounds}">
                </Label>
                <Button AbsoluteLayout.LayoutFlags="All"
                        AbsoluteLayout.LayoutBounds="0, 1, 1, .25"
                        Text="OK"
                        TextColor="#1B1B7D"
                        BackgroundColor="#AAFFCC"
                        Command="{Binding BindingContext.FinishCommand, Source={x:Reference listView}}"
                        IsVisible="{Binding IsActionButtonVisible}"
                        tizen:VisualElement.Style="bottom" />
            </AbsoluteLayout>
        </ViewCell>
    </DataTemplate>
</cui:CircleListView.ItemTemplate>

The values modify the content in each ViewCell element accordingly, so that:

• The Name and Value properties set the values of the Text property of the selected Label elements
• The NameBounds and ValueBounds properties set the LayoutBounds property of absolutely positioned Label elements
• The Icon property sets the Source property of the Image elements responsible for displaying the item icon
• The IsActionButtonVisible property sets the IsVisible property of Button elements, making them visible when the given value is True

Read More

To learn more about the implementation of CircleListView in the Workout application, please see this tutorial.

Thank you for reading the tutorials about the Workout app. For more information about this app and developing for the Tizen platform, please visit developer.tizen.org.

View the full blog at its source