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

いつのまにかXamarinによるConstraintLayoutのBindingライブラリ(PreRelease版)が出てました

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

準備

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

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

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

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

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

こうなりましたｗ

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

これでうまくいくはず

AndroidStudioの用意

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

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

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

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

次にAndroidStudioのSettingで必要なものを入れておきます(チェック入れてOKするだけです)

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

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

このときconstraint-layoutのバージョンがわからなければローカル領域に保存されているものを見に行く必要があります

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

レイアウト作成

AndroidStudioで組む

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

ConstraintLayoutを使用する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のツイート画面っぽいものを作ることにします

これをこうして…

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

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

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

なことがありました

以下完成物です

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変えましたので変更後のも載せておきます

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のコメントアウトを外して起動します

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

最後に

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

(AppCompatの謎のエラーXamarinアプデで直るようなこと言ってたけど直らなかった)

XamarinでもConstraintLayoutを使いたい！

準備

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

AndroidStudioの用意

レイアウト作成

AndroidStudioで組む

VisualStudio+Xamarinで動かす

最後に