├── .gitignore ├── Droid ├── Assets │ └── AboutAssets.txt ├── MainActivity.cs ├── Properties │ ├── AndroidManifest.xml │ └── AssemblyInfo.cs ├── Resources │ ├── AboutResources.txt │ ├── Resource.designer.cs │ ├── drawable-hdpi │ │ └── icon.png │ ├── drawable-xhdpi │ │ └── icon.png │ ├── drawable-xxhdpi │ │ └── icon.png │ ├── drawable │ │ └── icon.png │ ├── layout │ │ ├── Tabbar.axml │ │ └── Toolbar.axml │ └── values │ │ └── styles.xml ├── SimpleList.Droid.csproj └── packages.config ├── README.md ├── SimpleList.sln ├── SimpleList ├── App.xaml ├── App.xaml.cs ├── Properties │ └── AssemblyInfo.cs ├── SimpleList.csproj ├── SimpleListPage.xaml ├── SimpleListPage.xaml.cs ├── Speaker.cs └── packages.config ├── documents └── image │ ├── add_nuget.jpg │ ├── create_new_project.png │ ├── create_new_xamarin_forms_project.jpg │ ├── create_new_xamarin_project.png │ ├── finished.png │ └── nuget_package_manager.jpg └── iOS ├── AppDelegate.cs ├── Assets.xcassets ├── AppIcon.appiconset │ └── Contents.json └── Contents.json ├── Entitlements.plist ├── Info.plist ├── LaunchScreen.storyboard ├── Main.cs ├── SimpleList.iOS.csproj └── packages.config /.gitignore: -------------------------------------------------------------------------------- 1 | # Autosave files 2 | *~ 3 | 4 | # build 5 | [Oo]bj/ 6 | [Bb]in/ 7 | packages/ 8 | TestResults/ 9 | 10 | # globs 11 | Makefile.in 12 | *.DS_Store 13 | *.sln.cache 14 | *.suo 15 | *.cache 16 | *.pidb 17 | *.userprefs 18 | *.usertasks 19 | config.log 20 | config.make 21 | config.status 22 | aclocal.m4 23 | install-sh 24 | autom4te.cache/ 25 | *.user 26 | *.tar.gz 27 | tarballs/ 28 | test-results/ 29 | Thumbs.db 30 | 31 | # Mac bundle stuff 32 | *.dmg 33 | *.app 34 | 35 | # resharper 36 | *_Resharper.* 37 | *.Resharper 38 | 39 | # dotCover 40 | *.dotCover 41 | -------------------------------------------------------------------------------- /Droid/Assets/AboutAssets.txt: -------------------------------------------------------------------------------- 1 | Any raw assets you want to be deployed with your application can be placed in 2 | this directory (and child directories) and given a Build Action of "AndroidAsset". 3 | 4 | These files will be deployed with your package and will be accessible using Android's 5 | AssetManager, like this: 6 | 7 | public class ReadAsset : Activity 8 | { 9 | protected override void OnCreate (Bundle bundle) 10 | { 11 | base.OnCreate (bundle); 12 | 13 | InputStream input = Assets.Open ("my_asset.txt"); 14 | } 15 | } 16 | 17 | Additionally, some Android functions will automatically load asset files: 18 | 19 | Typeface tf = Typeface.CreateFromAsset (Context.Assets, "fonts/samplefont.ttf"); 20 | -------------------------------------------------------------------------------- /Droid/MainActivity.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | using Android.App; 4 | using Android.Content; 5 | using Android.Content.PM; 6 | using Android.Runtime; 7 | using Android.Views; 8 | using Android.Widget; 9 | using Android.OS; 10 | 11 | namespace SimpleList.Droid 12 | { 13 | [Activity(Label = "SimpleList.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] 14 | public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity 15 | { 16 | protected override void OnCreate(Bundle bundle) 17 | { 18 | TabLayoutResource = Resource.Layout.Tabbar; 19 | ToolbarResource = Resource.Layout.Toolbar; 20 | 21 | base.OnCreate(bundle); 22 | 23 | global::Xamarin.Forms.Forms.Init(this, bundle); 24 | 25 | LoadApplication(new App()); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Droid/Properties/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 |  2 | 7 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Droid/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using Android.App; 4 | 5 | // Information about this assembly is defined by the following attributes. 6 | // Change them to the values specific to your project. 7 | 8 | [assembly: AssemblyTitle("SimpleList.Droid")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("")] 13 | [assembly: AssemblyCopyright("(c) Madoka Chiyoda")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // The assembly version has the format "{Major}.{Minor}.{Build}.{Revision}". 18 | // The form "{Major}.{Minor}.*" will automatically update the build and revision, 19 | // and "{Major}.{Minor}.{Build}.*" will update just the revision. 20 | 21 | [assembly: AssemblyVersion("1.0.0")] 22 | 23 | // The following attributes are used to specify the signing key for the assembly, 24 | // if desired. See the Mono documentation for more information about signing. 25 | 26 | //[assembly: AssemblyDelaySign(false)] 27 | //[assembly: AssemblyKeyFile("")] 28 | -------------------------------------------------------------------------------- /Droid/Resources/AboutResources.txt: -------------------------------------------------------------------------------- 1 | Images, layout descriptions, binary blobs and string dictionaries can be included 2 | in your application as resource files. Various Android APIs are designed to 3 | operate on the resource IDs instead of dealing with images, strings or binary blobs 4 | directly. 5 | 6 | For example, a sample Android app that contains a user interface layout (main.axml), 7 | an internationalization string table (strings.xml) and some icons (drawable-XXX/icon.png) 8 | would keep its resources in the "Resources" directory of the application: 9 | 10 | Resources/ 11 | drawable/ 12 | icon.png 13 | 14 | layout/ 15 | main.axml 16 | 17 | values/ 18 | strings.xml 19 | 20 | In order to get the build system to recognize Android resources, set the build action to 21 | "AndroidResource". The native Android APIs do not operate directly with filenames, but 22 | instead operate on resource IDs. When you compile an Android application that uses resources, 23 | the build system will package the resources for distribution and generate a class called "R" 24 | (this is an Android convention) that contains the tokens for each one of the resources 25 | included. For example, for the above Resources layout, this is what the R class would expose: 26 | 27 | public class R { 28 | public class drawable { 29 | public const int icon = 0x123; 30 | } 31 | 32 | public class layout { 33 | public const int main = 0x456; 34 | } 35 | 36 | public class strings { 37 | public const int first_string = 0xabc; 38 | public const int second_string = 0xbcd; 39 | } 40 | } 41 | 42 | You would then use R.drawable.icon to reference the drawable/icon.png file, or R.layout.main 43 | to reference the layout/main.axml file, or R.strings.first_string to reference the first 44 | string in the dictionary file values/strings.xml. 45 | -------------------------------------------------------------------------------- /Droid/Resources/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chomado/SimpleList/ed9e4b94ebc6ea6ae040d7ce1ffad225b4fdde7e/Droid/Resources/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /Droid/Resources/drawable-xhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chomado/SimpleList/ed9e4b94ebc6ea6ae040d7ce1ffad225b4fdde7e/Droid/Resources/drawable-xhdpi/icon.png -------------------------------------------------------------------------------- /Droid/Resources/drawable-xxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chomado/SimpleList/ed9e4b94ebc6ea6ae040d7ce1ffad225b4fdde7e/Droid/Resources/drawable-xxhdpi/icon.png -------------------------------------------------------------------------------- /Droid/Resources/drawable/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chomado/SimpleList/ed9e4b94ebc6ea6ae040d7ce1ffad225b4fdde7e/Droid/Resources/drawable/icon.png -------------------------------------------------------------------------------- /Droid/Resources/layout/Tabbar.axml: -------------------------------------------------------------------------------- 1 |  2 | 13 | -------------------------------------------------------------------------------- /Droid/Resources/layout/Toolbar.axml: -------------------------------------------------------------------------------- 1 |  2 | 10 | -------------------------------------------------------------------------------- /Droid/Resources/values/styles.xml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 7 | 8 | 35 | 41 | 42 | -------------------------------------------------------------------------------- /Droid/SimpleList.Droid.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Debug 5 | AnyCPU 6 | {C83FE197-7D84-434C-92DC-BA79DEE2F686} 7 | {EFBA0AD7-5A72-4C68-AF49-83D382785DCF};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC} 8 | Library 9 | SimpleList.Droid 10 | SimpleList.Droid 11 | v7.1 12 | True 13 | Resources\Resource.designer.cs 14 | Resource 15 | Properties\AndroidManifest.xml 16 | Resources 17 | Assets 18 | true 19 | 20 | 21 | 22 | true 23 | full 24 | false 25 | bin\Debug 26 | DEBUG; 27 | prompt 28 | 4 29 | None 30 | 31 | 32 | true 33 | pdbonly 34 | true 35 | bin\Release 36 | prompt 37 | 4 38 | true 39 | false 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ..\packages\Xamarin.Android.Support.v4.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.v4.dll 48 | 49 | 50 | ..\packages\Xamarin.Android.Support.Vector.Drawable.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.Vector.Drawable.dll 51 | 52 | 53 | ..\packages\Xamarin.Android.Support.Animated.Vector.Drawable.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.Animated.Vector.Drawable.dll 54 | 55 | 56 | ..\packages\Xamarin.Android.Support.v7.AppCompat.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.v7.AppCompat.dll 57 | 58 | 59 | ..\packages\Xamarin.Android.Support.v7.RecyclerView.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.v7.RecyclerView.dll 60 | 61 | 62 | ..\packages\Xamarin.Android.Support.Design.23.3.0\lib\MonoAndroid43\Xamarin.Android.Support.Design.dll 63 | 64 | 65 | ..\packages\Xamarin.Android.Support.v7.CardView.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.v7.CardView.dll 66 | 67 | 68 | ..\packages\Xamarin.Android.Support.v7.MediaRouter.23.3.0\lib\MonoAndroid403\Xamarin.Android.Support.v7.MediaRouter.dll 69 | 70 | 71 | ..\packages\Xamarin.Forms.2.3.3.180\lib\MonoAndroid10\FormsViewGroup.dll 72 | 73 | 74 | ..\packages\Xamarin.Forms.2.3.3.180\lib\MonoAndroid10\Xamarin.Forms.Core.dll 75 | 76 | 77 | ..\packages\Xamarin.Forms.2.3.3.180\lib\MonoAndroid10\Xamarin.Forms.Platform.Android.dll 78 | 79 | 80 | ..\packages\Xamarin.Forms.2.3.3.180\lib\MonoAndroid10\Xamarin.Forms.Platform.dll 81 | 82 | 83 | ..\packages\Xamarin.Forms.2.3.3.180\lib\MonoAndroid10\Xamarin.Forms.Xaml.dll 84 | 85 | 86 | ..\packages\Newtonsoft.Json.9.0.1\lib\portable-net45+wp80+win8+wpa81\Newtonsoft.Json.dll 87 | 88 | 89 | 90 | 91 | {029FFDAB-699A-4A08-B19C-611D5472A38A} 92 | SimpleList 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /Droid/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple List App 2 | 3 | Xamarin ハンズオン用の、簡単なアプリ制作の手順書です。 4 | 5 | JSON を引っ張ってきて、それをリストビューに表示させる、簡単なアプリです。 6 | 7 | ## 開発環境 8 | 9 | Windows でも Mac でも良いです。 10 | 11 | |OS|OS のバージョン|要インストール済| 12 | |----|----|----| 13 | |Windows|Windows 10|Xamarin インストール済みの Visual Studio 2017| 14 | |Mac OS X|10.11 ("El Capitan") 以降 |Visual Studio for Mac と 最新の Xcode | 15 | 16 | 17 | ## 完成形 18 | 19 | ![](documents/image/finished.png) 20 | 21 | 使うサンプルJSONは[こちら](http://demo4404797.mockable.io/speakers)です。（本社の Xamarin チームの 22 | 23 | ```js 24 | [ 25 | { 26 | "Name": "Matthew Soucoup", 27 | "Description": "Matthew is a Xamarin MVP and Certified Xamarin Developer from Madison, WI. He founded his company Code Mill Technologies and started the Madison Mobile .Net Developers Group. Matt regularly speaks on .Net and Xamarin development at user groups, code camps and conferences throughout the Midwest. Matt gardens hot peppers, rides bikes, and loves Wisconsin micro-brews and cheese.", 28 | "Image": "http://i.imgur.com/y4dzyT3.jpg", 29 | "Title": "Architect", 30 | "Company": "Code Mill Technologies", 31 | "Website": "https://codemilltech.com", 32 | "Blog": "https://codemilltech.com/", 33 | "Twitter": "codemillmatt", 34 | "Email": "MSoucoup@newco.com", 35 | "Avatar": "http://i.imgur.com/RTDt4nb.jpg" 36 | }, 37 | { 38 | "Name": "James Montemagno", 39 | "Description": "James is a Principal Program Manager at Xamarin", 40 | "Image": "https://blogs.office.com/wp-content/uploads/2015/04/JamesM.jpg", 41 | "Title": "Principal PM", 42 | "Company": "Microsoft", 43 | "Website": "https://motzcod.es", 44 | "Blog": "https://motzcod.es/", 45 | "Twitter": "jamesmontemagno", 46 | "Email": "MSoucoup@newco.com", 47 | "Avatar": "https://blogs.office.com/wp-content/uploads/2015/04/JamesM.jpg" 48 | }, 49 | { 50 | "Name": "Star Simpson", 51 | "Description": "A robot-builder from an early age, Star has explored robotics and automation in electronics and software from MIT to Shenzhen. She previously worked on some of the first robots to demonstrate human emotional expressiveness in Cynthia Brezeal’s personal robotics lab. Her interest carried her into the aerial robotics world, exploring drone-based delivery through TacoCopter many years ahead of anyone else. Now residing in SF, she’s looking for ways that tech can advance and extend human capability.", 52 | "Image": "http://i.imgur.com/mqRwv84.jpg", 53 | "Title": "Consultant", 54 | "Company": "", 55 | "Website": "N/A", 56 | "Blog": "N/A", 57 | "Twitter": "starsandrobots", 58 | "Email": "SSimpson@newco.com", 59 | "Avatar": "http://i.imgur.com/BlC5zlJ.jpg" 60 | }, 61 | (略) 62 | ] 63 | ``` 64 | 65 | ## 「新規作成」 66 | 67 | `Xamarin.Forms` アプリの「新規作成」をしましょう。 68 | 69 | * Xamarin.Forms 70 | * 共通部分は PCL 71 | * アプリの名前は何でもいい。私は "`SimpleList`"にした。同じにしておくとコピペが楽かも？（`namespace`がアプリ名になるので） 72 | 73 | Visual Studio for Windows の場合、 74 | 75 | 「ファイル」→「新規作成」→「プロジェクト」 76 | 77 | ![](documents/image/create_new_project.png) 78 | 79 | テンプレートの中から Xamarin のものを選びます。 80 | 「Visual C#」→「Cross Platform」→「Cross Platform App」→（プロジェクト名編集）→「OK」 81 | 82 | ![](documents/image/create_new_xamarin_project.png) 83 | 84 | 以下のように選んで「OK」 85 | 86 | ![](documents/image/create_new_xamarin_forms_project.jpg) 87 | 88 | 89 | 90 | `Visual Studio for Mac` での「新規プロジェクト作成」の方法は [こちら](https://blogs.msdn.microsoft.com/chomado/xamarin/tried-creating-an-app-using-visual-studio-for-mac/)から。 91 | 92 | 93 | 94 | ## Speakerクラスを作る(新しいファイル) 95 | 96 | 共通部分のプロジェクト名を右クリック「追加」「新しいファイル」 97 | 98 | クラス名は「Speaker」にして作成。新しいファイル`Speaker.cs`が生える。 99 | 100 | 今こんな感じ： 101 | 102 | ```csharp 103 | using System; 104 | namespace SimpleList 105 | { 106 | public class Speaker 107 | { 108 | public Speaker() 109 | { 110 | } 111 | } 112 | } 113 | ``` 114 | 115 | これに新しいプロパティを生やす。 116 | こうする： 117 | 118 | 119 | ```csharp 120 | using System; 121 | namespace SimpleList 122 | { 123 | public class Speaker 124 | { 125 | public Speaker() 126 | { 127 | } 128 | // プロパティ群 129 | public string Id { get; set; } 130 | public string Name { get; set; } 131 | public string Description { get; set; } 132 | public string Website { get; set; } 133 | public string Title { get; set; } 134 | public string Avatar { get; set; } 135 | } 136 | } 137 | ``` 138 | 139 | ## 見た目の作成（画面） 140 | 141 | `SimpleListPage.xaml` (もしくは `MainPage.xaml`)を開きます。これは見た目を定義しているファイルです。     142 | XAML (ざむる) とは、Micorosft による、主にUIを書くために用いられるマークアップ言語です。(XMLベースの言語) 143 | 144 | `SimpleListPage.xaml`は、最初はこうなっています。 145 | 146 | ```xml 147 | 148 | 153 | 158 | ``` 159 | 160 | この `ContentPage` の中を書き換えて行きましょう。まず `Label` を消して、代わりに次のコードを差し込みます。 161 | 162 | ```xml 163 | 164 | 165 | 166 | 167 | 168 | 169 |