Androidマンになりたいおじさん

自分の備忘録的なのです。Androidを普及できたらいいなと思ったりしながら書きます

Androidアプリ開発はじめませんか?[ その2 ]

しばらくぶりです!!!!!!

 

こんなスタートでいいのやろうか。

いいんです。

 

これからはちまちまと更新頑張っていこうと思います

 

前回の記事でHello Worldアプリはできましたでしょうか?

まだの方はここからね

 

gumiossan.hatenablog.com

 

 

さて、今日はカウントアプリを作ってみましょう

こんなの↓↓↓↓

 

f:id:qurangumio:20170513064756g:plain

 

Androidは色んなコンポーネントを組み合わせることで、アプリが出来上がります。

 

コンポーネントってなんや?

ほんとなんなんでしょうね...

 

コンポーネントにも色々あるので、今はわからなくて大丈夫です。

 

そのコンポーネントの中でも基本となるアクティビティを知ることが、Androidアプリ開発の第一歩です!!!

 

アクティビティってなんじゃ〜〜〜???

 

ざっくりと、1枚の画面を表現する板的な

 

その板(アクティビティ)の上に文字を乗せたり、ボタンを乗せたり...etc.

色々なパーツを乗せていくことで、1つの画面の作っていきます

ボタンを押した時に画面が変わったりしますね?

その時は全く別のパーツが置かれたアクティビティに変わってます

複数の画面を作れば、その数だけアクティビティが増えていきます

 

いいですか?

 

うっすーーーい板です

 

でわ、いきましょう!!

 

AndroidStudioで新しくプロジェクトを作りましょうー!

 

アプリ名はCountとかでいいですかねー

Company Domainは他の方と被らないユニークなものにしないとだめなんですよねー

アプリ公開をしようとしている方なんかは、よく考えた方がよいです!

自分のドメインなんかを取得しておくと安心できると思います

foo.bar.gumio.com

こんな感じですね

 

公開しない練習用とかだったら、なんでもいいと思ってます

なので、今回はexample.com

 

最初の練習とかで設定するのはここだけですねー

後は、ひたすらEnter!!!!!

f:id:qurangumio:20170513040729p:plain

 

特に何もせずに、NextNextNext....
EnterEnterEnterEnter!!!!!!

 

f:id:qurangumio:20170513035543p:plain

 

NextNextNext....
EnterEnterEnterEnter!!!!!!

 

f:id:qurangumio:20170513035551p:plain

 

NextNextNext....
EnterEnterEnterEnter!!!!!!

 

f:id:qurangumio:20170513035555p:plain

 

 

はい。

 

 

最初の表示されている画面を見ていきましょう!!

 

f:id:qurangumio:20170513041218p:plain

 

うんうん。左には色々あるね

何が何だかさっぱりって感じ

 

今はざっくりで大丈夫です

慣れたら自然と理解していくもんなんで

とりあえず手を動かして行くことが大事です!!

 

最初に意識してほしいのは

MainActivity.javaとactivity_main.xmlです

 

こことここですねー

f:id:qurangumio:20170513041811g:plain

 

はじめに画面作っちゃいましょうか

 

layoutのactivity_main.xmlへGo

 

f:id:qurangumio:20170513041941p:plain

 

こんな画面になりましたか?

これはビューというものです

ビューはだと思ってください

この紙(ビュー)に色々なパーツを貼り付けていきます

 

そして覚えてますか?

アクティビティは板だと

 

このパーツを貼り付けていって、完成した紙を板に貼り付けます!!

そうすることで画面は初めて完成します

貼り付けるまではただの紙ですね〜〜〜

 

でわ、いきましょう!

 

左にずらーとたくさん英単語が並んでますね...

これらが画面を構成していくパーツ...ウィジェットといいます

 

最初に何が必要なのかをよく考えましょう

 

ボタンを押したら、1増える...

ボタン(Button)が必要ですね

そしたら、1増えたのを確認するための文字(TextView)も必要ですね

 

