以前からAdobe Illustratorを使いこなせるようになりたいなぁと思っていました。
お仕事で使うわけではないので、CCのコンプリートプランはもちろんのこと単体プランも躊躇していたのですが、41% OFFという言葉に釣られて単体プランを購入してみました。

昔少しだけお仕事でも使ったことはあったものの見よう見まねでやっていたので基本的なところからしっかりやりたいな、と。
本を買うなら何がいいかなーと考えていたときに、Adobeにサイトにチュートリアルがあるのを見つけました。
チュートリアルくらいあって当たり前ですよねw

なので基本的なところからこなして行こう!チュートリアルは無料だしw

というわけで、まず最初にやったのはこちらのチュートリアルです。
IllustratorことはじめStep1:まずはここから「図形の組み合わせで絵を描く」

動画レッスンになっています。
8分前後の動画になっているので比較的進めやすいですね。

本でもいいのだと思いますが、動画だとパスでつかむ部分だとかわかりやすくていいなと思いました。

完成品

そんなこんなで動画を見ながら作ったものがこちら

step1.png

ちゃんと動画と同じように作れました。

学んだこと

基本的なツールの説明

基本的な操作方法とツールはショートカットキーと合わせて教えてくれるのでとてもわかりやすかったです。
機能が多すぎてどこにどんな機能が隠されているのかわかりにくかったりするので、まずはその辺を抑えるのはいいですね。

矩形ツールの使い方

長方形、楕円形、多角形などの作り方ですね。
後述しますが正方形と正円にちょっと苦労しましたが、これは慣れですかね。

シェイプ形成ツールの使い方

これ、すごく簡単で感動!
この機能ってCS5の頃からあったのかしら…(昔使っていたのがCS5だったのです)
シェイプを繋げたり、切り抜いたりって昔は結構面倒だった印象があるのですが、すごいですね。
繋げたりくり抜いたりしたいシェイプを選択しておいて、シェイプ形成ツールでドラッグするだけでOK。これ素敵。

スポンサーリンク

つまづいたポイント

正方形とか正円を描くときにShiftキーを押しながら描くわけですが、Shiftキーを離すタイミングが悪いと上手くいかないことが多かったのは私だけなのでしょうか。。
いろいろ試して見た結果、

  • Shiftキーを押してドラッグで描画を開始
    step1-2.png
  • 好きなサイズになったらドラッグを止める(ここではまだShiftキーは押したまま)
  • 矩形が確定された状態になったらShiftキーを離す
    step1-3.png

とするとちゃんと正方形、正円になりました。

今回引っかかったポイントはここだけでした。

なかなか楽しかったので時間を見つけてチュートリアルを一通りやってみようと思います。
またやったら感想を書いてみます!

前回に引き続き、ListViewを扱ってみたいと思います。
いままではAndroidが用意していたレイアウトを使っていましたが、今回は独自のレイアウトのアイテムを表示してみましょう。

完成版はこんな感じです。

kotlin-customlist-01.png

お花の名前と写真、説明が表示されるようになります。
今まではテキストだけだったので、他のViewと組み合わせて独自のレイアウトを使った方法を解説していきます。

というわけで、今回のもくじはこんな感じになります。

もくじ

1. 開発環境
2. プロジェクトを作ろう
3. 画面を作ろう
4. ListViewの行のレイアウトを作ろう
5. 画像を用意しよう
6. データを作ろう
7. 独自のAdapterを作ろう
8. ListViewを表示してみよう
9. ViewHolderを使ってみよう
10. 動作確認してみよう

今回紹介したアプリのソースはGitHubにもあるので合わせてご参照ください。

1. 開発環境

  • AndroidStudio 3 Preview (Canary 3)
  • Kotlin
  • Java 1.8
  • macOS Sierra (10.12.3)

基本的にはAndroidStudio 2.3でも同じように作れます。

バージョンが変わるとエラーが出たり動かなくなったりするかもしれませんが、
エラーメッセージをよく読んで指示に従ったり、検索などして調べてみてくださいませ。

AndroidStudio と Java はすでにインストールされている前提で進めますのでご了承ください。

2. プロジェクトを作ろう

Android Studio 3 をお使いの方はこちらの記事を参考にしてプロジェクト作成とKotlinの設定を行なってください。

Android Studio 2.3をお使いの方は第1回の4. JavaをKotlinにしようまでを参考にしてプロジェクトの作成とKotlinの設定を行なってください。

