全然やったことないxmlを使ってアンドロイドアプリ画面を20個、パーツファイルを20個ほど作りました。
もうやりたくねぇ・・・が、スキルがあるに越したことはないので今後のために備忘録とっときます。
ほんとに付け焼き刃みたいな知識だけど。
html、cssがわかる前提で書いてます。
#そもそもandroidアプリ画面を作っていくには
Android Studioというツールをインストールして色々設定しました。
SDK（Android向けソフトウェアを開発するための開発環境）とか初期設定はいろんな記事みてさっさかやったので覚えてない！
ディレクトリ構成はこちらを参考に、こうなってるのかーと把握しました
http://gmonsoon.blog96.fc2.com/blog-entry-107.html
#レイアウトの書き方
よくありそうなコードが以下です。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/text"
android:textSize="@dimen/text_size_normal"
android:textColor="@color/text_black" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="@dimen/text_size_normal"
android:textColor="@color/text_white"
android:background="@drawable/button" />
</LinearLayout>
一番上にはエンコードが書かれたタグを置いとくみたいです。
で、1番外側のタグにはxmlns:android="http://schemas.android.com/apk/res/android"というなんかの定義に基づいて記述していくよという記しが必要なようです。
##LinearLayout 、RelativeLayout
htmlみたいにタグを使って書いていきます。
-
<LinearLayout />htmlでいうdivみたいなかんじ -
<RelativeLayout />htmlでいうposition:relativeなかんじ
RelativeLayoutの使い方はこちらがわかりやすいです
http://kuwalab.hatenablog.jp/entry/20110101/p1
他にもタグありますが、基本上記2つを使ってました。
##width、height、margin、padding
android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:layout_marginTop="10dp"android:padding="10dp"android:paddingTop="10dp"
等など・・・これが面倒くさい。layout_いらんやん・・・スネークなのかキャメルなのか・・・
match_parentは幅いっぱい、width: 100%; height: 100%;のかんじ。
wrap_contentは中の要素の表示するものに合わせてサイズを自動で合わせる。
※match_parentと機能が同じ fill_parentは非推奨 です。
それ知らなくてあとで指摘受けて直しまくった。。。
##text関連
android:text="テキスト"android:textSize="16sp"android:textColor="#000000"android:textStyle="bold"-
android:lineSpacingExtra="10sp"//行間
##orientation、gravity
-
android:orientation中の要素が縦並びか横並びか指定する
"vertical"縦並び
"horizontal"横並び -
android:gravity="center"htmlでいうtext-alignなかんじ
"top|center"のように|で区切って記述も可
text-align: center; のようにしたかったら、適用したいTextViewにandroid:layout_width="match_parent"を設定して
android:gravity="center"でなる、はず。
##string、color、dimen
テキスト、色、サイズを統括するcssみたいなファイルを作れます。
最初はタグに直書きしてましたが後からまとめてくれと言われて泣く泣くうつしました・・・・。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="text">テキスト</string>
</resources>
android:text="@string/text"
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="text_white">#FFFFFF</color >
</resources>
android:textColor="@color/text_white"
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size_normal">16sp</dimen>
</resources>
android:textSize="@dimen/text_size_normal"
##styles.xml
cssのように高さや背景を一括してまとめて記述できるファイル。
何も分からず一個ずつにスタイル付加してて、後で地獄を見た。
<style name="button_normal">
<item name="android:textColor">@color/text_white</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/btn_normal</item>
<item name="android:layout_height">@dimen/btn_normal_height</item>
<item name="android:textSize">@dimen/btn_text_size_m</item>
</style>
<Button
android:id="@+id/button"
style="@style/button_normal"
android:layout_width="match_parent" />
わーおコードスッキリ！
##TextView、ImageView、Button、EditText、Spinner、Space
<TextView /> htmlでいうpタグ
<ImageView /> htmlでいうimgタグ
<Button /> htmlでいうbuttonタグ
<EditText /> htmlでいうinput type="text"タグ
<Spinner /> htmlでいうselectorタグ
<Space /> 決まった比率のスペースをとってくれる便利なやつ
<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
こう書いて比率とりたい要素を挟んでおけばいい。
android:layout_weightで、表示領域の割合をとるかんじ。
layout_weightはめっちゃありがたいやつで、
例えばボタンを横並びにするときにandroid:layout_width="0dp"、android:layout_weight="1"を書けば自動的に半分になる。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_weight="1"
android:text="@string/btn_text1"
android:backgroung="@drawable/btn_image" />
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_weight="1"
android:text="@string/btn_text2"
android:backgroung="@drawable/btn_image" />
</LinearLayout>
###Buttonのスタイルに画像を使う
webなら複雑なボタンをまるまる画像にしたり、今時なフラットで背景単色でいいんですけど・・・。
アプリは割と装飾多めのボタンなんで使いまわしできる背景画像を9patchというpngで対応します。
四隅のラウンドや装飾が伸びないという素晴らしい仕組みです＾＾
作り方は分かりません！
Android、今さら人に聞けない9パッチグラフィック
http://www.dotproof.jp/2013/06/04/9patch-graphics/
例えばbtn_bg_normal.9.pngという画像を使う場合、.9.pngより前のファイル名を記載すればいいだけ。
9patchでない画像を使うときも.pngはつけず指定します。
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_weight="1"
android:text="@string/btn_text1"
android:backgroung="@drawable/btn_bg_normal" />
さらにボタンを押したときはこっちの画像を・・・とかはdrawableフォルダ内のファイルに指定します。
##drawableディレクトリ
画像はdrawableディレクトリに入れて呼び出します。
android:background="@drawable/image"
他に、
- タップやフォーカス状態のヴィジェットを色変更
- 図形やborder、radius
等の記述もここに入れます。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- フォーカス -->
<item
android:state_focused="true"
android:state_enabled="true"
android:state_pressed="false" >
<color android:color="#d9d9d9" />
</item>-->
<!-- タップ -->
<item android:state_focused="true"
android:state_enabled="true"
android:state_pressed="true">
<color android:color="#d9d9d9" />
</item>
<!-- 通常状態 -->
<item>
<color android:color="#FFFFFF" />
</item>
</selector>
<item color android:color="#FFFFFF" />
itemタグに書き込むのがテキスト
<item><color android:color="#FFFFFF" /></item>
itemタグで囲うのが背景
ここでつまずいたことが一つ。
タップで色変更をテキストだけに適用したい場合、drawableディレクトリと同じ階層に「color」ディレクトリをつくって、そこにファイルを入れないとダメそうです。
厳密に駄目かわからないんですが、android studioでは<item> tag requires a 'drawable' attributeとエラーが出ました。
調べたところバグか書き方が悪いのかはっきりせず、上記の方法だとエラーも出ずちゃんとなったのでこれで提出しました。
公式はcolorディレクトリを言ってるぽい
https://developer.android.com/guide/topics/resources/color-list-resource.html
こっちは書き方？
https://stackoverflow.com/questions/18913822/item-tag-requires-a-drawable-attribute
他にViewAnimatorというタグを用いてViewの切り替え、onとoffのToggleButtonを使いましたが、先方からの指示でいれただけでそんな使わないもんかなと思って省略します。（面倒とかじゃなくてね）
#テーマについて
テーマという概念。。。
アンドロイドアプリでは「TitleBar」というアプリ名が書いてるバーが上部についたり、や「Light」という基本背景が明るい設定をつけられます。
私が関わった案件では**「TitleBar」「ActionBar」無し**のデザインだったのでひたすら消す方法を探しました。
調べてでてきたそれっぽい記述をコピペしつつなんとなくこう？というかんじでやった。
大元の色とかはres/values/styles.xmlに記述する。
<?xml version="1.0" encoding="utf-8"?>
<style name="AppTheme" parent="android:Theme.NoTitleBar">
<item name="android:colorPrimary">#FFFFFF</item>
<item name="android:colorPrimaryDark">#000000</item>
<item name="android:textColorPrimary">#000000</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
アプリのテーマ設定で１番ハッ！となったページ
http://android-note.open-memo.net/sub/layout__make_theme.html
colorPrimaryとかについては公式ページに載ってます
https://developer.android.com/training/material/theme.html?hl=ja
テーマの継承とか分かりやすかったのはこちら
http://qiita.com/KeithYokoma/items/8264f923ef6575690613
#Toolbar
溺れるくらいハマったツールバー。
バージョンによってタグが違うのか、用途が違うのかわからなかったけど以下のタグで実装した。
<android.support.v7.widget.Toolbar />
画面上部にメニューアイコンがあるようなツールバーの実装記述▼
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height"
android:elevation="@dimen/toolbar_elevation"
android:theme="@style/AppTheme.BackToolbar"
android:background="@drawable/background_white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@drawable/logo"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
ここまではいいんですが、中のRelativeLayoutの左になんか隙間ができる・・・
paddingやmarginをつけてもないし・・・調べたらデフォルトで数値がついてくるみたいですね！いらない！
以下のように3行追加して隙間をなくしました。xmlns:app～も必要と知らず、できねーじゃん！と焦りました。
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp" />
以下の解決ページ見てなるほどー！となった
https://stackoverflow.com/questions/34874803/linearlayout-inside-a-toolbar-is-not-matching-parent
しかしね・・・ここまで調べて提出した後に、LineatLayoutにして、と・・・こういうのは最初に言って・・無知なだけとも思うけどツールバーの見た目だったからさぁ・・・
#include
ありがたきインクルード。共通パーツは一つのファイルにいれて呼び出す。
<include layout="@layout/include_button" android:id="@+id/include_button" />
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/btn"
android:layout_width="120dp"
android:layout_height="54dp"
android:background="@drawable/btn_normal"
android:text="@string/btn_top"
android:textColor="@color/text_black"
android:textSize="@dimen/btn_text_normal" />
</merge>
mergeっていうタグで囲うと透過がなんとかかんとかという・・・
以下の参照をみていただければへー、くらいにはなるんじゃないでしょうか。
【Androidトレーニング ＜include/＞でレイアウトを再利用する】
https://firespeed.org/diary.php?diary=kenz-1511
これぐらい覚えてれば大丈夫かな・・・もうやりたくないけど。
正直ね・・・技術もってる人にお金だしていいものを作ってもらうべきだと思います・・・・。