Refactored MainView to be responsive.

diff --git a/Fitness/Views/PixelSizeInUnitsExtension.cs b/Fitness/Views/PixelSizeInUnitsExtension.cs
new file mode 100644 (file)
index 0000000..4102687
--- /dev/null
+++ b/Fitness/Views/PixelSizeInUnitsExtension.cs
@@ -0,0 +1,31 @@
+using System;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Binding;
+using Tizen.NUI.Xaml;
+
+namespace Fitness.Views
+{
+    public class PixelSizeInUnitsExtension : IMarkupExtension
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="PixelSizeInUnitsExtension"/> class.
+        /// Creates markups with given size (in units).
+        /// </summary>
+        public PixelSizeInUnitsExtension(float unitSize = 0)
+        {
+            UnitSize = unitSize;
+        }
+
+        /// <summary>
+        /// Gets or sets the size of font in units.
+        /// </summary>
+        public float UnitSize { get; set; }
+
+        /// <inheritdoc/>
+        public object ProvideValue(IServiceProvider serviceProvider)
+        {
+            return UnitsUtils.UnitsToPixels(UnitSize);
+        }
+    }
+}

diff --git a/Fitness/Views/UnitsUtils.cs b/Fitness/Views/UnitsUtils.cs
index c3faa55..29915f7 100644 (file)
--- a/Fitness/Views/UnitsUtils.cs
+++ b/Fitness/Views/UnitsUtils.cs
@@ -27,6 +27,14 @@ namespace Fitness.Views
         }
 
         /// <summary>
+        /// Converts units into pixels using current UnitSize settings
+        /// </summary>
+        public static float UnitsToPixels(float units)
+        {
+            return (float)(units * (float)Config.PixelsPerUnit);
+        }
+
+        /// <summary>
         /// Converts pixels into units using current UnitSize settings
         /// </summary>
         public static int PixelsToUnits(int pixels)

diff --git a/Fitness/res/layout/FitnessItemView.xaml b/Fitness/res/layout/FitnessItemView.xaml
index fbbdd46..15137cc 100644 (file)
--- a/Fitness/res/layout/FitnessItemView.xaml
+++ b/Fitness/res/layout/FitnessItemView.xaml
@@ -22,7 +22,7 @@
                    PositionUsesPivotPoint="true"
                    PivotPoint="0.0, 1.0"
                    ParentOrigin="0.0, 1.0"
-                   PixelSize="24"
+                   PixelSize="{views:PixelSizeInUnits UnitSize=6}"
                    Text="{Binding Title}">
             <TextLabel.FontStyle>
                 <PropertyMap>
@@ -33,7 +33,7 @@
 
         <ImageView x:Name="favourite"
                    BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"
-                   Size="40, 40"
+                   Size="{views:SizeInUnits Width=10, Height=10}"
                    PositionUsesPivotPoint="true"
                    PivotPoint="1.0, 0.0"
                    ParentOrigin="1.0, 0.0"

diff --git a/Fitness/res/layout/MainView.xaml b/Fitness/res/layout/MainView.xaml
index 06c6e29..7cf8cb2 100644 (file)
--- a/Fitness/res/layout/MainView.xaml
+++ b/Fitness/res/layout/MainView.xaml
@@ -11,6 +11,7 @@
            xmlns:behaviors="clr-namespace:Fitness.Views.Behaviors"
            HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
            WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+           Padding="{views:ExtentsInUnits Top=6, Bottom=10}"
            BackgroundColor="#EEEFF1"
            ParentOrigin="Center"
            PivotPoint="Center"
@@ -19,40 +20,36 @@
     <View.BindingContext>
         <vm:MainViewModel x:Name="context"/>
     </View.BindingContext>
-    
+
     <View.Layout>
-        <LinearLayout LinearOrientation="Vertical"
-                      LinearAlignment="Top"/>
+        <LinearLayout LinearOrientation="Vertical"/>
     </View.Layout>
-    
+
     <nui:Button BindingContext="{Binding Source={x:Reference context}}"
                 Size="{views:SizeInUnits Width=12, Height=12}"
-                Margin="{views:ExtentsInUnits Start=12, Top=12, Bottom=8}"
+                Margin="{views:ExtentsInUnits Start=6, Bottom=8}"
                 behaviors:StyleSetter.Style="{x:Static styles:Buttons.Exit}"
                 Command="{Binding Exit}"/>
-    
+
     <View Margin="{views:ExtentsInUnits Start=16, End=16}"
-          Weight="1.0"
           WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
           HeightSpecification="{Static LayoutParamPolicies.MatchParent}">
-        
+
         <View.Layout>
-            <LinearLayout LinearOrientation="Horizontal"
-                          LinearAlignment="Begin"/>
+            <LinearLayout LinearOrientation="Horizontal"/>
         </View.Layout>
         
         <ImageView BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
-                   Weight="1.0"
-                   HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
-                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
                    ResourceUrl="{Binding ThumbnailUrl}"
+                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                   HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
                    x:Name="imagePreview"
                    ctrl:Connected.Id="preview">
             
             <ImageView.Layout>
                 <LinearLayout LinearOrientation="Vertical"
                               LinearAlignment="Center"
-                              CellPadding="0, 40"/>
+                              CellPadding="{views:SizeInUnits Width=0, Height=10}"/>
             </ImageView.Layout>
             
             <ctrl:NinePatchButton BindingContext="{Binding Source={x:Reference context}}"
