Completed iOS UI review

This commit is contained in:
Javier Suárez Ruiz 2016-11-22 18:26:32 +01:00
parent 4bec288ee0
commit 579f7afac0
33 changed files with 292 additions and 73 deletions

View File

@ -126,7 +126,7 @@
<Setter Property="effects:LineColorEffect.ApplyLineColor"
Value="True" />
<Setter Property="effects:LineColorEffect.LineColor"
Value="{StaticResource WhiteColor}" />
Value="{StaticResource BlackColor}" />
<Style.Triggers>
<Trigger TargetType="Entry"
Property="IsFocused"

View File

@ -6,20 +6,6 @@
<ContentView.Resources>
<ResourceDictionary>
<Style x:Key="AddButtonStyle"
TargetType="{x:Type Grid}">
<Setter Property="HeightRequest"
Value="42" />
<Setter Property="WidthRequest"
Value="42" />
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="End" />
<Setter Property="Margin"
Value="0, 0, 0, 24" />
</Style>
<Style x:Key="AddBackgroundImageStyle"
TargetType="{x:Type Image}">
<Setter Property="HorizontalOptions"
@ -34,6 +20,8 @@
<Style x:Key="AddImageStyle"
TargetType="{x:Type Image}">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="HeightRequest"
Value="24" />
<Setter Property="WidthRequest"
@ -44,9 +32,8 @@
</ContentView.Resources>
<ContentView.Content>
<Grid>
<!-- IOS & ANDROID -->
<Grid
Style="{StaticResource AddButtonStyle}">
<!-- ANDROID -->
<Grid>
<Grid.IsVisible>
<OnPlatform
x:TypeArguments="x:Boolean"
@ -56,25 +43,29 @@
</Grid.IsVisible>
<BoxView
BackgroundColor="{StaticResource LightGreenColor}"
StyleClass="Circle" />
HeightRequest="48"
WidthRequest="48"
StyleClass="Circle">
</BoxView>
<Image
Aspect="AspectFit"
Source="product_add"
Style="{StaticResource AddImageStyle}">
<Image.Margin>
<OnPlatform
x:TypeArguments="Thickness"
Android="5, 12, 12, 12"
iOS="6, 12, 12, 12"/>
</Image.Margin>
</Image>
Source="product_add.png"
Style="{StaticResource AddImageStyle}" />
</Grid>
<!-- UWP -->
<!-- IOS & UWP -->
<Grid>
<Grid.IsVisible>
<OnPlatform
x:TypeArguments="x:Boolean"
Android="False"
iOS="False"
WinPhone="True"/>
</Grid.IsVisible>
<Image
Source="Assets/circle_button_background.png"
Source="Assets\circle_button_background.png"
Aspect="AspectFit"
Style="{StaticResource AddBackgroundImageStyle}" />
<Image
Aspect="AspectFit"
Source="Assets\product_add.png"

View File

