Android：将 imageButton 放在 Button 上

Question

我想在占据屏幕 1/3 的大 Button 上放置 2 个小图标（带有操作）。当我们点击它们时，这两个图标和按钮必须支持操作。我很确定我必须使用 imageButton 作为图标。但是我找不到任何方法将图标 (imageButton) 保持在按钮的顶部。

这是我的代码：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp">

    <ImageButton
        android:id="@+id/icon1"
        android:src="@drawable/ic1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:contentDescription="@string/ic1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action1"/>

    <ImageButton
        android:id="@+id/icon2"
        android:src="@drawable/ic2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"           
        android:contentDescription="@string/ic2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action2"/>

    <com.myapp.CustomViews.myButton
        android:id="@+id/big_button1"
        android:text="@string/text_big_button1"
        android:background="@drawable/changing_button1"
        android:textColor="@color/white"
        android:layout_height="match_parent"
        android:textSize="@dimen/font_size_buttons"
        android:layout_width="match_parent"
        android:gravity="center"
        android:textAllCaps="false"
        android:capitalize="none"
        android:onClick="bigAction1"/>
</RelativeLayout>

大按钮上的“@drawable/changing_button1”允许我为按钮设置一种颜色，并在聚焦或按下时设置不同的颜色。

我尝试了很多不同的方法，但我找不到方法，但我确信有一个简单的解决方案。图标仍然隐藏在大按钮后面。

感谢您的帮助！

Answer 1

如何更改布局中的顺序？将 Button 小部件放在顶部，然后在其后声明 2 个图标？

您应该为 2 imageButton 添加 android:translationZ="5dip"。它有效（你应该运行看看，它在 IDE 上没有出现）

Answer 2

您可以使用 FrameLayout 叠加视图。例如：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp">

    <com.myapp.CustomViews.myButton
        android:layout_gravitiy="center"
        .../>

    <ImageButton
        android:layout_gravitiy="left|center_vertical"
        .../>

    <ImageButton
        android:layout_gravitiy="right|center_vertical"  
        .../>

</FrameLayout>

Answer 3

这是对您的布局稍作修改的版本，效果很好。

我用普通 android 和标准按钮替换了所有自定义内容，并在布局中将大按钮向上移动，因为如果它位于底部，它具有更高的 z-index 并覆盖两个小按钮。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <Button
        android:id="@+id/big_button1"
        android:text="BIG BUTTON"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@color/white"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:gravity="center"
        android:textAllCaps="false"
        android:capitalize="none"
        android:onClick="bigAction1"/>    

        <Button
            android:id="@+id/icon1"
            android:text="BT1"
            android:background="@android:color/holo_red_dark"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="action1"/>

        <Button
            android:id="@+id/icon2"
            android:text="BT2"
            android:background="@android:color/holo_green_dark"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="action2"/>

</RelativeLayout>

Answer 4

我终于找到办法了。解决方案是使用 RelativeLayout 作为按钮并用简单的 TextView:

替换 Button

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp"
    android:background="@drawable/custom_button_changing_color"
    android:clickable="true"
    android:focusable="true"
    android:id="@+id/button_layout"
    android:onClick="bigAction1">

    <TextView
        android:id="@+id/text_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        android:textSize="@dimen/font_size_buttons"
        android:textAllCaps="false"
        android:background="@color/transparent"/>

    <ImageButton
        android:id="@+id/icon1"
        android:src="@drawable/ic1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"           
        android:contentDescription="@string/ic1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action2"/>

    <ImageButton
        android:id="@+id/icon2"
        android:src="@drawable/ic2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"           
        android:contentDescription="@string/ic2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="action3"/>
</RelativeLayout>

希望对您有所帮助！ :)

Android：将 imageButton 放在 Button 上

Android: Placing imageButton over a Button

java

android

button

imagebutton

android-layout