android - Androidでボタン間のスペースを管理する方法

Question

円形のボタンを備えたアンドロイドでダイヤルパッドを作成しようとしています。IOS 7 と同様です。これは、IOS 7 でダイヤルパッドを表示できるリンクです。

http://www.google.com.pk/search?q=ios7+dial+pad&biw=1277&bih=524&source=lnms&tbm=isch&sa=X&ei=623sVOfCC4zraOfhgYAK&ved=0CAYQ_AUoAQ#imgdii=_&imgrc=dYMGMoj954EdzM%253A%3B4hEenGnCMC6kYM%3Bhttp%253A%252F%252Fwww.tekshanghai.com%252Fwp-content%252Fuploads%252F2013%252F06%252Fdial-pad.png%3Bhttp%253A%252F%252Fwww.tekshanghai.com%252Fpromotion-free-update-to-ios-7%252F%3B640%3B1136

レイアウトは完了しましたが、私が直面している問題は、モバイル画面のサイズが異なることです。他のモバイルでアプリを実行すると、ボタン間のスペースが拡張されるか、スペースが増加すると言えます。また、android:layout_weight を使用してボタンを画面サイズに合わせて自動的に調整しましたが、ボタンの形状が変わります。円形のボタンは形状を楕円形に変更します。この問題を解決するのを手伝ってください。 レイアウトはこちら

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialpad"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fcfbdf"
    android:gravity="left" >

    <TableLayout
      android:id="@+id/tableLayout1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/textView11"  
      android:background="#fcfbdf" >

        <TableRow
           android:id="@+id/dial_input_Row"
           android:layout_width="fill_parent"
           android:layout_height="0dp"
           android:layout_marginTop="1dp"
           android:layout_weight="1" >
 <EditText
           android:id="@+id/dial_input_edit_text" 
           android:layout_width="1dp"
           android:layout_height="55dp"
           android:layout_gravity="left"
           android:layout_weight="1"
           android:ems="11"
           android:paddingLeft="5dp" 
           android:paddingRight="5dp"   
           android:textStyle="normal" 
           android:textSize="25dp"                    
           android:inputType="text" 
           android:background="@drawable/subtitle1" 
           android:textColor="#556854">
</TableRow>
 </TableLayout>

<LinearLayout
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:layout_below="@+id/tableLayout1"
                android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp" 
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >


    <LinearLayout
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:orientation="vertical" >


        <Button
            android:id="@+id/button1" 
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:background="@drawable/selectorcircle"
            android:paddingBottom="15dp"
            android:text="1"
            android:textColor="@drawable/text_selector"
            android:textSize="13dp"
            android:textStyle="bold"
             />

        <Button
            android:id="@+id/button4"
            android:layout_width="71dp"
            android:layout_height="70dp"

            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="4\nGHI" 
            android:textSize="13dp" />

        <Button
                android:id="@+id/button7"
                android:layout_width="71dp"
                android:layout_height="70dp"

                android:background="@drawable/selectorcircle"
                android:textColor="@drawable/text_selector"
                android:textStyle="bold"
                android:text="7\nPQRS" 
                android:textSize="13dp" />

        <Button
            android:id="@+id/button10"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:background="@drawable/selectorcircle"
            android:text="*" 
            android:textSize="18dp" />
        </LinearLayout>
    </LinearLayout>

  <LinearLayout
        android:layout_width="0dp"  android:layout_marginLeft="20dp"
        android:layout_height="fill_parent"  android:layout_gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button2" 
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="2\nABC" 
            android:textSize="13dp" 

          />

        <Button
            android:id="@+id/button5"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="5\nJKL" 
            android:textSize="13dp" />

        <Button
            android:id="@+id/button8"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="8\nTUV" 
            android:textSize="13dp" />

        <Button
            android:id="@+id/button11"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:textStyle="bold"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:text="0" 
            android:textSize="15dp" />
    </LinearLayout> 
    </LinearLayout>   
   </RelativeLayout>

selectorCircle XML

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


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

    android:shape="oval">

  <stroke android:width="2dp" android:color="#eee460" />

  <gradient

        android:startColor="#bcbcbc"
        android:endColor="#afafaf"
        android:angle="360"
     />

</shape>

score 0 · Accepted Answer

GridLayoutManager ( https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html ) を使用し、3 列にまたがるように設定します。

これには RecyclerView を使用する必要があります。

GridView ( http://developer.android.com/reference/android/widget/GridView.html ) を使用して、ストレッチモードを調整することもできます。

また、ボタンのサイズが変わる理由は、layout_weight を使用してレイアウトサイズを拡張し、形状が楕円形であるため、楕円形を呼び出して作成するためです。このために、カスタムビューを作成し、onMeasure をオーバーライドして、ビューの高さと幅の両方が等しくなるように設定できます。

score 0 · Accepted Answer

これを試して

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>
    </LinearLayout>

</LinearLayout>

イメージビューの代わりにボタンを使用できます。

android - Androidでボタン間のスペースを管理する方法

2 に答える 2

Related

Reference