@ -23,11 +23,11 @@ namespace eShopOnContainers.Core.Services.Catalog
private ObservableCollection<CatalogItem> MockCatalog = new ObservableCollection<CatalogItem>
{
new CatalogItem { Id = "1", PictureUri = Device.OS != TargetPlatform.Windows? "fake_product_01" : "Assets/fake_product_01.png", Name = ".NET Bot Blue Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "2", PictureUri = Device.OS != TargetPlatform.Windows? "fake_product_02": "Assets/fake_product_02.png", Name = ".NET Bot Purple Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "3", PictureUri = Device.OS != TargetPlatform.Windows? "fake_product_03": "Assets/fake_product_03.png", Name = ".NET Bot Black Sweatshirt (M)", Price = 19.95M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "4", PictureUri = Device.OS != TargetPlatform.Windows? "fake_product_04": "Assets/fake_product_04.png", Name = ".NET Black Cupt", Price = 17.00M, CatalogBrand = "Visual Studio", CatalogType = "Mug" },
new CatalogItem { Id = "5", PictureUri = Device.OS != TargetPlatform.Windows? "fake_product_05": "Assets/fake_product_05.png", Name = "Azure Black Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Azure", CatalogType = "T-Shirt" }
new CatalogItem { Id = "1", PictureUri = Device.OS != TargetPlatform.Windows ? "fake_product_01.png" : "Assets/fake_product_01.png", Name = ".NET Bot Blue Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "2", PictureUri = Device.OS != TargetPlatform.Windows ? "fake_product_02.png" : "Assets/fake_product_02.png", Name = ".NET Bot Purple Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "3", PictureUri = Device.OS != TargetPlatform.Windows ? "fake_product_03.png" : "Assets/fake_product_03.png", Name = ".NET Bot Black Sweatshirt (M)", Price = 19.95M, CatalogBrand = "Visual Studio", CatalogType = "T-Shirt" },
new CatalogItem { Id = "4", PictureUri = Device.OS != TargetPlatform.Windows ? "fake_product_04.png" : "Assets/fake_product_04.png", Name = ".NET Black Cupt", Price = 17.00M, CatalogBrand = "Visual Studio", CatalogType = "Mug" },
new CatalogItem { Id = "5", PictureUri = Device.OS != TargetPlatform.Windows ? "fake_product_05.png" : "Assets/fake_product_05.png", Name = "Azure Black Sweatshirt (M)", Price = 19.50M, CatalogBrand = "Azure", CatalogType = "T-Shirt" }
};
public async Task<ObservableCollection<CatalogItem>> GetCatalogAsync()

View File

@ -81,9 +81,7 @@
Grid.Row="0"
Grid.RowSpan="2"
Style="{StaticResource AddButtonStyle}">
<controls:CartButton>
</controls:CartButton>
<controls:CartButton />
</Grid>
<Label
Grid.Row="1"

View File

