Adding Mini-Player and AlbumDetails View Scalable UI changes

Change-Id: I080c3f316a08480f0f6c1a94d995a96b22119bdb
Signed-off-by: aman.jeph <aman.jeph@samsung.com>

diff --git a/music-player/Common/DeviceInfo.cs b/music-player/Common/DeviceInfo.cs
new file mode 100755 (executable)
index 0000000..c26ff54
--- /dev/null
+++ b/music-player/Common/DeviceInfo.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Tizen.NUI;
+
+namespace MusicPlayer.Common
+{
+    public static class DeviceInfo
+    {
+        static DeviceInfo()
+        {
+            IsPortrait = Window.Instance.WindowSize.Width < Window.Instance.WindowSize.Height;
+        }
+
+        public static bool IsPortrait { get; private set; }
+    }
+}

diff --git a/music-player/Views/AlbumDetailView.cs b/music-player/Views/AlbumDetailView.cs
index 188094479f21353135312bd73ea56e51a1a9f4a7..4adaa99defbeec9547526307f3a17c96d23baf44 100755 (executable)
--- a/music-player/Views/AlbumDetailView.cs
+++ b/music-player/Views/AlbumDetailView.cs
@@ -11,10 +11,8 @@ namespace MusicPlayer.Views
     class AlbumDetailView : BaseSubContentView\r
     {\r
         private const int AlbumArtSize = 520;\r
-        private const int ControlViewHeight = 60;\r
 \r
-        private View leftView;\r
-        private View rightView;\r
+        private View albumInfoView;\r
         private ImageView albumArtIcon;\r
         private TextLabel albumNameLabel;\r
         private TextLabel albumArtistLabel;\r
@@ -24,9 +22,24 @@ namespace MusicPlayer.Views
         {\r
             Name = "AlbumDetailView";\r
             this.viewModel = viewModel;\r
-            leftView = CreateLeftView();\r
-            rightView = CreateRightView();\r
-            rightView.Add(listContainer);\r
+            LinearLayout baseLayout = new LinearLayout();\r
+            if(DeviceInfo.IsPortrait)\r
+            {\r
+                baseLayout.LinearOrientation = LinearLayout.Orientation.Vertical;\r
+                baseLayout.Padding = new Extents(32, 32, 0, 0);\r
+                baseLayout.VerticalAlignment = VerticalAlignment.Top;\r
+                baseLayout.HorizontalAlignment = HorizontalAlignment.Center;\r
+            }\r
+            else\r
+            {\r
+                baseLayout.LinearOrientation = LinearLayout.Orientation.Horizontal;\r
+                baseLayout.Padding = new Extents(64, 64, 0, 0);\r
+                baseLayout.VerticalAlignment = VerticalAlignment.Center;\r
+                baseLayout.HorizontalAlignment = HorizontalAlignment.Begin;\r
+            }\r
+            Layout = baseLayout;\r
+            albumInfoView = CreateLeftView();\r
+            AddListContainer();\r
             countLabel.BindingContext = viewModel;\r
             countLabel.SetBinding(TextLabel.TextProperty, "TotalTracks");\r
             UpdateCollectionView();\r
@@ -68,12 +81,11 @@ namespace MusicPlayer.Views
             }\r
             if(type == DisposeTypes.Explicit)\r
             {\r
-                rightView?.Remove(listContainer);\r
-                if (leftView != null)\r
+                if (albumInfoView != null)\r
                 {\r
-                    leftView.Remove(albumArtIcon);\r
-                    leftView.Remove(albumNameLabel);\r
-                    leftView.Remove(albumArtistLabel);\r
+                    albumInfoView.Remove(albumArtIcon);\r
+                    albumInfoView.Remove(albumNameLabel);\r
+                    albumInfoView.Remove(albumArtistLabel);\r
                 }\r
                 albumArtIcon?.Dispose();\r
                 albumArtIcon = null;\r
@@ -81,12 +93,10 @@ namespace MusicPlayer.Views
                 albumNameLabel = null;\r
                 albumArtistLabel?.Dispose();\r
                 albumArtistLabel = null;\r
-                Remove(leftView);\r
-                Remove(rightView);\r
-                leftView?.Dispose();\r
-                leftView = null;\r
-                rightView?.Dispose();\r
-                rightView = null;\r
+                Remove(albumInfoView);\r
+                Remove(listContainer);\r
+                albumInfoView?.Dispose();\r
+                albumInfoView = null;\r
             }\r
             base.Dispose(type);\r
         }\r
