XamarinでもConstraintLayoutを使いたい！

XamarinだとConstraintLayoutを使えないと思ってるそこのあなた！(自分もｗ)

いつのまにかXamarinによるConstraintLayoutの[Bindingライブラリ](https://www.nuget.org/packages/Xamarin.Android.Support.Constraint.Layout)(PreRelease版)が出てました

というわけなのでお触りしましょうね～～～

# 準備

## プロジェクトにConstraintLayoutの参照を追加する

NuGetパッケージマネージャーでは検索に出てこないようなのでパッケージマネージャーコンソールを使用します

NuGetのサイトの指示通りコピペでポチポチ押すだけです

```
Install-Package Xamarin.Android.Support.Constraint.Layout -Pre
```

ですが、今の環境でもほいほい入るだろーーｗｗみたいな考えしてると

![constraint1.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/ee9d5180-c246-eef8-3042-6d00a7238a2f.png)


こうなりましたｗ

こうなった場合環境をアップデートする必要があります(自分の場合はXamarinはそれなりにアプデしてたのでAndroid 7.0 SDKを入れるだけでした)

これでうまくいくはず

![constraint2.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/3662ed54-ecbe-61d8-811c-df52bf1a73ec.png)


## AndroidStudioの用意

ConstraintLayout手打ちしたくない…したくないよね？

ってことでレイアウト組むのはAndroidStudio先輩任せにしますｗ

ですので最近放置していたAndroidStudioをアップデートします(自分の場合はポチポチ押してたら2.2.2にアプデすることになりました)

とりあえずAndroidStudioは2.2以上ならいいみたいです(JDK1.8も必要みたいです)

次にAndroidStudioのSettingで必要なものを入れておきます(チェック入れてOKするだけです)
![constraint3.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/5a2a9fec-0c39-94a3-57d8-67ada478a9d7.png)


プロジェクトに参照を追加してgradle syncします

```
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta2'
```

このときconstraint-layoutのバージョンがわからなければローカル領域に保存されているものを見に行く必要があります
![constraint4.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/6828d228-dc11-382d-e93e-c3a1951c757e.png)


だいたいの方はこのあたりではないでしょうか
```
{User}\AppData\Local\Android\sdk\extras\m2repository\com\android\support\constraint\constraint-layout
```

# レイアウト作成

## AndroidStudioで組む

準備はできたはずなのでさっそくAndroidStudio先輩にレイアウトしてもらいます

ConstraintLayoutを使用するxmlファイルをこのようにして用意してあげます

```xml:main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>
```

そしたらあとはデザイナー画面でぽちぽち配置していくだけです

今回はTwitterのツイート画面っぽいものを作ることにします
![constraint5.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/aa21b542-4bf7-4bd0-64a0-af3a8679caac.png)


これをこうして…

![constraint7.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/1cdf01d2-81f2-a8c6-4288-a4d3f08aa498.png)


それっぽいのはできましたね

途中省いてしまいましたが

- 各パーツを繋げていく
- 上記のxmlではandroid:layout_height="match_parent"としたけどwrap_contentに変更
- TextView(折り返しする感じのもの)はlayout_widthを0dpにしたほうがいい感じ

なことがありました

以下完成物です

```xml:main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:text="Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Name"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toRightOf="@+id/Icon"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/Icon"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:text="ScreenName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ScreenName"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toRightOf="@+id/Name"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:text="Time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Time"
        android:textAppearance="@style/TextAppearance.AppCompat.Caption"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:text="Sample Text dayoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"
        android:layout_height="wrap_content"
        android:id="@+id/Text"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:autoText="false"
        android:singleLine="false"
        app:layout_constraintLeft_toLeftOf="@+id/Name"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/Name"
        app:layout_constraintVertical_bias="1.0"
        android:layout_width="0dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"/>
</android.support.constraint.ConstraintLayout>
```

## VisualStudio+Xamarinで動かす

レイアウトの都合上SupportLibraryのAppCompatを入れる必要があったのでNuGetから入れておきます(最新のを入れるとなぜか文字化けしてよくわからないエラー出たので23.4.0.1を入れました)

今回は新たに作成したプロジェクトなのでMain.axmlに先ほどのレイアウトをコピペします

リソースの関係上少しxml変えましたので変更後のも載せておきます

```xml:Main.axml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


  <TextView
      android:text="Name"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/Name"
      android:textAppearance="@style/TextAppearance.AppCompat.Title"
      android:layout_marginStart="8dp"
      app:layout_constraintLeft_toRightOf="@+id/Icon"
      android:layout_marginLeft="8dp"
      android:layout_marginTop="16dp"
      app:layout_constraintTop_toTopOf="parent"/>

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/Icon"
      android:id="@+id/Icon"
      android:layout_marginStart="16dp"
      app:layout_constraintLeft_toLeftOf="parent"
      android:layout_marginLeft="16dp"
      android:layout_marginTop="16dp"
      app:layout_constraintTop_toTopOf="parent"/>

  <TextView
      android:text="ScreenName"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/ScreenName"
      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
      android:layout_marginStart="8dp"
      app:layout_constraintLeft_toRightOf="@+id/Name"
      android:layout_marginLeft="8dp"
      android:layout_marginTop="16dp"
      app:layout_constraintTop_toTopOf="parent"
        />

  <TextView
      android:text="Time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/Time"
      android:textAppearance="@style/TextAppearance.AppCompat.Caption"
      android:layout_marginEnd="16dp"
      app:layout_constraintRight_toRightOf="parent"
      android:layout_marginRight="16dp"
      android:layout_marginTop="16dp"
      app:layout_constraintTop_toTopOf="parent"
        />

  <TextView
      android:text="Sample Text dayoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"
      android:layout_height="wrap_content"
      android:id="@+id/Text"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
      android:autoText="false"
      android:singleLine="false"
      app:layout_constraintLeft_toLeftOf="@+id/Name"
      app:layout_constraintBottom_toBottomOf="parent"
      android:layout_marginBottom="16dp"
      android:layout_marginTop="8dp"
      app:layout_constraintTop_toBottomOf="@+id/Name"
      app:layout_constraintVertical_bias="1.0"
      android:layout_width="0dp"
      android:layout_marginEnd="16dp"
      app:layout_constraintRight_toRightOf="parent"
      android:layout_marginRight="16dp"/>
</android.support.constraint.ConstraintLayout>
```

初期テンプレなのでSetContentViewのコメントアウトを外して起動します
![constraint8.PNG](https://qiita-image-store.s3.amazonaws.com/0/51176/0c25cf07-769f-5f19-6e79-38e6ca4773fd.png)


AndroidStudioでレイアウトしたようなのが表示できたのでXamarinでもConstraintLayout使えます！(いちおう)

# 最後に
最近のStableバージョンのXamarin小さなバグが致命傷に発展してビルドできないこと多発してる(体感)なので同じようにしたのにエラー出ます！とかあるかもしれませんm(__)m

(AppCompatの謎のエラーXamarinアプデで直るようなこと[言ってた](https://releases.xamarin.com/stable-release-cycle-8-service-release-0/)けど直らなかった)