@ -11,7 +11,8 @@ namespace eShopOnContainers.Droid.Activities
[Activity(
Label = "eShopOnContainers",
Icon = "@drawable/icon",
Theme = "@style/MainTheme",
Theme = "@style/MainTheme",
MainLauncher = true,
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : FormsAppCompatActivity
{

View File

@ -0,0 +1 @@
{"images":[{"idiom":"iphone","filename":"Icon-60@2x.png","size":"60x60","scale":"2x"},{"idiom":"ipad","filename":"Icon-76.png","size":"76x76","scale":"1x"},{"idiom":"ipad","filename":"Icon-76@2x.png","size":"76x76","scale":"2x"},{"idiom":"iphone","filename":"Icon-Small.png","size":"29x29","scale":"1x"},{"idiom":"ipad","filename":"Icon-Small.png","size":"29x29","scale":"1x"},{"idiom":"iphone","filename":"Icon-Small@2x.png","size":"29x29","scale":"2x"},{"idiom":"ipad","filename":"Icon-Small@2x.png","size":"29x29","scale":"2x"},{"idiom":"ipad","filename":"Icon-Small-40.png","size":"40x40","scale":"1x"},{"idiom":"iphone","filename":"Icon-Small-40@2x.png","size":"40x40","scale":"2x"},{"idiom":"ipad","filename":"Icon-Small-40@2x.png","size":"40x40","scale":"2x"}],"info":{"version":1,"author":"xcode"}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,178 @@
{
"images": [
{
"minimum-system-version": "9.0",
"orientation": "landscape",
"extent": "full-screen",
"size": "1920x1080",
"scale": "1x",
"idiom": "tv"
},
{
"minimum-system-version": "8.0",
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default-1242@3x.png",
"size": "414x736",
"subtype": "736h",
"scale": "3x",
"idiom": "iphone"
},
{
"minimum-system-version": "8.0",
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default-750@2x.png",
"size": "375x667",
"subtype": "667h",
"scale": "2x",
"idiom": "iphone"
},
{
"minimum-system-version": "8.0",
"orientation": "landscape",
"extent": "full-screen",
"size": "736x414",
"subtype": "736h",
"scale": "3x",
"idiom": "iphone"
},
{
"minimum-system-version": "7.0",
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default@2x.png",
"size": "320x480",
"scale": "2x",
"idiom": "iphone"
},
{
"minimum-system-version": "7.0",
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default-568h@2x.png",
"size": "320x568",
"subtype": "retina4",
"scale": "2x",
"idiom": "iphone"
},
{
"minimum-system-version": "7.0",
"orientation": "portrait",
"extent": "full-screen",
"size": "768x1024",
"scale": "1x",
"idiom": "ipad"
},
{
"minimum-system-version": "7.0",
"orientation": "portrait",
"extent": "full-screen",
"size": "768x1024",
"scale": "2x",
"idiom": "ipad"
},
{
"minimum-system-version": "7.0",
"orientation": "landscape",
"extent": "full-screen",
"size": "1024x768",
"scale": "1x",
"idiom": "ipad"
},
{
"minimum-system-version": "7.0",
"orientation": "landscape",
"extent": "full-screen",
"size": "1024x768",
"scale": "2x",
"idiom": "ipad"
},
{
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default.png",
"size": "320x480",
"scale": "1x",
"idiom": "iphone"
},
{
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default@2x.png",
"size": "320x480",
"scale": "2x",
"idiom": "iphone"
},
{
"orientation": "portrait",
"extent": "full-screen",
"filename": "Default-568h@2x.png",
"size": "320x568",
"subtype": "retina4",
"scale": "2x",
"idiom": "iphone"
},
{
"orientation": "portrait",
"extent": "to-status-bar",
"size": "768x1004",
"scale": "1x",
"idiom": "ipad"
},
{
"orientation": "portrait",
"extent": "to-status-bar",
"filename": "Default-Portrait@2x.png",
"size": "768x1004",
"scale": "2x",
"idiom": "ipad"
},
{
"orientation": "portrait",
"extent": "full-screen",
"size": "768x1024",
"scale": "1x",
"idiom": "ipad"
},
{
"orientation": "portrait",
"extent": "full-screen",
"size": "768x1024",
"scale": "2x",
"idiom": "ipad"
},
{
"orientation": "landscape",
"extent": "to-status-bar",
"size": "1024x748",
"scale": "1x",
"idiom": "ipad"
},
{
"orientation": "landscape",
"extent": "to-status-bar",
"size": "1024x748",
"scale": "2x",
"idiom": "ipad"
},
{
"orientation": "landscape",
"extent": "full-screen",
"size": "1024x768",
"scale": "1x",
"idiom": "ipad"
},
{
"orientation": "landscape",
"extent": "full-screen",
"size": "1024x768",
"scale": "2x",
"idiom": "ipad"
}
],
"info": {
"version": 1,
"author": "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View File

@ -10,8 +10,7 @@
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
@ -28,24 +27,15 @@
<string>com.yourcompany.eShopOnContainers</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>CFBundleIconFiles</key>
<array>
<string>Icon-60@2x.png</string>
<string>Icon-76.png</string>
<string>Icon-76@2x.png</string>
<string>Default.png</string>
<string>Default@2x.png</string>
<string>Default-568h@2x.png</string>
<string>Default-Portrait.png</string>
<string>Default-Portrait@2x.png</string>
<string>Icon-Small-40.png</string>
<string>Icon-Small-40@2x.png</string>
<string>Icon-Small.png</string>
<string>Icon-Small@2x.png</string>
</array>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>CFBundleShortVersionString</key>
<string></string>
<key>CFBundleName</key>
<string>eShopOnContainers</string>
<key>XSAppIconAssets</key>
<string>Assets.xcassets/AppIcon.appiconset</string>
<key>XSLaunchImageAssets</key>
<string>Assets.xcassets/LaunchImage.launchimage</string>
</dict>
</plist>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 729 B

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6245" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="X5k-f2-b5h">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6238"/>
@ -16,12 +16,12 @@
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" misplaced="YES" image="Icon-60.png" translatesAutoresizingMaskIntoConstraints="NO" id="23">
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" image="Logo.png" translatesAutoresizingMaskIntoConstraints="NO" id="23" misplaced="YES">
<rect key="frame" x="270" y="270" width="60" height="60"/>
<rect key="contentStretch" x="0.0" y="0.0" width="0.0" height="0.0"/>
</imageView>
</subviews>
<color key="backgroundColor" red="0.20392156862745098" green="0.59607843137254901" blue="0.85882352941176465" alpha="1" colorSpace="calibratedRGB"/>
<color key="backgroundColor" colorSpace="calibratedRGB" red="0.11764705882352941" green="0.6470588235294118" blue="0.615686274509804" alpha="1"/>
<constraints>
<constraint firstItem="23" firstAttribute="centerY" secondItem="yd7-JS-zBw" secondAttribute="centerY" priority="1" id="39"/>
<constraint firstItem="23" firstAttribute="centerX" secondItem="yd7-JS-zBw" secondAttribute="centerX" priority="1" id="41"/>
@ -34,6 +34,22 @@
</scene>
</scenes>
<resources>
<image name="Icon-60.png" width="180" height="180"/>
<image name="Icon-60.png" width="60" height="60"/>
<image name="app_settings.png" width="44" height="44"/>
<image name="Default.png" width="320" height="480"/>
<image name="fake_product_01.png" width="650" height="500"/>
<image name="fake_product_02.png" width="650" height="500"/>
<image name="fake_product_03.png" width="650" height="500"/>
<image name="fake_product_04.png" width="650" height="427"/>
<image name="fake_product_05.png" width="650" height="500"/>
<image name="Icon-Small-40.png" width="40" height="40"/>
<image name="Icon-Small.png" width="29" height="29"/>
<image name="menu_cart.png" width="17" height="15"/>
<image name="menu_filter.png" width="12" height="11"/>
<image name="menu_profile.png" width="13" height="13"/>
<image name="product_add.png" width="10" height="10"/>
<image name="switchOff.png" width="23" height="11"/>
<image name="switchOn.png" width="23" height="11"/>
<image name="Logo.png" width="152" height="152"/>
</resources>
</document>
</document>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -123,20 +123,8 @@
<None Include="packages.config" />
</ItemGroup>
<ItemGroup>
<BundleResource Include="Resources\Default-568h%402x.png" />
<BundleResource Include="Resources\Default-Portrait.png" />
<BundleResource Include="Resources\Default-Portrait%402x.png" />
<BundleResource Include="Resources\Default.png" />
<BundleResource Include="Resources\Default%402x.png" />
<BundleResource Include="Resources\Icon-60%402x.png" />
<BundleResource Include="Resources\Icon-60%403x.png" />
<BundleResource Include="Resources\Icon-76.png" />
<BundleResource Include="Resources\Icon-76%402x.png" />
<BundleResource Include="Resources\Icon-Small-40.png" />
<BundleResource Include="Resources\Icon-Small-40%402x.png" />
<BundleResource Include="Resources\Icon-Small-40%403x.png" />
<BundleResource Include="Resources\Icon-Small.png" />
<BundleResource Include="Resources\Icon-Small%402x.png" />
<BundleResource Include="Resources\Icon-Small%403x.png" />
<InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
</ItemGroup>
@ -322,6 +310,62 @@
<ItemGroup>
<BundleResource Include="Resources\switchOn%403x.png" />
</ItemGroup>
<ItemGroup>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-60%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-76.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-76%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-Small.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-Small%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-Small-40.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon-Small-40%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Contents.json">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-568h%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-Portrait.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-Portrait%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-750%402x.png">
<InProject>false</InProject>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\LaunchImage.launchimage\Default-1242%403x.png">
<InProject>false</InProject>
</ImageAsset>
</ItemGroup>
<ItemGroup>
<BundleResource Include="Resources\Default.png" />
</ItemGroup>
<ItemGroup>
<BundleResource Include="Resources\Logo.png" />
</ItemGroup>
<Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
<Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
<PropertyGroup>