Android Responsive Image Button Layout

2019-06-14 04:10发布

I'm trying to create the design shown below but with a responsive height on the image buttons for different screens. While I can get a responsive width by using android:layout_weightI can't manage to apply the same method to the button's height. What I'm trying to achieve is what's shown below but with the height of the screen evenly distributed amongst the buttons. i.e. 25% of the screen's height for each row of buttons. Any help would be greatly appreciated!

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

  <LinearLayout
    android:id="@+id/linear1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="0dp"
        android:layout_weight="0.40"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_pages" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_weight="0.60"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_pages" />

</LinearLayout>
  <LinearLayout
    android:id="@+id/linear2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/linear1"
    android:layout_alignParentLeft="true"       
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="0dp"
        android:layout_weight="0.60"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_pages" />

</LinearLayout>
  <LinearLayout
    android:id="@+id/linear3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/linear2"
    android:layout_alignParentLeft="true"       
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="0dp"
        android:layout_weight="0.40"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_pages" />

    <ImageButton
        android:id="@+id/imageButton6"
        android:layout_width="0dp"
        android:layout_weight="0.60"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_pages" />

    </LinearLayout>

   <LinearLayout
   android:id="@+id/linear4"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_below="@+id/linear3"
   android:orientation="horizontal" >

   <ImageButton
       android:id="@+id/imageButton7"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="0.60"
       android:src="@drawable/ic_pages" />

   <ImageButton
       android:id="@+id/imageButton8"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="0.40"
       android:src="@drawable/ic_pages" />
  </LinearLayout>

</RelativeLayout>

enter image description here

1条回答
ら.Afraid
2楼-- · 2019-06-14 04:47

Wrapping each horizontal LinearLayout in a FrameLayout achieved the desired effect.

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:orientation="vertical" >
<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp"
    android:layout_weight="0.25">

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

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="0dp"
        android:layout_weight="0.40"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_pages" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_weight="0.60"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_pages" />

</LinearLayout>
</FrameLayout>

</LinearLayout>

</RelativeLayout>
查看更多
登录 后发表回答