ボタンアクション

新しい開発環境になって初めての開発。今までやったことを大分忘れていたので追いつくのにちょっと手間取りましたが、ちょっと見直したらすぐできるようになりました。こうして振り返ってみると、大したことしてないですね。

麻痺している右手をマッサージしつつやりました。相変わらずハコニワデザインさんにお世話になりつつ。

ボタンのアクション

• viewの表示・非表示
• 画像変更
• テキスト変更
• テキスト装飾（大きさ・色）

Javaに入ると丁寧にやらなくてもなんとなくわかりますね。ボタンのイベントの取り方さえ知ってしまえばこっちのものだ、というかんじ。MFCは少し触れるので、慣れている部分もあるかもしれません。

ただ、EditTextから入力されたstringを取ってくるコードを書いているところで突然のエラー。Objeここのページctのidを取ってくるRに赤線が…。

ビルドしてみると、AndroidManifest.xmlというやつの中で、

“Error: No resource found that matches the given name (at value with value @integer/google_play_services_version)”

というエラーが出ているとのこと。何のこっちゃ。

Google play service SDKのエラー

結論から言うと、Google Play Serviceのライブラリをちゃんと読み込むようにしたら直った。

ここのページを参考に、SDK自体はすでにインストールしていたので、

インストールしたSDKをプロジェクトで使えるようにする。
build.gradle ファイルに追記するわけだが、プロジェクト直下のファイルではなくモジュールごとのファイルを編集するので注意。

dependencies に compile 'com.google.android.gms:play-services:+' を追記する。
こんな感じになる。

build.gradle

apply plugin: ‘android’ : dependencies { compile ‘com.android.support:appcompat-v7:+’ compile ‘com.google.android.gms:play-services:+’ }

これだけやってみて、gradleをsyncしたらエラーが消えた。

が、GooglePlayServiceに関係ありそうなコードはいれてないし、なぜ突然そんなエラーがでてきたかはなぞ。ただ、途中importファイルを追加しようとしてAlt + Enterを押したつもりがなんだか変な選択肢がでてきて、適当に選んでしまった。そのあと、デフォルトで入ってるonCreateの下にonStartとかonStopとかいう関数が自動で追加されていたので、それが悪かったような気は大いにする。

このエラー、ググってみると結構似たような質問が簡単にでてきたし、「それみんなぶち当たる壁だけど、GooglePlayServiceをちゃんと取り込んだら大丈夫だよ」みたいなことが書かれていたので、AndroidStudioでは結構よくある問題なのかもしれない。

なんにせよ、直ってよかったです。

Gradleってなんだ

ところでGradleってなんなんでしょう。AndroidStudioでは最初から気になっていたGradle。どうやらビルドに関係があるということはわかりますが……。

ググってみたらこのページが分かりやすかったです。

『Java製アプリを Eclipse から実行したことしかない新人に「ビルドツールとは？」を説明してみる…そして CI へJava製アプリを Eclipse から実行したことしかない新人に「ビルドツールとは？」を説明してみる…そして CI へ』

……冒頭の質問文、「Ant とか Gradle とか，名前は見かけるけど何に使っているのかよくわかりません (意訳)」がまんま自分で笑いましたね。なるほどビルドツール。よく分かりました。

自分は業務でVisualStudioを使っているのですが、あれはビルドツールが統合されている（？）のであまり認識していないんですかね。Property > Linkとかがそれに該当すると理解しました。

今回エラーのためにbuild.gradleというファイルをいじって直しましたが、VSでいうならLinkerエラーでproperty以下の設定を直したり、projectファイルの設定のところを書き直したりしたような感じなんでしょうか。それなら、よくあるエラーというのもちょっとわかるかもしれない。

まとめ

• ボタンのイベントは、xmlでonClickを追加すれば、設定した関数のところに飛んでくる。
• 表示されているObjectは、((***View)findViewById(R.id.****)).~~~~~で大体いろいろできそう。ともかく指定さえできれば操作は関数を見ればよい。
• Gradleはビルドツールの名前。AndroidStudioの標準ビルドツールで、先行ツールのいいとこどり

遅々とした歩みですが進んでます。

 

 

画面分割など

ここのブログ毎日ちょっとずつとか言っていたけれど、モニターの接続とかで時間がとれませんでした。無事にデュアルにできたのでまたぼちぼちやっていきます。デュアルモニターは快適です。文鳥は池袋のイベントにいってきました。文鳥グッズを買いあさりました。満たされました。ペットの文鳥は元気です。

画面分割

今まで同じテストプロジェクトの中身を書き直す形で勉強してきたけれど、画面分割では練習もかねてちゃんと新しくプロジェクトを作ることにした。結果、Blank projectではなくempty projectを選ぶべきだということがわかったので、最初のあの苦労はなんだったんだろう？　まあいいや、勉強になったし……。

画面分割２　比率で配置

ここで、Heightをmatch_parentにしているとうまく比率をつけられないから0dpと指定すべし、とあったんだけれど、なんでそうなるのかよくわからなかったら調べてみた。