@@ -94,14 +104,12 @@ namespace MusicPlayer.Views
         protected override void OnPlayAllClicked()\r
         {\r
             base.OnPlayAllClicked();\r
-            Tizen.Log.Error(AppConstants.LogTag, "AlbumDetailView OnPlayAllClicked");\r
             viewModel.PlayAll();\r
         }\r
 \r
         protected override void OnPlayAllWithShuffleClicked()\r
         {\r
             base.OnPlayAllWithShuffleClicked();\r
-            Tizen.Log.Error(AppConstants.LogTag, "AlbumDetailView OnPlayAllWithShuffleClicked");\r
             viewModel.PlayAllWithShuffle();\r
         }\r
 \r
@@ -120,29 +128,33 @@ namespace MusicPlayer.Views
             View leftView = new View()\r
             {\r
                 BackgroundColor = Color.Transparent,\r
-                SizeWidth = Window.Instance.WindowSize.Width / 2,\r
-                HeightResizePolicy = ResizePolicyType.FillToParent,\r
-                Position2D = new Position2D(0, 0),\r
-                Layout = new FlexLayout\r
+                Layout = new LinearLayout()\r
                 {\r
-                    Direction = FlexLayout.FlexDirection.Column,\r
-                    ItemsAlignment = FlexLayout.AlignmentType.Center,\r
-                    Justification = FlexLayout.FlexJustification.FlexStart,\r
+                   LinearOrientation = LinearLayout.Orientation.Vertical,\r
+                   VerticalAlignment = VerticalAlignment.Center,\r
+                   HorizontalAlignment = HorizontalAlignment.Center,\r
                 },\r
-                Padding = new Extents(0, 0, ControlViewHeight, 42),\r
+                Weight = 0.5f\r
             };\r
+            leftView.WidthSpecification = LayoutParamPolicies.MatchParent;\r
+            leftView.HeightSpecification = LayoutParamPolicies.MatchParent;\r
             base.Add(leftView);\r
             return leftView;\r
         }\r
 \r
+        private void AddListContainer()\r
+        {\r
+            listContainer.WidthSpecification = LayoutParamPolicies.MatchParent;\r
+            listContainer.HeightSpecification = LayoutParamPolicies.MatchParent;\r
+            base.Add(listContainer);\r
+        }\r
+\r
         private View CreateRightView()\r
         {\r
             View rightView = new View()\r
             {\r
                 BackgroundColor = Color.Transparent,\r
-                SizeWidth = Window.Instance.WindowSize.Width / 2,\r
-                HeightResizePolicy = ResizePolicyType.FillToParent,\r
-                Position2D = new Position2D(Window.Instance.WindowSize.Width / 2, 0),\r
+                Weight = 1.0f,\r
                 Layout = new FlexLayout\r
                 {\r
                     Direction = FlexLayout.FlexDirection.Column,\r
@@ -150,6 +162,14 @@ namespace MusicPlayer.Views
                     Justification = FlexLayout.FlexJustification.FlexStart,\r
                 },\r
             };\r
+            if (DeviceInfo.IsPortrait)\r
+            {\r
+                rightView.WidthSpecification = LayoutParamPolicies.MatchParent;\r
+            }\r
+            else\r
+            {\r
+                rightView.HeightSpecification = LayoutParamPolicies.MatchParent;\r
+            }\r
             base.Add(rightView);\r
             return rightView;\r
         }\r