プロジェクトの Application Name は「CustomListView」にしました。

Activity Name はデフォルトのまま「MainActivity」です。

3. 画面を作ろう

では、activity_main.xmlを開いて、画面を作っていきましょう。

部品を追加しよう

今回、必要となってくる部品はListViewだけです。

Palette の Containers の中にある 「ListView」 を画面に適当な位置に配置してください。

Kotlin de Android 第4回 ListViewを使ってみよう

部品の設定をしよう

次は部品の設定を行っていきましょう。
といっても、今回はIDを付けるだけです。
「myListView」 にしましょう。

部品の位置を設定しよう

部品の位置はLayoutEditorで設定してきましょう。

Android Studio 3 から少しだけ操作方法が変わっているので、バージョン別に記載しておきます。

Android Studio 3

WidthとHeightの設定である「match_parent」がなくなって、「match_constraint」に変わりました。
名前の通りで制約に合わせるということなようで、先に制約をつけておく必要があります。
右下の2つの制約をつけてください。縦横の中央に配置する制約ですね。

まず画面の中央に配置したいので、下の画面の整列に関する制約をつけてあげます。
右下の2つににあります。縦位置の中央と横位置の中央にする制約です。

Kotlin de Android 第5回 ListViewで2つのテキストを表示してみよう

制約がつけられたら、WidthとHeightの設定を「match_constraint」にしてあげてください。

kotlin_listview2-01.png

このような状態になっていれば大丈夫なはずです。
念のため、プレビューを画面サイズの違う機種にしてみて、ListViewが全画面表示になってればOKです。

Android Studio 2.3

全面に表示したいので、WidthとHeightを「match_parent」にすればいいのですが、部品を適当に配置しただけの状態ではなぜがうまく反映されません。

で、配置したsimpleListViewを選択して、左下に表示される「×」印をクリックしてください。

Kotlin de Android 第5回 ListViewを使ってみよう

こうすると、今ついている制約を全部削除してくれます。
制約自体はつけていないはずなですが、適当に配置した状態ではなにか制約が付いてしまっているのかもしれません。

そのあとにWidthとHeightを「match_parent」にしてください。
そうすると縦横ピッタリに配置されるはずです。

念のため、プレビューを画面サイズの違う機種にしてみて、ListViewが全画面表示になってればOKです。

4. ListViewの行のレイアウトを作ろう

今までは標準で用意されていたレイアウトを使っていましたが、今回は独自に作成してみます。

レイアウトファイルを追加しよう

まずレイアウトファイルを追加する必要があります。
メニューの File > New > Android resource file を選択してください。
kotlin-customlist-03-01.png

そうするとリソースファイルの追加画面が表示されます。

kotlin-customlist-03-02.png

以下のように設定してください。

File name: listview_item
Resource type: Layout
Source set: main
Directory name: layout

設定できたらOKをクリックしましょう。新しくxmlファイルが生成されるはずです。

部品を追加しよう

さて、レイアウトファイルができたので、部品を配置していきたいのですが、デフォルトだとベースのレイアウトがLinearLayoutになっています。
せっかくなので、ConstraintLayoutに変えましょう。

今、「Component Tree」にはLinearLayoutがひとつだけある状態になっていると思いますので、LinearLayoutを選択して、右クリックをします。

メニューが表示されるので、一番下の「Convert LinearLayout to ConstraintLayout」をクリックしてください。kotlin-customlist-03-03.png

なにやらダイアログボックスが表示されますがデフォルトのまま「OK」をクリックしてください。
そうするとベースのレイアウトがConstraintLayoutに変わっているはずです。

kotlin-customlist-03-04.png

では、部品を配置していきましょう。
今回は画像とテキストなので、ImageViewが1つ、TextViewが2つ必要です。

まずImageViewから配置していきましょう。
「Palet」の「Images」から「ImageView」をドラッグ&ドロップして左上あたりに適当に置いておきましょう。
配置するときに画像の選択画面が表示されますが、プログラムから変更していくのでここでは適当なものを選んでおいてください。
ic_launcher_roundにしておきました。

それから、TextViewを2つ、ImageViewの隣に置いておきます。

部品を設定しよう

それぞれの部品にIDをつけましょう。

View ID
ImageView profileImageView
TextView nameTextView
TextView contentTextView

