異なる画面サイズのレイアウトについて

[ナザール]

お世話になります。

↓の画像の様に、一画面に４つの画像とそれぞれの画像の下に画面遷移させるためのボタンを設置しました。

http://www.fastpic.jp/images.php?file=3603078023.png

タブレットでは何とか形になったのですが、画面サイズの違うスマートフォンで実行してみると画像がボタンに被っていたりして

メチャクチャな状態になっています。

※異なる端末（ 画像サイズ ）でも画像のサイズが同じ状態です。

以前も同じ悩みで、結局画面サイズをjavaで取得して、そのサイズに対応するxmlファイルを吐き出す様に分岐処理を行いました。

しかし、毎度毎度制作する度に何パターンもレイアウトをするのが面倒なので、何とか画面サイズの比率に応じた構築方法が無いか

ご教示いただきたいです。

また、xmlをガッチリ勉強したいので、xmlに特化したオススメの書籍がございましたら、出来ればお教えいただきたく存じます。

何卒、どうぞよろしくお願い申し上げます。

[Makoto Yamazaki]

zaki です。

ViewGroup の中の子View を指定した比率の大きさにする方法はいくつかありますが、

一番単純なのは親(ViewGroup) を LinearLayout にして、子の View で

 android:layout_weight="3" のように、比率に応じた数字を入れる方法です。

横方向に並べるなら LinearLayout の android:orientation を horizontal に、

縦方向に並べる場合は vertical にしてください。

その際、各子View のandroid:layout_width または android:layout_height に 0dp と

指定する必要があります。

このあたりの詳しい説明は  http://zaki.tdiary.net/20110702.html に書いたので

興味があれば読んでください。

他には TableLayout を使う方法もありますが、ちょっと面倒です。

--
このメールは Google グループのグループ「日本Androidの会」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには android-group-j...@googlegroups.com にメールを送信してください。
このグループに投稿するには android-g...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/android-group-japan からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

YAMAZAKI Makoto

[noxi]

noxiです。


zakiさんのおっしゃる様にLinearLayout + weightで画面を比率で割ることで
画面サイズが変わっても同じような表示を行うことが可能です。


コンテンツの大きさを画面サイズ別で対応する他の方法としては
・画面サイズに応じたlayout.xmlを作成する
・layout.xmlを共通にしてwidth/height等に@dimenリソースを設定し
　画面サイズに応じたdimens.xmlを作成する
があります。

前者は
/layout
/layout-sw600dp

後者は
/values
/values-sw600dp

の様なディレクトリにXMLを設置することでスマートフォンやタブレットに応じて
同じレイアウトのリソースIDで画面を出し分けることが可能です。
（ただしAndroid 3.1以下は動作しません）


2015年4月27日 16:17 Makoto Yamazaki <makot...@gmail.com>:

[ナザール]

zaki様、noxi様

どうもありがとうございます。

LinearLayoutを使用すれば良かったのですね。

RelativeLayoutで左上、右上、左下、右下という様にボタンと画像を設置しようと頑張っていました・・・。

何とかかんとかボタンのレイアウトまでは理想に近くなったのですが、各ボタンの上に画像を置きたいのですが、

どうも上手く設置できません。

長々とべた書きで恐縮ですが、以下のソースにImageViewを追加するにはどの様に書いたら良いのでしょうか？

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  android:orientation="vertical"

  android:gravity="center"

  android:layout_width="fill_parent"

  android:layout_height="fill_parent">

 

 <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="horizontal" >

    

  <Button

android:id="@+id/btnDisp1"

android:layout_width="fill_parent"

android:layout_height="50dp"

android:layout_weight="1"

android:gravity="center"

android:layout_margin="70dp"

android:background="@drawable/button_customize"

android:text="ボタン1"

android:textColor="#FFF" />

  

  <Button

android:id="@+id/btnDisp2"

android:layout_width="fill_parent"

android:layout_height="50dp"

android:layout_weight="1"

android:gravity="center"

android:layout_margin="70dp"

android:background="@drawable/button_customize"

android:text="ボタン2"

android:textColor="#FFF" />

 </LinearLayout>

  

  

 <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="horizontal" >

    

  <Button

        android:id="@+id/btnDisp3"

        android:layout_width="fill_parent"

        android:layout_height="50dp"

        android:layout_weight="1"

        android:gravity="center"

android:layout_margin="70dp"

        android:textColor="#FFF"

        android:text="ボタン3"

        android:background="@drawable/button_customize" />  

     

  <Button

        android:id="@+id/btnDisp4"

        android:layout_width="fill_parent"

        android:layout_height="50dp"

        android:layout_weight="1"

        android:gravity="center"

android:layout_margin="70dp"

        android:textColor="#FFF"

        android:text="ボタン4"

        android:background="@drawable/button_customize" /> 

  </LinearLayout>

  

</LinearLayout>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LinearLayoutを入れ子にして、horizontalとverticalを組み合わせてみたり、

RelativeLayoutと組み合わせてみたり色々試みたのですが、中々上手くいきません。

度々恐縮ですが、ご教示いただけると幸いです。

どうぞよろしくお願い申し上げます。

2015年4月27日月曜日 16時01分01秒 UTC+9 ナザール:

[Makoto Yamazaki]

zaki です。

現状でButton が思い通りに表示できているのであれば、

Button を LinearLayout におきかえて、その中にImageView と Button を

いれればできるのではないでしょうか。

ただ、この程度のレイアウトをするためにLinearLayout を3段重ねるのはちょっと

無駄かなーという気もしてしまいます。

画面を4分割したいだけであれば RealativeLayout を使い、まず 幅と高さが

0 の　Space(もしくは View) を android:layout_centerInParent="true" で配置

します。これが画面の中心なので、このView の位置を基準にButton や画像を

配置していけば Layoutの階層を浅く保ってレイアウトできるとおもいます。

--

このメールは Google グループのグループ「日本Androidの会」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには android-group-j...@googlegroups.com にメールを送信してください。
このグループに投稿するには android-g...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/android-group-japan からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

YAMAZAKI Makoto

[ナザール]

zaki 様

お世話になります。

LinearLayoutで入れ子にして組むと、ボタンと画像が逆になったり思い通りにレイアウトが出来なかったので、

おっしゃるように、RealativeLayoutを使用してレイアウトしてみます。

今後また、どうしても行き詰った時に質問させていだきますので、どうぞよろしくお願い申し上げます。

2015年4月28日火曜日 17時05分02秒 UTC+9 zaki:

このグループから退会し、グループからのメールの配信を停止するには android-group-japan+unsub...@googlegroups.com にメールを送信してください。

このグループに投稿するには android-g...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/android-group-japan からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

YAMAZAKI Makoto