@@ -159,11 +179,11 @@ namespace MusicPlayer.Views
             albumArtIcon = new ImageView()\r
             {\r
                 BackgroundColor = UIColors.HEXEEEFF1,\r
-                Size2D = new Size2D(AlbumArtSize, AlbumArtSize),\r
+                Size2D = new Size2D(AlbumArtSize, AlbumArtSize).DpToPx(),\r
             };\r
             albumArtIcon.BindingContext = viewModel;\r
             albumArtIcon.SetBinding(ImageView.ResourceUrlProperty, "AlbumArtPath");\r
-            leftView.Add(albumArtIcon);\r
+            albumInfoView.Add(albumArtIcon);\r
         }\r
         private void AddAlbumInfo()\r
         {\r
@@ -171,9 +191,10 @@ namespace MusicPlayer.Views
             {\r
                 StyleName = "LabelText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(640, 48),\r
-                PixelSize = 36,\r
-                Margin = new Extents(0, 0, 32, 0),\r
+                WidthSpecification = (DeviceInfo.IsPortrait ? 508 : 640).DpToPx(),\r
+                HeightSpecification = 48.DpToPx(),\r
+                PixelSize = 36.DpToPx(),\r
+                Margin = new Extents(0, 0, 32, 14).DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 HorizontalAlignment = HorizontalAlignment.Center,\r
                 VerticalAlignment = VerticalAlignment.Center,\r
@@ -182,14 +203,14 @@ namespace MusicPlayer.Views
             };\r
             albumNameLabel.BindingContext = viewModel;\r
             albumNameLabel.SetBinding(TextLabel.TextProperty, "AlbumName");\r
-            leftView.Add(albumNameLabel);\r
+            albumInfoView.Add(albumNameLabel);\r
             albumArtistLabel = new TextLabel()\r
             {\r
                 StyleName = "LabelText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(640, 36),\r
-                PixelSize = 28,\r
-                Margin = new Extents(0, 0, 14, 0),\r
+                WidthSpecification = (DeviceInfo.IsPortrait ? 508 : 640).DpToPx(),\r
+                HeightSpecification = 36.DpToPx(),\r
+                PixelSize = 28.DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 HorizontalAlignment = HorizontalAlignment.Center,\r
                 VerticalAlignment = VerticalAlignment.Center,\r
@@ -198,7 +219,7 @@ namespace MusicPlayer.Views
             };\r
             albumArtistLabel.BindingContext = viewModel;\r
             albumArtistLabel.SetBinding(TextLabel.TextProperty, "ArtistName");\r
-            leftView.Add(albumArtistLabel);\r
+            albumInfoView.Add(albumArtistLabel);\r
         }\r
 \r
         private void UpdateCollectionView()\r

diff --git a/music-player/Views/MiniPlayer.cs b/music-player/Views/MiniPlayer.cs
index add31030a0f37aa35bb859a173b5587d208e5f3e..0af7edb0a3fc5262b2b4de9e6aa9f93219d3bc42 100755 (executable)
--- a/music-player/Views/MiniPlayer.cs
+++ b/music-player/Views/MiniPlayer.cs
@@ -12,8 +12,10 @@ namespace MusicPlayer.Views
 {\r
     class MiniPlayer : View\r
     {\r
+        private const int SliderHeight = 38;\r
         private ImageView thumbnail;\r
         private View trackInfo;\r
+        private View trackTextView;\r
         private TextLabel titleLabel;\r
         private TextLabel artistLabel;\r
 \r
@@ -35,24 +37,34 @@ namespace MusicPlayer.Views
             StyleName = "MiniPlayer";\r
             ThemeChangeSensitive = true;\r
             WidthSpecification = LayoutParamPolicies.MatchParent;\r
-            HeightSpecification = 124;\r
+            HeightSpecification = (DeviceInfo.IsPortrait ? 170 : 124).DpToPx();\r
+\r
+            Layout = new LinearLayout()\r
+            {\r
+                LinearOrientation = LinearLayout.Orientation.Vertical,\r
+            };\r
+            AddSeparatorLine();\r
             baseView = new View()\r
             {\r
                 WidthSpecification = LayoutParamPolicies.MatchParent,\r
-                HeightSpecification = LayoutParamPolicies.MatchParent,\r
+                HeightSpecification = 123.DpToPx(),\r
                 BackgroundColor = Color.Transparent,\r
-                Position = new Position(0, 0),\r
+                Layout = new LinearLayout()\r
+                {\r
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,\r
+                    VerticalAlignment = VerticalAlignment.Center,\r
+                },\r
+                Padding = new Extents(64, 64, 24, 19).DpToPx(),\r
             };\r
-            Add(baseView);\r
-            baseView.Layout = new FlexLayout()\r
+            if(DeviceInfo.IsPortrait)\r
             {\r
-                Direction = FlexLayout.FlexDirection.Row,\r
-                Padding = new Extents(64, 64, 24, 20),\r
-            };\r
+                baseView.Padding = new Extents(33, 33, 24, 8).DpToPx();\r
+                baseView.HeightSpecification = 108.DpToPx();\r
+            }\r
+            Add(baseView);\r
             AddTrackDetails();\r
             AddControlElements();\r
             AddSliderElements();\r
-            AddSeparatorLine();\r
         }\r
 \r
         private void AddSeparatorLine()\r