nameTextViewとContentTextViewは文字を左揃えにしたいので「TextAlignment」を一番左側のアイコンを選んでおきます。
それからnameTextViewは太字にしたいので「TextStyle」で「B」を選んでください。

部品の位置を設定しよう

部品の位置はLayoutEditorで設定してきましょう。

まずはprofileImageViewからやっていきましょう。
上と左をそれぞれ端っこまで持っていって、マージンを16にします。
layout_widthとlayout_heightは正方形にしたいのでそれぞれ72dpにします。
下の画像の様になっていればOKです。

kotlin-customlist-04.png

次はnameTextViewですが、左はprofileImageViewの右に、上は上端に、右は右端にそれぞれ接続します。
layout_widthは「match_constraint」にします。
上左右のマージンは16ずつにしておきます。

下の画像の用になっていればOKです。

kotlin-customlist-05.png

最後にcontentTextViewですが、左はprofileImageViewの右に、上はnameTextViewの下に、右は右端にそれぞれ接続します。
上のマージンは0、下左右のマージンは16ずつにしておきます。

下の画像の用になっていればOKです。

kotlin-customlist-06.png layout_widthは「match_constraint」にします。

ちょっと崩れてるように思えますが、実際はテキストに合わせた高さになるので問題ないです。

これでListViewの行のレイアウトが完成です。

5. 画像を用意しよう

適当なサイズ(正方形)の画像を5枚用意してください。
学習用途のみだったらGitHubからダウンロードして使っていただいてもOKです。

本来は画面の解像度毎にサイズを変えたものを用意するのが推奨されるのですが、ちょっと大変なので今回はワンサイズのみにしたいと思います。なので少し大きめのサイズにしています。

用意した画像はres/drawableにコピーしておいてください。
Finderで画像をコピー、AndroidStudioのdrawableを選択して貼り付けで大丈夫です。

6. データを作ろう

次はmyListViewに表示するためのデータを作っていきましょう。

データクラスを作ろう

今まではテキストだけだったのでListやMapでOKだったのですが、今回は画像も必要なのでデータクラスを作って対応します。

MainActivityに書いていってもいいのですが、せっかくなので別ファイルにしておきたいと思います。
今回のサンプルでは必要ないのですが、別の画面からも使いたいという場合に使いまわしができるようになるのでそのようにしておきましょう。

メニューのファイル > New > Kotlin File/Class を選択します。

そうするとこのような画面になるので、

kotlin-customlist-07.png

Name: FlowerData
Kind: Class

このように設定して、OKとするとファイルが作成されるはずです。

クラス名だけ定義されている状態になっていると思うので、データクラスに変えていきましょう。

引数はそれぞれ、お花名前、説明文、写真のIDになります。

これだけでデータクラスは完成です。
JavaだとプロパティやらSetter、Getterやら作らないといけないので、Kotlinって楽ちんですね♪

FlowerDataを作ろう

ではこれで準備ができたので、データを作っていきましょう。
MainActivity.ktを開いてください。

といってもゴリゴリ書くだけなのですが…。

onCreate()のなかに書いていきましょう。

ひとまず名前、説明文、画像のリストを作ります。
今回画像はアプリ内に格納したものを使っていくのでIDで管理します。

説明文はWikipediaから拝借しています。
これらのリストですが数は合わせておいてくださいね。

では、これらの配列をFlowerData型のリストに格納していきましょう。

MutableListを使うのがあまり好きじゃないのですが、ここではしょうがないので…。
単純にどんどん追加していくだけです。

これでひとまず表示させるデータは完成です。

7. 独自のAdapterを作ろう

いままではデータの型が1つだったので、ArrayAdapterやSimpleAdapterで事足りていましたが、
今回はStringとIntになってくるのでAdapterを独自に作る必要があります。

MainActivityクラスのなかに書いていきましょう。

今回はArrayAdaperのサブクラスとして作成します。

FlowerAdapterという名前にして、コンストラクタ引数にはContextとFlowerDataのリストを受け取るようにします。
親クラスであるArrayAdapterには第一引数にContext、第二引数はレイアウトファイルのIDですがここでは0にしておいて、第三引数にはFlowerDataのリストをそれぞれ渡してあげます。

次にプロパティを1つ用意しておきます。

あとでレイアウトファイルからViewの取得をしたりするので最初に生成しておきます。

次にListViewを表示するときに呼ばれるgetView()というメソッドをoverrideします。

引数ですが、positionは表示するviewが何番目なのか、convertViewは表示するView、parentはconvertViewの親ビューとなります。

