Quantcast
Jump to content

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


STF News
 Share

Recommended Posts

workout-d4.png

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
workout_details_elapsed_time.png
Time
workout_details_distance_traveled.png
Distance
workout_details_average_pace.png
Pace
workout_details_dominant_intensity.png
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

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Similar Topics

    • By BGR
      It’s typically a matter of when, not if, an upcoming smartphone will leak in full ahead of the official reveal. On Tuesday morning, press renders of the Galaxy Z Fold 4 and Galaxy Z Flip 4 leaked online. We had a good idea of what Samsung’s next-gen foldable phones would look like already, but now the final designs are floating around online.
      Galaxy Z Fold 4, Z Flip 4 press images leak
      First up is a rather blurry press render of the Galaxy Z Flip 4 from MySmartPrice. According to the site, the leaked image above comes from an industry insider. At a glance, the new phone looks virtually identical to its predecessor.
      Galaxy Z Flip 4 leaked press render. Image source: MySmartPrice On the left, we see an unfolded Galaxy Z Flip 4 with its 6.7-inch AMOLED display, with a USB-C charging port, speaker grille, and mic at the bottom.
      On the right side, we can see a number of folded Z Flips. The Z Flip 4 will reportedly come in lavender, cream, black, and blue colorways. The back of the Z Flip 4 will once again feature a dual camera setup, but rumors claim the new model is getting a 2.1-inch cover screen. That would be a touch larger than the 1.9-inch cover screen of the Z Flip 3.
      Finally, the report notes that the Z Flip 4 will feature a Snapdragon 8 Plus Gen 1 processor, a 3,700mAh battery, up to 8GB of RAM and 256GB of storage, a 12-megapixel primary camera and 12-megapixel ultrawide camera, and support for 25W fast charging.
      Higher-quality leaked images
      The same morning, Evan Blass (@evleaks) shared even higher-quality press images of both the Galaxy Z Fold 4 and Galaxy Z Flip 4 on 91mobiles.
      In the Z Flip 4 press render from Blass, it’s easier to see the hole-punch selfie camera:
      Galaxy Z Flip 4 press image leak. Image source: 91mobiles/Evan Blass Next, we have our best look yet at the Galaxy Z Fold 4. It’s hard to gather much from a shot of the phone when it’s unfolded, but Blass claims that the phone will be available in Phantom Black, Beige, and Gray Green. We can also make out the metal shell of the phone and the side-mounted power button with a fingerprint sensor:
      Galaxy Z Fold 4 press image leak. Image source: 91mobiles/Evan Blass Previous rumors have suggested that the Galaxy Z Fold 4 will feature a 7.6-inch main display, 6.2-inch cover screen, a triple rear camera setup (50MP+12MP+10MP), Snapdragon 8 Plus Gen 1 processor, 12GB of RAM, and up to 1TB of internal storage.
      In addition to a recent spate of leaks, Samsung has also seemingly confirmed the date of its next Galaxy Unpacked event. The company tweeted out this series of cryptic images on Monday hinting at the date of its next major product reveal:

      If you solve the puzzle, it offers up the following number: 081022. That would translate to August 10th, 2022, which just happens to be the date that Evan Blass shared on Twitter on Monday morning. We’ll finally see the new foldables on that date.
      The post Final designs of Galaxy Z Fold 4 and Galaxy Z Flip 4 leak online appeared first on BGR.
      View the full article
    • By STF News
      View the full blog at its source
    • By Alex
      cnet is covering Samsung's CES press conference, the South Korean electronics giant will show off its latest crop of TVs and home appliances during its presentation at the Consumer Electronics Show in Las Vegas.
       
      Samsung's presentation starts at 2 p.m. PT on Monday, and we'll be bringing you all the news and commentary from inside the Mandalay Bay hotel on the Las Vegas Strip. I'll be live blogging along with David Katzmaier, and James Martin will provide photography from the event.
       
      Samsung's 2015 CES press conference: Join us Monday (live blog)



×
×
  • Create New...