@@ -60,27 +72,51 @@ namespace MusicPlayer.Views
             View separator = new View()\r
             {\r
                 WidthSpecification = LayoutParamPolicies.MatchParent,\r
-                HeightSpecification = 1,\r
+                HeightSpecification = 1.DpToPx(),\r
                 StyleName = "InputLine",\r
-                Position = new Position(0, 0),\r
             };\r
             Add(separator);\r
         }\r
 \r
         private void AddTrackDetails()\r
         {\r
-            AddThumbnail();\r
             trackInfo = new View()\r
             {\r
-                WidthSpecification = 666,\r
-                Layout = new FlexLayout()\r
+                Layout = new LinearLayout()\r
                 {\r
-                    Direction = FlexLayout.FlexDirection.Column,\r
-                    Padding = new Extents(30, 120, 0, 0),\r
-                    Margin = new Extents(0, 0, 0, 5),\r
-                }\r
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,\r
+                },\r
+                BackgroundColor = Color.Transparent,\r
             };\r
+            trackInfo.WidthSpecification = (DeviceInfo.IsPortrait ? 536 : 622).DpToPx();\r
+            trackInfo.HeightSpecification = 76.DpToPx();\r
             baseView.Add(trackInfo);\r
+            AddThumbnail();\r
+            AddTrackTextLabels();\r
+        }\r
+\r
+        private void AddTrackTextLabels()\r
+        {\r
+            trackTextView = new View()\r
+            {\r
+                BackgroundColor = Color.Transparent,\r
+                Layout = new LinearLayout()\r
+                {\r
+                    LinearOrientation = LinearLayout.Orientation.Vertical,\r
+                },\r
+                HeightSpecification = 76.DpToPx(),\r
+            };\r
+            if(DeviceInfo.IsPortrait)\r
+            {\r
+                trackTextView.WidthSpecification = 436.DpToPx();\r
+                trackTextView.Margin = new Extents(24, 0, 0, 0);\r
+            }\r
+            else\r
+            {\r
+                trackTextView.WidthSpecification = 516.DpToPx();\r
+                trackTextView.Margin = new Extents(30, 0, 0, 0);\r
+            }\r
+            trackInfo.Add(trackTextView);\r
             AddTrackName();\r
             AddArtistName();\r
         }\r
@@ -90,8 +126,7 @@ namespace MusicPlayer.Views
             thumbnail = new ImageView()\r
             {\r
                 BackgroundColor = UIColors.HEXEEEFF1,\r
-                Size2D = new Size2D(76, 76),\r
-                Margin = new Extents(0, 0, 0, 5),\r
+                Size2D = new Size2D(76, 76).DpToPx(),\r
             };\r
             thumbnail.SetBinding(ImageView.ResourceUrlProperty, "ThumbnailPath");\r
             thumbnail.TouchEvent += (object source, TouchEventArgs e) =>\r
@@ -99,7 +134,7 @@ namespace MusicPlayer.Views
                 PlaybackHelper.Instance.ShowPlayer();\r
                 return true;\r
             };\r
-            baseView.Add(thumbnail);\r
+            trackInfo.Add(thumbnail);\r
         }\r
 \r
         private void AddTrackName()\r
@@ -108,15 +143,16 @@ namespace MusicPlayer.Views
             {\r
                 StyleName = "TitleText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(516, 48),\r
-                PixelSize = 36,\r
+                WidthSpecification = LayoutParamPolicies.MatchParent,\r
+                HeightSpecification = 48.DpToPx(),\r
+                PixelSize = 36.DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 HorizontalAlignment = HorizontalAlignment.Begin,\r
                 VerticalAlignment = VerticalAlignment.Center,\r
                 Ellipsis = true,\r
             };\r
             titleLabel.SetBinding(TextLabel.TextProperty, "TrackName");\r
-            trackInfo.Add(titleLabel);\r
+            trackTextView.Add(titleLabel);\r
         }\r
 \r
         private void AddArtistName()\r
@@ -125,28 +161,31 @@ namespace MusicPlayer.Views
             {\r
                 StyleName = "TitleText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(382, 28),\r
-                PixelSize = 22,\r
+                WidthSpecification = LayoutParamPolicies.MatchParent,\r
+                HeightSpecification = 28.DpToPx(),\r
+                PixelSize = 22.DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 HorizontalAlignment = HorizontalAlignment.Begin,\r
                 VerticalAlignment = VerticalAlignment.Center,\r
                 Ellipsis = true,\r
             };\r
             artistLabel.SetBinding(TextLabel.TextProperty, "TrackArtist");\r
-            trackInfo.Add(artistLabel);\r
+            trackTextView.Add(artistLabel);\r
         }\r
         private void AddControlElements()\r
         {\r
             controlsView = new View()\r
             {\r
-                WidthSpecification = 304,\r
+                WidthSpecification = 304.DpToPx(),\r
                 Layout = new LinearLayout()\r
                 {\r
-                    CellPadding = new Size2D(80, 0),\r
-                    LinearAlignment = LinearLayout.Alignment.CenterVertical,\r
                     LinearOrientation = LinearLayout.Orientation.Horizontal,\r
+                    HorizontalAlignment = HorizontalAlignment.Begin,\r
+                    VerticalAlignment = VerticalAlignment.Center,\r
+                    CellPadding = new Size2D(80, 0).DpToPx(),\r
                 },\r
-                Margin = new Extents(0, 120, 14, 19),\r
+                Margin = new Extents(120, 120, 0, 0).DpToPx(),\r
+                BackgroundColor = Color.Transparent,\r
             };\r
             baseView.Add(controlsView);\r
             AddPreviousButton();\r
@@ -173,7 +212,7 @@ namespace MusicPlayer.Views
         {\r
             playButton = new MultiStateButton()\r
             {\r
-                Size2D = new Size2D(48, 48),\r
+                Size2D = new Size2D(48, 48).DpToPx(),\r
                 BackgroundColor = Color.Transparent,\r
                 IconResources = new Dictionary<ThemeType, Dictionary<string, StringSelector>>()\r
                 {\r
@@ -253,16 +292,41 @@ namespace MusicPlayer.Views
 \r
         private void AddSliderElements()\r
         {\r
-            sliderView = new View()\r
-            {\r
-                WidthSpecification = 626,\r
-                BackgroundColor = Color.Transparent,\r
-                Margin = new Extents(0, 0, 19, 0),\r
-            };\r
-            baseView.Add(sliderView);\r
             AddPlaybackSlider();\r
             AddCurrentTimeLabel();\r
             AddTotalTimeLabel();\r
+            sliderView = new View();\r
+            sliderView.BackgroundColor = Color.Transparent;\r
+            sliderView.WidthResizePolicy = ResizePolicyType.FillToParent;\r
+            if (DeviceInfo.IsPortrait)\r
+            {\r
+                sliderView.Layout = new LinearLayout()\r
+                {\r
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,\r
+                    VerticalAlignment = VerticalAlignment.Center,\r
+                    Padding = new Extents(33, 33, 0, 8).DpToPx(),\r
+                };\r
+                sliderView.SizeHeight = 61.DpToPx();\r
+                base.Add(sliderView);\r
+                currentTime.WidthSpecification = 72.DpToPx();\r
+                sliderView.Add(currentTime);\r
+                playbackSlider.WidthSpecification = 872.DpToPx();\r
+                sliderView.Add(playbackSlider);\r
+                totalTime.WidthSpecification = 72.DpToPx();\r
+                sliderView.Add(totalTime);\r
+            }\r
+            else\r
+            {\r
+                sliderView.SizeHeight = 24.DpToPx();\r
+                baseView.Add(playbackSlider);\r
+                sliderView.Layout = new RelativeLayout();\r
+                sliderView.Position2D = new Position2D(0, SliderHeight).DpToPx();\r
+                playbackSlider.Add(sliderView);\r
+                sliderView.Add(currentTime);\r
+                RelativeLayout.SetHorizontalAlignment(currentTime, RelativeLayout.Alignment.Start);\r
+                sliderView.Add(totalTime);\r
+                RelativeLayout.SetHorizontalAlignment(totalTime, RelativeLayout.Alignment.End);\r
+            }\r
         }\r
 \r
         private void AddPlaybackSliderEventHandler()\r
@@ -288,13 +352,12 @@ namespace MusicPlayer.Views
                 ThemeChangeSensitive = true,\r
                 MinValue = 0.0f,\r
                 MaxValue = 1.0f,\r
-                WidthResizePolicy = ResizePolicyType.FillToParent,\r
-                SizeHeight = 38,\r
-                ThumbSize = new Tizen.NUI.Size(30, 30),\r
+                WidthSpecification = 626.DpToPx(),\r
+                HeightSpecification = SliderHeight.DpToPx(),\r
+                ThumbSize = new Tizen.NUI.Size(30, 30).DpToPx(),\r
                 Direction = Slider.DirectionType.Horizontal,\r
             };\r
             playbackSlider.SetBinding(Slider.CurrentValueProperty, "ElapsedTime");\r
-            sliderView.Add(playbackSlider);\r
             AddPlaybackSliderEventHandler();\r
         }\r
 \r
@@ -304,15 +367,13 @@ namespace MusicPlayer.Views
             {\r
                 StyleName = "TitleText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(180, 24),\r
-                Position2D = new Position2D(0, 38),\r
-                PixelSize = 18,\r
+                Size2D = new Size2D(180, 24).DpToPx(),\r
+                PixelSize = 18.DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 Text = "00::00:00",\r
                 HorizontalAlignment = HorizontalAlignment.Begin,\r
             };\r
             currentTime.SetBinding(TextLabel.TextProperty, "PlayingTime");\r
-            sliderView.Add(currentTime);\r
         }\r
 \r
         private void AddTotalTimeLabel()\r
@@ -321,15 +382,13 @@ namespace MusicPlayer.Views
             {\r
                 StyleName = "TitleText",\r
                 ThemeChangeSensitive = true,\r
-                Size2D = new Size2D(180, 24),\r
-                Position2D = new Position2D(626 - 180, 38),\r
-                PixelSize = 18,\r
+                Size2D = new Size2D(180, 24).DpToPx(),\r
+                PixelSize = 18.DpToPx(),\r
                 FontFamily = "BreezeSans",\r
                 HorizontalAlignment = HorizontalAlignment.End,\r
                 Text = "59:59:59",\r
             };\r
             totalTime.SetBinding(TextLabel.TextProperty, "TrackLength");\r
-            sliderView.Add(totalTime);\r
         }\r
 \r
         public void ShowView()\r

diff --git a/packaging/org.tizen.MusicPlayer-1.0.0.tpk b/packaging/org.tizen.MusicPlayer-1.0.0.tpk
index d9c1e48a1133868244f6af2393df799034c2544d..9105d9b156ea8ac873622a9936ffc1a15602bf54 100755 (executable)
Binary files a/packaging/org.tizen.MusicPlayer-1.0.0.tpk and b/packaging/org.tizen.MusicPlayer-1.0.0.tpk differ