PaintCode 2、簡単な余談とコメント

2013年に、 PaintCodeプロジェクトについて学び、私が見たものに非常に感銘を受けました。 それでも、何らかの奇跡によって、ベクター画像はコードの行に変わり、そのコードがアプリケーションで突然動作を開始し、このすべての魔法はわずか99.99ドルです。



私は長い間モニター画面を見ていましたが、未知のものへの恐怖が私を押しのけました。 それでも、私はデザインや図面からはほど遠い人であり、このプロジェクトの全力を一目で理解することはできませんでした。 彼は私たちのデザイナーにビデオとプロジェクトのウェブサイトへのリンクを送り、「さて、今、彼らは本物のことを始めます！」と考えました。 しかし、彼らの表現は私のようなものでした。 それでも、彼らはこれらすべての複雑な式と変数を理解できませんでした...



PaintCodeは興味深いアプリケーションです。境界状態にあるという理由だけでデザイナー向けのように思えますが、プログラマー向けでもあります-PaintCode 、それは本当に何ですか？

要素を作成するプロセスを十分に詳細かつ簡単に説明する豊富なドキュメントと例がありますが、この製品での作業中に特定されたコメントの一部を指摘するだけでなく、少し脱線したいと思います。

ペイント

一見、非常にシンプルなアプリケーション。 デザイナーとプログラマーの両方になじみのあること：

• ツールバー画面の上部 。
• オブジェクトの左側のライブラリ。
• 中央は作業エリアです。
• 右側のインスペクタとブラウザ（作業領域にあるアイテムを選択するため）。

上部ではすべてが明確で、各生徒はペイントでペイントされ、円、正方形、テキストの挿入、アスタリスクの描画方法を知っています。

左の部分を分析してみましょう。次の項目で構成されています。

• 色 -アプリケーションの色のセットを作成します。
• グラデーション -[色]アイテムで作成された基本色から作成できるグラデーションのセットを作成します。
• 影 -[色]項目で作成された基本色から作成できる一連の影を作成します。
• 画像 -3つの解像度1x、2x、3xの画像が個別に追加されました。
• 変数 -最も興味深い！ いくつかの陰謀を残しましょう。

しかし、変数の詳細については。 たとえば、色、傾斜角、テキスト、状態、タイプ、場所、サイズ、場所など、インターフェイス要素とやり取りする変数を追加することができます。



変数の種類：

• 式 -次のすべてを返すことができる式。
• 数値 -数値、たとえば要素のタイプ。
• 端数 -端数、UIProgressViewのprogressプロパティとしての0から1までの浮動小数点数。
• 角度 -数値とは異なり、これは実際には角度であり、0〜360の値です。
• テキスト -テキストフィールドに割り当てることができるテキスト。
• ブール値 -1/0、YES / NO、はい/いいえ、好きなように（たとえば、ボタンを押す、または要素を隠す）;
• Point-ポイントxおよびyの座標。
• サイズ -サイズの幅、高さ。
• 長方形 -位置（x、y）とサイズ（幅、高さ）で構成される長方形。

ライブラリの各要素に対して、一意の名前とそのタイプを指定できます：StyleKit、Local、Parameter（変数にはStyleKitタイプはありません）：

• StyleKit-オブジェクトは一般的なスタイルセットに追加されます。詳細は以下を参照してください。
• ローカル -このタイプは、PaintCodeでのみ表示されるローカルオブジェクトであることを意味します。
• パラメータ -このタイプは、PaintCodeだけでなく、プログラマが表示できる外部オブジェクトであることを意味します（プログラマは「手動」で変更できます）。

StyleKit PaintCodeの外部で使用するために必要な要素のセットを含むもの。たとえば、アプリケーションを構成する色のセットを追加できます。 プログラマーは名前でのみ色を呼び出すことができます：



self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];



同様に、グラデーション、シャドウ、および作成されたインターフェイス要素がStyleKitに追加されます。 つまり 開発者がUIを作成するのにさらに役立つセット。



例：

ある色を作成し、それを別の色のベースとして使用しました

// habrastorage.org / files / 10a / ffd / a57 / 10affda57f1741fd8ebc50714579dc4a.png "/>をドラッグアンドドロップするだけで、キャンバスに長方形を追加し、色を割り当てました。

テキストボックスをキャンバスに追加し、文字「H」を印刷し、テキストをベジェ曲線に変換し、結果の要素に少し影を追加しました（最初の色から作成した色から以前に作成）

すべてがシンプルです！



以前に作成された要素を継承する要素を作成する可能性は大きなプラスになると考えています。たとえば、ベースカラーからシャドウを作成すると、ベースカラーを変更するとすぐに、すべての相続人が変更をすぐに受け入れます。 適切な設計で、非常に便利なこと。



PSDをインポートし、お気に入りのエディターで描画してプロジェクトに転送することができます。 描画に関しては、デザイナーは多くの作業を理解することはできません。



作成された要素は、レジから逸脱することなく、「エクスポート」ボタンを押すだけで、必要な解像度にカットできます。





ここに小さな余談があります。



すでに書いたように、 PaintCodeの最初の知り合いはかなり前のことですが、どういうわけか通り過ぎました。 そして突然、アプリケーションを全面的に再設計する機会があり、今回は決心しました。 PaintCodeの導入が始まりましたが、ここでいくつかの問題が発生し、デザイナーは上位の部分のみを学習することができました！ 彼らは仕事をうまくやっていますが、変数と関数の作成に関しては、混乱があり、開発者はこの作業を終えなければなりませんでした。



作業を共有し、デザイナーが色と画像自体を作成し、開発者がStyleKitをプロジェクトにエクスポートする必要な変数と関数を作成することにしました。 そして、開発者は接続します...

コード

デザイナーによって作成された要素は、画面に表示するだけでよく、場合によっては何らかの形で生き返ります。

PaintCodeを使用すると、単純なUIImageおよびUIVewの形でインターフェイス要素を作成できます。これらは、移動、回転、色の変更、非表示など、より正確には、UIViewのインスタンスを描画するメソッドを作成します。

簡単なものから始めましょう。作成した画像からUIImageを取得するには、キャンバスを選択し、StyleKitが右側のインスペクターで返すメソッドを指定する必要があります。





ドロップダウンリストには、メソッド、「描画」メソッド、画像、「描画」および画像はありません。

画像生成を選択すると、StyliKitにメソッドが表示されます。私の場合は

//生成された画像

+（UIImage *）imageOfLogoHabrWithFrame：（CGRect）フレーム;

呼び出されると、現在の解像度の画像が作成され、使用できる状態になります。



描画メソッドを選択すると、メソッドが作成されます

//描画メソッド

+（void）drawLogoHabrWithFrame：（CGRect）フレーム;



次に、メソッドのUIView下位クラスによってクラスに追加されます-（void）drawRect：（CGRect）rect：



-（void）drawRect：（CGRect）rect {

//描画コード

[StyleKit drawLogoHabrWithFrame：rect];

}



たとえば、フレーム、他のパラメーター、またはアニメーションを変更するときにインスタンスを再描画するには、インスタンスでメソッドが呼び出されます。

[self setNeedsDisplay];



一般に、回路は2x2のように単純です。

この例には、PaintCodeプロジェクトとXcodeの両方が含まれており、非常に便利です。

StyleKit（実際にはObj-Cの場合は.hおよび.mファイルです）をエクスポートするには、File- > Export ...



次に、プロジェクトにファイルを追加して使用します。



PaintCodeは、Objective-C、Swift、C＃XamarinのiOSおよびObjective-C、SwiftのMac OSのコードを生成できます。 iOS 5以降、Mac OS 10.7以降をサポートします。



概して、開発者は変数 、 式の言語、および動的フォームの使用を習得する必要があります 。 そして、あなたの想像力で十分です。

まとめ

PaintCodeは、非常に強力で興味深いツールです。 これにより、美しい「ライブ」インターフェースを作成して、アプリケーションを「促進」することができます。 すべての「スライスされた」写真を保存する必要はありません。 しかし、使用する前にすべての重量を量る必要があり、これが私たちが決めたものです：



長所

• 数回のクリックで目的の解像度に画像を「カット」します。
• プロジェクトに多数の写真を保存する必要がなくなります。
• UIを「復活」させます-色を動的に変更し、アニメーションを追加し、サイズを変更し、想像力のみに制限します。
• ある程度、開発プロセスを加速します。
• プロジェクトの優れたアーキテクチャを使用すると、一連の要素（ Symbolを使用して同じ基本色、影）の外観をすばやく変更できます。
• 一箇所にすべての色;
• 要素を十分にすばやく描画します。
• 5分以内に回答し、質問があったときにも提案してくれました。

短所

• プロジェクトは単一のファイルで構成されているため、バージョン管理システムを使用すると不便になります（Gitは変更をマージできません。順番に変更します!!!）。
• 楽器の境界線の状態は、デザイナーと開発者の両方に恐怖を呼び起こします。 一部の人はロジックを台無しにするのは難しい、他の人は描くのが難しい。
• 変数をサブグループに分割する便利な方法はありません。その後、同じアクションを担当する変数が表示されます。それらをすばやくナビゲートするには、何らかのトリッキーなシステムを考案するか、すべての人を追跡する必要があります。
• 1つのプロジェクトで1つのStyleKitを使用すると、後者は使用が非常に難しい「変数」と式でいっぱいになります（上記の段落を参照）。
• 複数のStyleKitを使用する場合、どの特定の要素、色、影などが配置されているかを追跡する必要があります。これにより、開発中に混乱が生じ、結果としてダンプが発生します。
• プロジェクトは、インストールされているバージョンのPainCodeの存在に依存します。そうしないと、PainCodeで作成された要素をすばやく変更できません。
• 設計者はGitを習得する必要がありました。
• コードをエクスポートしてイメージを取得する方法はありません。 たとえば、ある奇跡によって、PaintCodeプロジェクトは失われましたが、それによって生成されたコードは残っていたため、コードからプロジェクトを復元できません。
• 問題を解決するとき、特に将来の要素を「サイズ変更」する必要があるとき（iOSの制約のカテゴリからの何か）に問題と理解不足が時々ある
• 現在、iOSおよびMac OSを除き、作成された要素をAndroidで表示するかどうかにかかわらず、作成した要素を使用する方法はありません...

PS

開発者の約束を守るのは非常に簡単ですが、それだけの価値がある場合もあります！ プロジェクトがAppStoreに入るとすぐに、資料が記事に追加されます。 PaintCodeは、小さなプロジェクトである小さな会社にとって優れたツールです。 美しく、競争力のあるデザイン、「活気のある」UI、その他の印象的なものを作成するために、ツールが引き続き開発されることを願っています。 おそらく、投稿全体を通して苦しんでいる主な質問は、「それなら、少なくともお金のために価値があるのでしょうか？」です。 間違いなく価値があります！ あなたはそれを把握する必要があります）



まあ、種のために、私の例は次のとおりです。









そして、これがprofiの仕組みです：