web-dev-qa-db-ja.com

画面のボタンを水平方向および垂直方向に中央揃えで等間隔に配置するにはどうすればよいですか？

私はこれを達成する方法を理解しようとしてしばらく頭を悩ませてきました（ここではAndroid初心者なので、難しくありません）。

enter image description here

relativeLayoutまたはこれが作成されたAbsoluteLayout以外の何かを使用する。私は、デバイスが「絶対」位置を調整するWindowsプログラミングの背景から来ており、GUIレイアウトは問題ではありませんでした。

最初のレイアウトはエミュレータでうまく機能しますが、エミュレータのサイズとは異なるNexus Oneまたはその他の画面用にフォーマットされません。これは完全に配置されているため、私はこれを期待していましたが、さまざまな画面サイズで正しくフォーマットされるソリューションを見つけていません。私の目標は、さまざまな画面サイズで、縦長/横長でレイアウトを機能させることです。

これが私が現在使用しているコードです：[main.xml]

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
>
  <Button
    Android:id="@+id/Button01"
    Android:layout_width="188px"
    Android:layout_height="100px"
    Android:text="A"
    Android:layout_y="50px" Android:layout_x="65px" Android:textSize="48sp"/>

<Button
    Android:id="@+id/Button02"
    Android:layout_width="188px"
    Android:layout_height="100px"
    Android:text="B"
    Android:layout_y="175px" Android:layout_x="65px" Android:textSize="48sp"/>

<Button
    Android:id="@+id/Button03"
    Android:layout_width="188px"
    Android:layout_height="100px"
    Android:text="C"
    Android:layout_y="300px" Android:layout_x="65px" Android:textSize="48sp"/>
</AbsoluteLayout>

ここで他の質問からのヒントを使用して、私はこれを思いつきました、もっと近いですが、まだそこにはありません。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
Android:gravity="center"
Android:id="@+id/widget49"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:orientation="vertical"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
>
<Button
    Android:id="@+id/Button01"
    Android:layout_width="0dip"
    Android:layout_weight="1"
    Android:text="A"
    Android:textSize="48sp"/>

<Button
    Android:id="@+id/Button02"
    Android:layout_width="0dip"        
    Android:layout_weight="1"
    Android:text="B"
    Android:textSize="48sp"/>

<Button
    Android:id="@+id/Button03"
    Android:layout_width="0dip"      
    Android:layout_weight="1"
    Android:text="C"
    Android:textSize="48sp"/>
</TableLayout>

TableLayoutの写真は次のとおりです。

enter image description here

任意のヘルプ/ガイダンスをいただければ幸いです。

androiduser-interfacelayout
18
Marc

あなたの両方からの推奨事項を使用して完璧に働いた！

興味のある方のために、AbsoluteLayoutで実行しようとしていたことと一致するRelativeLayout形式の最後のmain.xmlコードを次に示します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:orientation="vertical"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
>

  <Button
    Android:id="@+id/Button02"
    Android:layout_width="188dip"
    Android:layout_height="100dip"
    Android:text="B"
    Android:layout_centerInParent="true"
    Android:textSize="48sp" Android:textStyle="bold" />

  <Button
    Android:id="@+id/Button01"
    Android:layout_width="188dip"
    Android:layout_height="100dip"
    Android:text="A"
    Android:layout_centerHorizontal="true"
    Android:layout_above="@id/Button02"
    Android:layout_marginBottom="30dip"
    Android:textSize="48sp" Android:textStyle="bold" />

  <Button
    Android:id="@+id/Button03"
    Android:layout_width="188dip"
    Android:layout_height="100dip"
    Android:text="C"
    Android:layout_centerHorizontal="true"
    Android:layout_below="@id/Button02"
    Android:layout_marginTop="30dip"
    Android:textSize="48sp" Android:textStyle="bold" />

</RelativeLayout>

また、将来誰かを助けるかもしれない興味深いメモについて。これらの推奨事項を使用して投稿した最初のコードを変更したとき、コンパイルしようとしたときに次のエラーを受け取りました： "\ res\layout\main.xml：9：エラー：エラー：指定された名前（ 'layout_above'、値は '@ id/Button02'））

原因が何であるかを少しグーグルで調べたところ、Button02が実際に作成される前に（Button01コードを介して）Button02への参照が発生したため、エラーが発生しました。したがって、最終的なコードではButton02が宣言されていることに注意してください[〜＃〜] first [〜＃〜]。

23
Marc

RelativeLayoutを使用します。ボタンBにはAndroid:layout_centerInParent="true"。ボタンAにはAndroid:layout_centerHorizontal="true"、Android:layout_above="@id/Button02"、 いくつかの Android:layout_marginBottom必要な空白スペースを設定します。ボタンCにはAndroid:layout_centerHorizontal="true"、Android:layout_below="@id/Button02"、 いくつかの Android:layout_marginTop必要な空白スペースを設定します。

AbsoluteLayout、ピリオドは使用しないでください。

12
CommonsWare

TableLayoutを使用した良い例を次に示します。これには3つのテーブル行があり、それぞれがlayout_weight = 1で、各行が画面の1/3を占めるようにします。中央の行にはボタンが含まれ、最初と最後のテーブル行は空です。

<TableLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent" Android:layout_height="match_parent">
    <TableRow Android:layout_weight="1"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"/>
    <TableRow Android:layout_weight="1"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:gravity="center">
        <LinearLayout
            Android:orientation="vertical"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">
            <Button
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:textSize="24sp"
                Android:padding="24dp"
                Android:text="Button 1"/>
            <Button
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:textSize="24sp"
                Android:padding="24dp"
                Android:text="Button 2"/>
            <Button
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:textSize="24sp"
                Android:padding="24dp"
                Android:text="Button 3"/>
        </LinearLayout>

    </TableRow>
    <TableRow Android:layout_weight="1"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"/>
</TableLayout>

編集...

これは、ボタンの幅を親と一致させるもう1つの方法です。

<TableLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent" Android:layout_height="match_parent">
    <TableRow Android:layout_weight="1"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"/>
    <Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textSize="24sp"
        Android:padding="24dp"
        Android:text="Button 1"/>
    <Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textSize="24sp"
        Android:padding="24dp"
        Android:text="Button 2"/>
    <Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textSize="24sp"
        Android:padding="24dp"
        Android:text="Button 3"/>
    <TableRow Android:layout_weight="1"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"/>
</TableLayout>
2
chutcher