Android:如何在Button或ImageButton上组合文本和图像

578

我想在按钮上添加一个背景图片,并根据运行时发生的情况动态地添加一些文本。如果使用ImageButton,甚至无法添加文本。如果使用Button,可以添加文本,但仅能定义一个图片,例如android:drawableBottom和类似的XML属性,如此处所定义。然而,这些属性只能在x轴和y轴维度上组合文本和图像,也就是说,我可以围绕我的文本绘制一个图像,但不能在我的文本下面或下方绘制图像(其中z轴被定义为从显示器中出来)。

有关如何解决此问题的任何建议吗?一种想法是扩展ButtonImageButton并覆盖draw()方法。但是,凭借我的目前的知识水平,我不知道如何做到这一点(2D渲染)。也许有经验的人知道解决方案或至少有一些开始的指针?


1
使用9Patch,智能解决方案 - Hossein Kurd
1
嗨@Charuක,请查看一下这个链接,如果可以的话:https://dev59.com/MaDia4cB1Zd3GeqPAkHt - Mohamed Rihan
1
最好的方法是使用CardView >> 只需将LinearLayout放入CardView中,将image设置为LinearLayout的背景,并在此LinearLayout中使用textView。有关更多详细信息,请查看此链接> https://dev59.com/AW855IYBdhLWcg3wPBz6#65172123。谢谢,编码愉快 :) - AG-Developer
19个回答

12

MaterialButton支持设置图标并将其与文本对齐:

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My button"
        app:icon="@drawable/your_icon"
        app:iconGravity="textStart"
        />

app:iconGravity也可以设置为start/end,这样可以将图标与按钮对齐而不是对齐文字。


自版本1.5.0-beta01以来,app:iconGravity还可以是top/textTop提交记录

使用 iconGravity 顶部对齐的 MaterialButton


7

7

我希望我的解决方案适用于很多用户,希望如此。

我建议的是使用你自己的样式制作TextView。这个方法对我来说非常完美,它具有按钮的所有特性。

首先让我们创建一个按钮样式,你可以在任何地方使用它……我正在创建button_with_hover.xml。

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

其次,让我们创建一个文本视图按钮。
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

这是一个结果。然后使用任何颜色、属性和边距样式化您的自定义按钮。祝好运!

enter image description here


虽然我还没有测试你的代码,但是你的方法似乎是正确的,但我不明白为什么在移动应用程序中需要悬停效果。 - Mohammed Akhtar Zuberi
我为我的应用程序创建了悬停效果,在构建应用程序时需要使用悬停效果。但这取决于您:)如果不必要,您可以删除悬停效果。 - Jevgenij Kononov
我已经点赞你的回答,因为它是一个非常好的方法。我的唯一观点是,在移动界面上如何悬停? - Mohammed Akhtar Zuberi
哦...我现在明白了.. :D 是的,你是对的。这是不可能的。那个悬停效果主要是为了按压效果。只是XML类的名称不正确。 - Jevgenij Kononov

6
这段代码对我来说完美运行。
<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/choose_photo"/>

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

我已经尝试了你的代码,它可以运行,但是你的代码主要问题在于,如果你有一组不同文本大小的按钮,你的布局会发生偏移。因此,每个按钮的图片位置将在不同的位置。而实际上应该是居中的。这就是按钮出现的情况。 - Jevgenij Kononov

3
为了同时使用 ButtondrawableTop 并且仍然能响应点击,你可以使用按钮样式 @style/Widget.AppCompat.Button.Borderless 来使它透明。
请参考下图: enter image description here
<Button
    android:id="@+id/settings"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_baseline_settings_24"
    android:drawableTint="?attr/colorPrimary"
    android:text="@string/settings"
    android:textColor="?attr/colorPrimary" />

1
<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

或者您可以通过编程实现:
Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

0

制作一个假的按钮

这真的是唯一的方法

  <FrameLayout
        android:id="@+id/fake_button"

        android:layout_width=" .. "
        android:layout_height=" .. "

        android:background="@android:color/transparent"

        android:clickable="true"
        android:onClick="tappedNext">

        <ImageView
            android:id="@+id/fake_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:src="@drawable/your_amazing_drawable" />

        <TextView
            android:id="@+id/fake_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"

            android:text="Next"
            android:fontFamily="@font/ .. "
            android:textColor="@color/ .. "
            android:textSize=" .. " />
    </FrameLayout>

0
你可以使用这个:
  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

我在其中放置了一张图片作为背景,并添加了文本..!


-5
    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />

这不是正确的答案,因为ImageView不支持文本。 - Muhammed Fasil

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接