2017/01/28

[android]レイアウト再び

Androidアプリを作っていて、格好がよいのは求めていないのだが、とにかく文字の入力をさせたいとか、文字列を表示させたいとか、そういう気持ちがある。
が、たったそれだけのことをしたいだけでもレイアウトをちゃんと作らないと、そもそも表示されてくれない。。。

何度やっても覚えないレイアウトの作り方なので、今回は趣向を変えて、以下に絞りたいと思う。

  • EditTextが1つと、それを確定するボタン1つ
  • 履歴用のTextViewが2つで、文字を追記していくことで履歴を残していく。スクロールで過去のものも見える。
  • 1画面に収める

image

TextViewもスクロールできたような気がするけど、ScrollViewの中に入れ込むサンプルを以前作ったことがあるから、今回もそうする。


縦に3段、1段目は横に2列。
だから、全体はLinearLayoutのvertical、1段目はLinearLayoutのhorizontal、2段目と3段目はScrollViewにすればよいだろう。

image

image

1段目が全領域を占有してしまった。。。
たぶん、どれもlayout_heightのデフォルトがmatch_parentだからだろう。
これをwrap_contentにすれば。。。

image

1段目は中身があるから高さができるけど、2段目と3段目は中身(content)が空なので、それにwrapすると高さが0になってしまうのだろう。

2段目と3段目の、デフォルトでLinearLayoutが入っていたものを、TextViewに変更する。
先にLinearLayoutを削除してからTextViewを追加しないと、「ScrollViewは子供が1人しか入れられません」と怒られる。

image

image

うーん、ましになったが、期待したものではないな。
1段目の高さはwrap_contentのままでよいのだけど、2段目と3段目は残りの領域を半分ずつ使ってほしいのだ。

そういうときは、1段目はそのまま、2段目と3段目のlayout_heightをmatch_parentにしたままlayout_weightに0以外の同じ数字を入れてみた。

image

layout_weightは、0.5でも1でも100でも、単に比率を見ているようだ。
ただ、数値の比率がそのまま自分の比率になるのではなく、相手の比率になる・・・?
以下は、2段目を1、3段目を2とした場合だ。

image

https://developer.android.com/training/basics/firstapp/building-ui.html#Weight

weight 値は、兄弟ビューが使うスペースと比較して、それぞれのビューが使う必要がある残りのスペースの分量を指定する数値です。

納得いかん。
URL先の例では、レイアウトの方向が水平で、Buttonはwrap_content、残りをEditTextが使い切りたい、というパターンだ。
だから、EditTextはlayout_width="0dp"で、layout_weight="1"になっている。0以外だったらなんでもよいのだろう。

うちの例は、事情が違う。
まず、contentに影響しないので、match_parentになる。
お互いがmatch_parentだったら分割してくれないか、と思ったが、おそらく上から順に評価されるので、2段目がmatch_parentで全部使ってしまい、3段目は高さがなくなってしまう。

 

と思ったが、layout_heightというか、layout_weightが計算される方向は0dpにしておくみたいだ。
https://developer.android.com/training/basics/firstapp/building-ui.html#Weight

2段目と3段目のlayout_heightを0dpにすると、layout_weight通りの比率になった。

image

content_wrapは残った余白をベースに計算するけど、match_parentは全部占めたところから計算するから方向がマイナスになるというか、比率が逆になるというか、そういうことになったのだろうか。

 

よし、実機(Nexus5)に焼いてみよう。

image

比率は合っているのだけど、キーボードが出てきて、そのまま圧縮されてしまった・・・。
こういうのが良い場合もあるかもしれないが、今回は上に載っていてほしい。

<activity> | Android Developers
AndroidManifest.xmlの<activity>の中にandroid:windowSoftInputModeを"adjustPan"にすると、メインウィンドウのサイズは変更されないとのこと。
layoutのXMLでは解決できないのね。。。

<activity android:name=".MainActivity" android:windowSoftInputMode="adjustPan">

image


Nameの高さが、横のButtonと同じ高さになってほしい気もするが、気にしないことにしよう。
EditViewの背景を、LinearLayoutの背景色と同じにしてしまえば気付かないのだろうけど、私としては「入力はここ!」というのが目に見えてほしいのだ。

LinearLayoutの中にpaddingだかmarginを設定して、中のlayout_heightをmatch_parentにすればいけるような気もする。
いけるのか・・・。
・・・うーん、いけなくもないけど、Buttonはああいう画像を使っているだけなので、見た目の高さと一致しないようだ。

 

というわけで、このままにしておく。
activity_main.xmlを記録として載せておきたいところだが、うちのブログエディタ(Open Live Writer)がプラグインなどにまだうまいこと対応してなくて、ソースが貼れないのだ。
Gistに貼っておこう。
https://gist.github.com/hirokuma/077a821563242c921cda4ae64b5f1fed

0 件のコメント:

コメントを投稿

コメントありがとうございます。
スパムかもしれない、と私が思ったら、
申し訳ないですが勝手に削除することもあります。

注: コメントを投稿できるのは、このブログのメンバーだけです。