そしたら、ここのブログとかここのブログとかでわかりやすく説明してあった。ようするに、

• weightで重み付けをして分割するのは、配置するViewそれぞれのHeightを親のHeightから引いたあまりの部分
• あまりはマイナスの値もとりうる。

match_parentにしているとViewの大きさが親と同じになるから、（親の大きさ）―（viewの大きさ（＝親の大きさ））×２以上、になるから、重み付けして分割して分配するあまりの部分がマイナスになる。よって、大きな重みがついているものほどたくさん引かれて小さくなる、ということらしい。わかりやすい。

だから、元の親の大きさそのものを分割して分配するために、ViewのHeightは0dpにしてしまうということなのだそうだ。なるほどです。

 

画面分割１～４までひととおりできたので次からようやくプログラムに入ることができます。自分は普段C/C++を使っているのでjavaはほとんど知りません。楽しみです。

 

 

Scrollなど

毎日ちょっとずつでもいいからやっていこうという心がけ。作業するのにあまりにも画面が小さかったのでモニター買いました。しかしHDMIケーブルを買い忘れて接続は明日に。

モニターはいいかんじなんですが、ちょっとばかり机が狭い。もう大分長いこと机に不満を持っているのでそろそろ買い換えてもいいかもしれない。

ハコニワデザインでのお勉強は昨日の記事を書いてからぼちぼち進んでいました。パレットウインドウの話から、

• プロパティウインドウ
• Editorの文字サイズの変更
• 行番号の表示
• プロジェクトの削除
• 背景画像・キャラ画像の表示
• xmlでボタンの配置
• レイアウト変更
• 文字枠の追加
• 縦横スクロール

が終了。

スクロールではちょっとひっかかった。パレットウインドウからボタンをドラッグするときに、一生懸命携帯のレイアウト画面においていて、RelativeLayout > ScrollView > LinearLayoutの階層構造ができなくて苦労した。xmlを直にいじって階層構造を直したりしていた。

が、動画をちゃんとみたらスマホ画面の上ではなくComponent Treeの方にドラッグ＆ドロップしていることが判明。こういうのも画面が小さいことの弊害かなと思う。

HDMIケーブルは明日届く予定。

Android Design Support Library

2015年6月ごろに公式から追加されたライブラリー。マテリアルデザインを実現しやすくするためのライブラリーだそうな。FloatActionButtonもこれで実現されるボタンのひとつで、Android StudioのいつかのバージョンからはBlank  Activityにデフォルトで追加されている。

どんなものかっていうのはこことかこことか見るのがよさそう。

簡単に箇条書すると、

• NavigationView
• TextInputLayout
• FloatingActionButton
• TabLayout
• CoordinatorLayout

内容は名前から想像できたりできなかったり。上のサイトとかで見てみると、なるほど最近のアプリでよく見るボタンとかページのうごきのようです。

前の記事ではFloatingActionButtonが入っているからレイアウトウインドウが使えない、という書き方をしたけど、本当はこの中のCoordinatorLayoutが問題だったような気がする。

Blank Activityで作成したactivity_main.xmlの中身を見ると、

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.testtest.test.MainActivity">

とある。前述のライブラリの一番下に箇条書きしたやつ。これが先に設定されていたから、初心者向けのレイアウトの変更ができなかったのだと予想。

じゃあCoordinatorLayoutってなんなんだろうと思って調べてみると、こういうのがでてきた。

CoordinatorLayoutとは

CoordinatorLayoutのCoordinatorには調整者やまとめ役という意味があります。
CoordinatorLayoutはAndroidのLinearLayoutなどのViewGroupの種類の一つで、
CoordinatorLayoutを使うことで、子Viewの大きさや位置を動的に管理できます。
デフォルトのプロジェクトのテンプレートなどの例を見ながらこのレイアウトを理解していきましょう。

上のページの中にあるgifを見ると理解がしやすい。つまりCoordinatorLayoutもLinearLayoutとかと同じレイアウトの一つだ、と。どういうレイアウトかというと、レイアウトが動的に変わるページのレイアウトだ、と。

やはりちょっとアドバンストなレイアウトのようです。しかしこれでちょっと予想ができた。多分、Contents_main.xmlは上の説明でいう「子View」だったんだろうな、と。

xmlの記述は難しそうだが、構造だけ見るとさらに予想ができる。

シンプルに構造だけ記述すると以下のようなレイアウトになっています。

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <Toolbar />
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <include layout="@layout/content_scrolling" />
    <FloatingActionButton/>
</CoordinatorLayout>

本格的にCoordinatorLayoutの説明をする前に、このレイアウトの中を説明してきます。

たぶん、<include layout=“@layout/content_scrolling” />これが実際のメインの内容物になるんだろうな。デフォルトでいうcontent_main.xml。

今のところの理解はこれでいいということにしよう。とりあえず基本のレイアウトを理解してから動的な方の勉強に入りたい。さっきのリンクのページはよさそうだからまた読んどく。