@@ -74,29 +71,31 @@
                                   behaviors:StyleSetter.Style="{x:Static styles:Buttons.Regular}"/>
             
         </ImageView>
-        
-        <View Size="{views:SizeInUnits Width=107}"
-              Margin="{views:ExtentsInUnits Start=8}"
+
+        <View Size="{views:SizeInUnits Width=114}"
               HeightSpecification="{Static LayoutParamPolicies.MatchParent}">
             
-            <View HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
-                  WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            <View.Layout>
+                <AbsoluteLayout/>
+            </View.Layout>
+
+            <View>
                 
                 <View.Layout>
                     <LinearLayout LinearOrientation="Vertical"
                                   LinearAlignment="Begin"/>
                 </View.Layout>
                 
-                <View>
+                <View Margin="{views:ExtentsInUnits Start=6, Top=3}">
                     
                     <View.Layout>
                         <LinearLayout LinearOrientation="Horizontal"
                                       LinearAlignment="Begin"/>
                     </View.Layout>
-
+                    
                     <TextLabel BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
                                Text="{Binding Path=Title}"
-                               PixelSize="40"
+                               PixelSize="{views:PixelSizeInUnits UnitSize=10}"
                                VerticalAlignment="Center"
                                TextColor="#000C2B">
                         <TextLabel.FontStyle>
@@ -107,26 +106,26 @@
                     </TextLabel>
 
                     <ImageView BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
-                               Size="36, 48"
-                               Margin="30, 30, 0, 0"
+                               Size="{views:SizeInUnits Width=9, Height=12}"
+                               Margin="{views:ExtentsInUnits Start=7, End=7}"
                                ResourceUrl="{Binding Difficulty, Converter={Static converters:DifficultyLevelToIconConverter.Converter}}"/>
-                
+                    
                 </View>
                 
-                <View>
+                <View Margin="{views:ExtentsInUnits Start=6, Top=4}">
                     
                     <View.Layout>
                         <LinearLayout LinearOrientation="Horizontal"
                                       LinearAlignment="Begin"/>
                     </View.Layout>
                     
-                    <ImageView Size="28, 28"
+                    <ImageView Size="{views:SizeInUnits Width=7, Height=7}"
                                ResourceUrl="*Resource*/layout/images/icon_time.png"/>
-
+                    
                     <TextLabel BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
                                Text="{Binding Duration, StringFormat=\{0:h\\:mm\\:ss\}}"
-                               PixelSize="28"
-                               Margin="8, 0, 0, 0"
+                               PixelSize="{views:PixelSizeInUnits UnitSize=7}"
+                               Margin="{views:ExtentsInUnits Start=2}"
                                VerticalAlignment="Center"
                                TextColor="#000C2B">
                         <TextLabel.FontStyle>
@@ -138,39 +137,40 @@
 
                 </View>
 
-                <TextLabel BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
-                           Size="{views:SizeInUnits Width=107}"
-                           Text="{Binding Description}"
-                           PixelSize="28"
-                           LineWrapMode="Word"
-                           Weight="1.0"
-                           VerticalAlignment="Bottom"
-                           Ellipsis="false"
-                           MultiLine="true"
-                           TextColor="#000C2B"
-                           EnableAutoScroll="true">
-                    <TextLabel.FontStyle>
-                        <PropertyMap>
-                            <KeyValue Key="weight" Value="regular" />
-                        </PropertyMap>
-                    </TextLabel.FontStyle>
-                </TextLabel>
-
             </View>
-            
+
             <ImageView PositionUsesPivotPoint="true"
                        PivotPoint="1.0, 0.0"
                        ParentOrigin="1.0, 0.0"
-                       Size="30, 30"
+                       Size="{views:SizeInUnits Width=10, Height=10}"
                        BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
                        ResourceUrl="{Binding Favourite, Converter={Static converters:FavouriteToIconConverter.Converter}}"/>
-        
-        </View>
-        
+
+            <TextLabel BindingContext="{Binding Source={x:Reference context}, Path=SelectedWorkout}"
+                       Padding="{views:ExtentsInUnits Start=4}"
+                       WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                       Text="{Binding Description}"
+                       PixelSize="{views:PixelSizeInUnits UnitSize=7}"
+                       LineWrapMode="Mixed"
+                       Weight="1.0"
+                       Ellipsis="false"
+                       MultiLine="true"
+                       TextColor="#000C2B"
+                       PositionUsesPivotPoint="true"
+                       PivotPoint="BottomLeft"
+                       ParentOrigin="BottomLeft">
+                <TextLabel.FontStyle>
+                    <PropertyMap>
+                        <KeyValue Key="weight" Value="regular" />
+                    </PropertyMap>
+                </TextLabel.FontStyle>
+            </TextLabel>
+            
+        </View>        
     </View>
-    
+
     <nui:CollectionView Size="{views:SizeInUnits Height=44}"
-                        Margin="{views:ExtentsInUnits Top=10, Bottom=10, Start=16, End=16}"
+                        Margin="{views:ExtentsInUnits Top=10}"
                         WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
                         ItemsSource="{Binding Workouts}"
                         SelectedItem="{Binding Path=SelectedWorkout, Mode=TwoWay}"