デザインは皆さんの自由です!

具体的なデザインの仕方は今後説明していくので、今はドラッグアンドドロップでぺたぺた貼りつけましょうー!

最初から存在するHello Worldは消しちゃいましょうか...

f:id:qurangumio:20170513043231g:plain

 

 

できましたか??

 

でわ、各詳細を見ていきましょう!!

画面上のTextViewを押してみましょう

右がこんな感じになってますね?

 

 

f:id:qurangumio:20170513043523p:plain

 

英語だらけで、うっ....ってなるかもしれませんが、それも勉強です

僕も未だに英語はさっぱりですが、なんとなくでやってたらなんとなくわかるようになります!!

なので、気合でなんとかしましょう!!

 

IDは名前みたいなものですねー

今だとtextViewちゃんになりますね!!

名前はそれを表す分かりやすいものにしてあげましょう

今回だと数字を表すテキストなので、、、

numTextViewとかにしてみましょうか

 

layout_widthとlayout_height

これは横幅と高さですね!!

widthが横幅で、heightが高さです

エストと身長みたいなもんですよ..えぇ((((

 

この右にある下三角を押すと

wrap_contentとmatch_parentが出てきます

気になったら、押してみたらいいんですよ

プログラミングのいいとこって、いくらでも失敗ができることなんですよ

いや、いざ誰かに使ってもらう時はだめですよ???練習のときですからね???

なので、好きなだけ暇な時にこれなんだろうってやつは触ってみるといいです

その分、賢くなると思いますよ

 

とまぁ、脱線しましたが伝えたかったことなので、、、

wrap_contentは中身のコンテンツに合わせてぴったりフィットしてくれるやつです。

 

Why???

 

今回でいう中身のコンテンツとは、TextViewだと文字そのもので、ボタンだったら、周りの枠ではなくて、中の文字ですね

 

よくわからないなーという方は、下に書いてあるView all propertiesを押してみましょう

そこを押すと、そのパーツに対して細かいとこまで設定できるようになります。

たくさんありますね~~~

その中の1つのtextSizeを80くらいにしてみましょう

文字の大きさが変わるとwrap_contentは柔軟にびよーんと大きさを合わせてくれます!なんと便利な

 

まぁ、これは各自でやってみてくださいな

 

ボタンも文字が中のコンテンツなので、textSizeを変えてみると同じことになりますよ

 

もう一つのmatch_parentは親のサイズにぴったり合わせる感じです

んー、よくわかんないなー

ある程度の大きさのスライムを四角形の箱にぶち込んだとき、スライムはその箱の大きさまで広がりますね?

そんなイメージです(わからない)

じゃあ、何が親なんだ??となりますね

 

ウィジェットがずらーと並んでる左下の画面を見てみましょう

f:id:qurangumio:20170513045239p:plain

 

ほうほう、なんかいるなと

これが親です

後々、詳細は説明していきます

これが親なんだなと思ってもらえたらいいです

今はこの親は画面いっぱいまで広がっています

 

なので、試しにmatch_parentにすると画面いっぱいにびよーんと広がりますね

 

場合によって、使い分けてみてくださいな

 

つぎ!!

f:id:qurangumio:20170513045547p:plain

 

textはtextです...

何を表示したいかですね!

今回は数字を表したいので、まだ数えられていない0にでもしてみましょうか!!!

 

f:id:qurangumio:20170513045714p:plain

 

うわ!!!ちっさ!!!!!

 

見づらいですよね。

さっき言ったようにtextSizeで大きくしてあげるとよいですね

90くらいしてあげましょうか

 

f:id:qurangumio:20170513045847p:plain

 

見やすい見やすい!!

 

textViewの設定はこんなんでよいです!

後のは必要になったときに随時説明しますので

 

つぎボタン!!

 

f:id:qurangumio:20170513050005p:plain

 

idはcountUpButtonとかがよいですかね?

layout_widthとheightは基本はwrap_contentでいきましょう!

 

ボタンで大事なのはonClickというやつです

これはなんなのか?

このボタンを押したときに僕は何をすればよいのか???

その何をするのかはプログラミングコードで書いていきます

ここはデザインを決める場所なので、そこまで詳細には決めてあげれません...

なので、ここではボタンを押した時の動作名を決めてあげましょう

ゲームとかだったら、攻撃するならattackですし、魔法ならspellとかですかね?

今回は数を数えていくので、countUpですかね

できましたか?

なんか後ろの灰色が気になるなぁ、、、という方は、backgroundをいじってあげましょう。

これは背景でそのままですね

この右の・・・を押すと

f:id:qurangumio:20170513050924p:plain

 

こんな感じになりますね?

左のColorとというとこを押して、好きな色に変えてみましょう!

僕は背景と同化をさせたいので、白にします

 

ついでにこれも小さいので、textSizeも大きくしましょう

いかがでしょう?

こんな感じになりました?

 

f:id:qurangumio:20170513051236p:plain

 

 

これでデザインは出来上がりました!!!

やったね!!

 

でわ少し休憩してから、実際にコードを書いてこの画面に作ったビューを貼り付けて動作を与えていきましょう!

 

次はjavaのMainActivityにいきましょう!

f:id:qurangumio:20170513051516p:plain

 

ひょえ〜

びびることはないです

最初はみんなひょえ〜〜ってなって、頑張ってできるようになるのです

すべての説明をしてたら、日が暮れちゃうので、、、詳細な説明は別の回で!!

今はとりあえずできることを目指しましょう!

最初は丸暗記でも構いません

こうやって使うんだなーってなれば充分です

 

アプリを起動!ってした時に、このMainActivityが動き始めます

そのときに最初に動く入り口となるのが、onCreateです

 

こいつは動き始めたとき、つまり画面が作られたときにやらなきゃならないことをやってくれています

初めに初期化しておきたいなーってことはここに書いておくといいかもですね!!

 

そのonCreateの中に書かれている


setContentView(R.layout.activity_main)

ここでさっき作ったビューを板に貼り付けているということです

これで作ったビューを貼り付けてあげないとアクティビティはただの板のまんまです

 

でも、このままじゃ貼り付けただけに過ぎません...

アクティビティは誰が誰なのかを名前がわかりません

困りました

なので、誰がどの子なのかをIDを教えてあげましょう

 

f:id:qurangumio:20170513053220p:plain

 

最初にTextView mNumTextViewと書かれたとこに使いたい変数を書いちゃいましょう!

変数ってなんだ???

変数はプログラミングする上でのコード上の箱みたいなものです

ゲームソフトをあちこちにばらまいてたらやばいですよね??

どこになにがあるのか探さないとだめです

ですが、ダンボールとか何か箱にPS4ソフトという張り紙をして、その中に入れておけば、探す手間が省けてよいです!!

なので、ここでもさっきビューでつけてあげたnumTextViewちゃんをmNumTextViewという箱にいれてあげましょう。

 

その前にまずは箱から作りましょう

これを変数宣言といいます

 

変数宣言のしかた

 

型名  変数名;

 

この型が大事です

ビューでのウィジェットと同じ型を書いてあげましょう

TextViewならTextView

ButtonならButtonという風に

変数名は箱の名前なので、何が入っているか分かりやすいものを入れてあげましょう

今回はmNumTextViewです

 

また、Javaは文末にセミコロン;をつけてあげないとだめです

僕達が文章に。をつけるのと同じですね。

 

でもまだ、箱ができただけです。

この箱に = を使っていれてあげましょう

数学では = は同じという意味です

プログラミングでは、これは代入という意味になります

ここは少しややこしいですね

代入はその箱にものを入れてあげることだと思いましょう!

 

例えば、ps4FF15という箱にファイナルファンタジー15をいれてあげましょう

 

ps4FF15 = ファイナルファンタジー15

 

簡単ですね?

 

数学と間違えないように数字でも考えてみましょう

xという箱に10をいれてみましょう

 

x = 10

 

今、xには10が入っています

もう一度同じことをしてみましょう

 

x = 10

 

確かにxには10が入っているから、イコールで等しいとなるのが数学です

ですが、プログラミングでは代入なので、xにはもう一回10が入るので、xに入っているは10です

前に入っていたのは消えてしまいます(*注意)

この辺りはしっかり勉強して慣れていきましょう!!!

 

でわ、onCreateの初期化のとこで、さっき作ってあげた箱の中にビューのnumTextViewちゃんを代入してみましょう

 

mNumTextView = (TextView) findViewById(R.id.numTextView) 

 

できましたか?

まず、findViewById(R.id.xxxxxx)という文で、先程ビューで名前をつけてあげたパーツを探してきます。

xxxxxというとこにつけてあげた名前を書きましょう

numTextViewでしたね

 

これで箱に入れれた!!とはならないのです。

残念なことにfindViewByIdで取ってきたパーツはすべてViewという箱に一括りになっています。View型です

なので、こいつは誰なのかということをアクティビティに教えてあげましょう。

誰なのかを教えてあげることを型変換 = キャストといいます。

その書き方は

 

(型名) findViewById(R.id.xxxxx) 

 

この型名が同じじゃないと箱には入らないということを覚えてください

 

PS4WiiUのソフトやハムとかCDを入れてもなにもならないですね?

それと同じです

ちゃんと合ったものを入れてあげてください

 

ここでデフォルトでJavaに用意された最低限の型を紹介します

 

整数を扱いたいなら、intという箱

文字を扱いたいなら、Stringという箱

小数点を扱いたいなら、doubleという箱

 

大文字小文字に気をつけてくださいね

 

例えで、型宣言から代入を一気にやってみます

 

int i = 100

String android = "Android"

double d = 3.14

 

どうでしょうか?

文字だけはダブルクォーテーション""ではさんであげないとだめなので、気をつけてください

 

ここまでで無事にTextViewを入れるmNumTextViewという箱にビューのnumTextViewというパーツを入れることができました

 

つまりコードで自由にいじることができるということです

まるで神様になった気分ですね??

 

次はボタンを押したときの動作を書きましょう

public void onClick名(View v) {

     ....................................

}

 

こんな感じです

さっきボタンでonClickにボタンの動作名を書きましょうと言いました。

ここでその動作にどういうことをしてほしいかを書くためだったんですねー

なので、ここにはcountUpと書きましょう。

今は文法の説明はしません。

覚えることが多すぎても頭がパンクするだけなので、ゆっくりいきましょう。

 

かけましたか?

でわ、ここで問題を考えてみましょう

 

数を数えるためには何が必要ですか?

 

考えてから、下に行きましょう

ヒント:数を入れるための箱と初期化

 

 

 

 

 

 

 

 

f:id:qurangumio:20170513060647p:plain

 

 

どうでしょうか?

整数をいれたいので、int型の数える数字を入れたいので、countNumという名前の箱を作ってみました。

そして、それを初期化するためにonCreateの中で0を代入しています。

 

ここまで分かっていたら500点です!!自信もってよいですよよよよ

分からなかった人も大丈夫です

わからなくて普通なのですから、、、

わからないなりにしっかり読んで手を動かして、学んでいきましょう!!

 

でわ、次は少し難しい問題です

countUpはボタンが押されたら、動き出します

ボタンを押したら、数を数えていきたいですね?

そのためにはcountNumには何を代入したらいいでしょうか?

ヒント:足し算

 

 

 

 

 

 

 

 

 

 

 

f:id:qurangumio:20170513061207p:plain

 

どうですか?

ボタンを押したら、数を数えたいので1を足します

何に対して足すか?countNumですね

 

countNumには0が入ってますね?

0に1を足して、1をcountNumに代入します

またボタンを押したら、1に1を足して2を新しくcountNumに代入します

 

ここでアプリを起動させて、ボタンを押してみましょう!!!

 

 

................

..........................

................................

 

まぁ何も起こらないですよ

 

数を数えただけにしか過ぎないので,,,,,はい

 

数を数えたら、それをnumTextViewちゃんにセットしてあげないとだめですね!!

セットしてあげないといつまでたってもnumTextViewは0のまんまですよ....

かわいそうですね。

 

なので、セットしてあげましょう!!

ここで注意したいのは、セットの仕方です

代入したらいいんじゃないの?と思って、既に

 

mNumTextView = countNum

 

と書いた方は、、、、

もうそれは

f:id:qurangumio:20170513062024j:plain

 

だめウーマン!!!

 

言いたかっただけです。。はい

 

少し考えてみましょう

numTextViewはTextViewという型ですね?

countNumはIntという型ですね?

そもそも型違いなので、それこそPS4にハム入れてるようなものです

 

じゃあ、キャストして

 

numTextView = (TextView) countNumにしたらいいんじゃない?

 

それもだめです!!!!

 

さっきのViewはTextViewになれたからよかったんです!

セミの幼虫がいずれセミになるから、セミの虫かごにまとめて入れちゃうのと同じです!これは許されます

 

ですが、PS4にフリスビーを無理やり入れようとしても無理ですね?

だって無理じゃん、、、、うん、、、わかって、、おねがい (((((

 

 

じゃあどうするんだと!!!

セットの仕方はちゃんと用意しております

我々は賢いので

f:id:qurangumio:20170513062718j:plain

 

 

f:id:qurangumio:20170513063021p:plain

 

おぉ。。なんだこれ....

大丈夫です

そのうちわかるようになります

今はこんな風に書くんだな~程度で

 

mNumTextView つまりTextViewには潜在能力的なのがあります

僕たちも生まれつき手を動かしたり、目をあけて前のものをみたりできますね?そんな感じです

TextViewも文字を表現するために生まれました

じゃあ、文字を書き換えたりする力があってもいいじゃないの!!

 

それがsetTextです

 

更にこれはメソッドといいます。

さらにさらにこれはインスタンスメソッドといいます

今はスルーしてください

 

そのメソッドの呼び方だけ覚えておきましょう!

その型の潜在能力を引き出すには、ドット.を使いましょう

そしたらこの先、わからない型に出会っても、こいつは何ができるのかなーってなったときにドットを打ったら、候補がずらーと出てきます

ある程度英語できないと意味は読み取れないかもしれませんが、、、それでもsetTextくらいは雰囲気でわかってください!!

分からなかったら、調べたらよいのですよおおおおお!!!

 

てことで

mNumTextView.setTextな

 

このかっこの中で行っている

String.valueOf(countNum)

 

おお?

なんか見覚えが、、

String(型)にドットが

じゃあ、valueOfもメソッドか〜〜

そう!!!

 

まあ、そもそもStringの箱用意してねえよとか

IntをStringにしても、TextView型と一致しねえじゃんかとk

色々言いたいことは分かりますよ、、ええ

 

否!!!!!!!!

 

そんなのまた今度だ!!!

とりあえず完成したんだから、起動させて、やったーぁぁあっぁぁっぁぁぁうごいたっぁぁっぁぁ!!!!!ポチポチポチポチ!!!!って1000000回くらいカウントしとけぃ!!!!!!!!

 

......

 

f:id:qurangumio:20170513064733p:plain

 

.....

 

どうですか?

初めて自分でアプリを、動くものを作ってみた感じは

楽しいと思いましたか?

地味だーとかもっとLineみたいなの作りたいーとかなると思う人もいると思います

プログラミングって小さいことの積み重ねなんです

このカウントアプリにはアプリ開発の基礎がたくさんつまっているので、よく読んでほしいと思います

小さいことをたくさんこなして、それをどんどん組み合わせて、大きなものを作れるようになっていきます

なので、修行だと思って、自分の好きなアプリが作れるようになってなると思って頑張ってみてください

 

 

 

バイバイっっ!!!!!!!!!!