そして、viewを返すのですが、基本的にはconvertViewを返しますが、ここがNullableになっているとおりnullで渡されてくることがあります。
nullのときはViewを生成して返してあげます。行のViewは最初はない状態で当たり前ですよね。
じゃあ、nullじゃないときってなんなの?となるわけですが、ListViewは例えば100行必要という場合に100個のViewを作るわけではありません。
画面に表示される分のViewだけ作成して、スクロールして見えていなかった分の行を表示するときは見えなくなった分のViewを再利用するという仕組みになっています。
いちいち生成していたらリソースが増えていく一方なのでこのような仕組みが取られています。

というわけなので、convertViewがnullだったらViewを生成しないといけないのですが、引数は変更できないので別の変数を用意してそちらに代入しておきます。

それから、viewがnullかどうかチェックして、nullだった場合はlayoutInflaterを使って、Viewを作ってあげればいいですね。

Viewが生成できたら、それぞれの部品にFlowerDataを反映させたいのですが、getItem()というメソッドでデータを取得できます。
引数にはpositionを指定します。

データが取得できたら、部品のViewを取得して、データを反映させて、viewを返せばOKです。

nameTextViewとcontentTextViewはtextプロパティにそれぞれ文字列を入れてあげればOKですね。
profileImageViewに関しては画像のIDが入っているだけなので、画像に変換してあげれる必要があります。
BitmapFactory.decodeResource()というメソッドを使ってあげて、第一引数にはcontext.resourcesを、第二引数に画像のIDを指定するとBitmapに変換してくれるので、それをImageViewのsetImageBitmapに渡してあげればOKです。

これでひとまず独自Adapterは完成です。
(あとで少しだけ手直ししますが)

8. ListViewを表示してみよう

さて、独自AdapterのFlowerAdapterが完成したので、ListViewに表示してみましょう。

使い方はArrayAdapterのときと同様です。
onCreate()のFlowerDataのリストを作ったあとに書いていきましょう。

まずはFlowerAdapterを生成します。引数にはContextのthisと、FlowerDataのリストを渡してあげればOKですね。
作ったadapterをmyListView.adapterにセットしてあげればOKです。

ではここまでできたら、エミュレータで確認してみましょう。
完成版と同じように表示されればOKです。

9. ViewHolder

さて、ほとんどできているのですが、少しだけ改良してみましょう。
どこかというと、アダプタの中でデータをセットするときに毎回findViewById()をして部品を探しているのでこのあたりをviewを作ったときに1回だけになるようにしてあげましょう。

よく使われるテクニックとしてViewHolderというクラスを使う方法があるのでやってみましょう。

ではまずViewHolderクラスをデータクラスで作っておきます。
FlowerAdapterの上辺りに作っておけばいいでしょう。

内容はいたって簡単で各部品のプロパティを用意しておけばOKです。

そうしたらViewHolderを使うようにFlowerAdapterを書き換えてみましょう。
getView()メソッドを以下のように修正していきます。

まず、ViewHolderの変数を用意しておきます。
viewがnullだったときにviewを生成しますが、そのときにViewHolderを作って各部品をfindViewByIdで取得しておきます。
そして、viewのtagプロパティに保存しておきます。

viewがnullじゃなかったとき、すなわち再利用できるviewがあったときは、view?.tagからViewHolderを取り出します。

ここまでできたら、FlowerDataの内容を反映させるところを以下のように書き換えてあげます。

ViewHolderに格納されている部品のviewにそれぞれ新しいFlowerDataのデータを反映させてあげればOKです。
これで、viewが生成されるときだけしか部品の生成は行わないので無駄がなくなる、というわけです。

さて、少し長くなりましたが、これで実装は完了です。

10. 動作確認してみよう

では、エミュレータで動作確認をしてみましょう。

kotlin-customlist-01.png

このように表示されればOKです。
ちょっとデータ量が少ないのでスクロールはあまりされませんが、下にスクロールすると隠れた上の行のViewが再利用されているだなぁーと思ってもらえるといいのかな、と思います。
これだとたぶん最後の行を表示しても一番上もまだ表示されているので再利用はされてないですね(汗)

基本的にこの記事ではKotlinでの書き方をメインとしているので、ListViewの仕組みをもっとしっかり学びたい!という場合はご自身で調べて見てもらえるとありがたいです。すみません(´-﹏-`;)