繁体   English   中英

如何均匀地对齐布局中的ImageButtons

[英]How to align ImageButtons in a layout evenly

我目前在布局中有4个ImageButton ,只占屏幕高度的一半。 我希望将ImageButton均匀地放置在布局中。 这是我有的:

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/feed_button"
        android:background="@android:color/transparent"
        android:layout_weight="1" />

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/feed_button"
        android:background="@android:color/transparent"
        android:layout_weight="1" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:orientation="horizontal">

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/feed_button"
        android:background="@android:color/transparent"
        android:layout_weight="1" />

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/feed_button"
        android:background="@android:color/transparent"
        android:layout_weight="1" />

</LinearLayout>

</LinearLayout>

这是有效的,因为这是结果:

在此输入图像描述

问题是,1:我想在每个按钮下添加文本,我不确定它是如何工作的,2: ImageButton的左右两边的白点是活动的,好像它们是按钮。 有一个更好的方法吗?

你可以做这样的事情

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/section1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 1"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img2"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 2"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>


</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img3"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 3"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/transparent">

        <ImageButton
            android:id="@+id/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="info 4"
            android:textColor="#fff"
            android:textSize="25sp" />
    </RelativeLayout>

</LinearLayout>

结果

在此输入图像描述

对于第二部分问题,您应该在整个相对布局上设置单击侦听器。 例如,点击第一个单元格: -

XML

 android:id="@+id/section1"

JAVA

findviewbyid(R.id.section1).setOnClickListener(...)

另一种(更好的)替代方法是使用TableLayout:

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

    <TableRow
        android:layout_height="0dp"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent">

            <ImageButton
                android:id="@+id/btn1"
                android:contentDescription="@null"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/feed_button"
                android:background="@android:color/transparent"/>

            <TextView
                android:id="@+id/txt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn1"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:text="Text 1"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent">

            <ImageButton
                android:id="@+id/btn2"
                android:contentDescription="@null"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/feed_button"
                android:background="@android:color/transparent"/>

            <TextView
                android:id="@+id/txt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn2"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:text="Text 2"/>

        </RelativeLayout>
    </TableRow>

    <TableRow
        android:layout_height="0dp"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent">

            <ImageButton
                android:id="@+id/btn3"
                android:contentDescription="@null"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/feed_button"
                android:background="@android:color/transparent"/>

            <TextView
                android:id="@+id/txt3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn3"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:text="Text 3"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent">

            <ImageButton
                android:id="@+id/btn4"
                android:contentDescription="@null"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/feed_button"
                android:background="@android:color/transparent"/>

            <TextView
                android:id="@+id/txt4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn4"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:text="Text 4"/>

        </RelativeLayout>

    </TableRow>

</TableLayout>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM