画面分割など

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

画面分割

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

画面分割2 比率で配置

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

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

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

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

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

 

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

 

 

Scrollなど

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

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

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

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

が終了。

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

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

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

Android Design Support Library

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/

とりあえずしばらくはこのサイトさんの動画に沿って勉強していくつもりです。まずは「3分で学ぶ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にレイアウトを記述できるようにする

なんかがあるようです。

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

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

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

MainActivity

そんで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とはなんぞや?

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