あと、そもそもマテリアルデザインってなんだ？という疑問も生まれたので調べてみた。

マテリアルデザイン

こことかにのってた。

マテリアルデザインとは、スマートフォンやタブレットをはじめ、テレビ、メガネ、腕時計など様々なデバイスで統一感があるデザインを取り入れることにより、デバイスが変わっても使いやすいシームレスなデザインの概念。マテリアルデザインはデバイスが変わっても違和感がなく、ユーザーがストレスを感じずに操作できることが肝となる。

※「シームレス（Seamless）」は「継ぎ目のない」という意味で、異なるデバイス、ソフト、サービスで違和感なく操作できることを意味する。

「マテリアル（Material）」は「素材」という意味の英単語で、マテリアルデザインは現実世界と連続的であり、同じ物理的性質を持ったデザインという考えが取り入れられている。マテリアルデザインは現実世界で感じるような”質量”を感じられるような、自然なデザインを目指している。

マテリアルデザインは2014年6月にGoogleが発表したデザインの概念で、Gmail、Google Maps、Google Calendar、Google日本語入力などに導入されている。Android 5.0 LollipopではマテリアルUIの作成をサポートしており、Googleがマテリアルデザインというガイドラインを提示することにより、Androidのデザインが統一されてユーザーにとって使いやすくデザインとなる。

なんとなく理解。Google系のデザインのこと。これも勉強が必要ですね。

開発環境（android studio）の導入・使い方の学習

独学でandroidアプリを作ろうとしているのだけれど、どうにもつっかかるところがあるので記録を残すことにしました。アンドロアプリはありがたいことに解説等がいろんなところにのっている＋本もたくさんあるのだけれど、その分どの資料を見ていいのかわからなかったりするのでその整理。

自分で解説するというよりは、他の解説を読んでてつかかったところやわからなかったところの保管になればいいかなと思っています。最終目標はなんらかのゲームアプリを作ること。ざっくりにも程がある目標ですが、ある程度何ができるのか分かってからもうちょっと考えたいと思います。

ところでこれ書いているときにペットの文鳥ちゃんがキーボードのまわりをうろちょろしていて大変に邪魔。

参考にするサイト

ハコニワデザイン　http://hakoniwadesign.com/

とりあえずしばらくはこのサイトさんの動画に沿って勉強していくつもりです。まずは「３分で学ぶandroid studio」から。

開発環境（android studio）の導入

実はandroid studioはリリース直後にインストールしていたのでアップデートだけですみました。

JavaはJava SE Development Kit 8u66をダウンロード。65と66の違いがよくわからなかったけれど多分数字の大きいほうでいいだろうという安直な考え。

ハコニワデザインさんの環境設定のところ参考にしました。環境変数もなんとなく追加。適当すぎて不安になるけどエミュレータがうごくのでよしとします。

基礎知識の習得

http://hakoniwadesign.com/?page_id=4318

上のページの基礎知識から、

• アプリの新規作成
• Android stuidoの画面構成
• ファイル構成
• フォルダ構成

を勉強。とくにつっかかることもなし。

パレットウインドウ

パレットウインドウはちょっとひっかかった。解説にあるようにドラッグ＆ドロップできない。禁止されているようだ。

調べてみたら、Android studio1.4からの変更で”Blank Activity”からプロジェクトを作成するとactivity_main.xmlにパレットからレイアウトをドラッグ＆ドロップできなくなっているとのこと。

下記のサイトに説明されています。

https://akira-watson.com/android/android-studio-1-4.html

解決策は

1. Empty Activityからプロジェクトを作成する
2. Activity_main.xmlは諦めてcontent_main.xmlにレイアウトを記述
3. MainActivity.javaをいじってactivity_main.xmlにレイアウトを記述できるようにする

なんかがあるようです。

自分は３を選択。なぜなら、１はやってみたけれど、emptyすぎて初心者には意味が分からなかったから。ある程度分かっている人ならそれで平気なんだろうが、初学者にはちょっとハードルが高い。

２もやってみたがいまいちよくわからなかったのと、ハコニワデザインさんの解説に合わせたかったのでできればactivity_mainをいじりたかった。

よって３。やり方は、一応上のサイトにのっている通りなんだがいまいち分かりにくい。ようするに下の画像で赤でかこっているところをコメントアウトすればいいらしい。

そんでactivity_main.xmlの中身をこれに置き換え。（activity_main.xmlを開いてテキスト表示→テキストを全部消して下のコードをまるっとコピペ）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textViewA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:textSize="20sp" />

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="Button" />

</LinearLayout>

<Tips>

• 行選択⇒Ctrl + /でコメントアウトができる
• xmlファイルの中でCtrl + Alt + l　でコードの整理ができる

 

しかしなぜこんなことをしなければレイアウトウインドウを使えないのだ？

FloatingActionButtonとはなんぞや？

と思って調べてみたら、またひとつ勉強になったので次の記事に書く。