【问题标题】:Android: combining text & image on a Button or ImageButtonAndroid:在 Button 或 ImageButton 上组合文本和图像
【发布时间】:2010-12-04 17:01:15
【问题描述】:

我正在尝试在按钮上添加图像(作为背景),并根据运行时发生的情况动态添加图像上方/上方的一些文本。

如果我使用ImageButton,我什至无法添加文本。 如果我使用Button,我可以添加文本,但只能使用android:drawableBottom 和定义here 的类似XML 属性定义图像。

但是,这些属性仅结合了 x 和 y 维度的文本和图像,这意味着我可以在文本周围绘制图像,但不能在文本下方/下方(z 轴定义为从显示器中出来) .

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

【问题讨论】:

标签: android image text button


【解决方案1】:

对于只想将背景、图标图像和文本放在一个中的用户 Button 来自不同文件:设置在 Button 背景、drawableTop/Bottom/Rigth/Left 和 填充属性。

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

对于更复杂的排列,您还可以使用RelativeLayout(或任何其他布局)并使其可点击。

教程:很好的教程,涵盖了这两种情况:http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

【讨论】:

  • 要以编程方式使用b.setCompoundDrawablesWithIntrinsicBound(null,R.drawable.home_icon_test,null,null) 而不是android:drawableTopb.setPadding(0,32,0,0) 而不是android:paddingTop
  • 将布局用作按钮实际上是一种相当灵活的方法。
  • 如果你正在为你的drawables使用资源ID,只需将null替换为0
  • 如何缩放背景图像以适应按钮?
  • @Stallman 有一个基于xml和基于代码的缩放解决方案:stackoverflow.com/questions/8223936/…
【解决方案2】:

这个问题有更好的解决方案。

只需取一个普通的Button 并使用drawableLeftgravity 属性。

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

这样你得到一个按钮,它在按钮的左侧显示一个图标,在图标的右侧站点显示文本垂直居中

【讨论】:

  • 如果您选择在按钮上使用背景颜色(在这种情况下很可能),则此解决方案会出现问题。那么点击或选择将没有图形响应。你可以编写一个选择器来处理这个问题,但是你不会得到手机的默认颜色。
  • 只是想补充一点,如果使用此解决方案,Drawable padding 属性非常有用。
  • 有没有办法在 xml 中设置可绘制图标的高度和宽度?
  • 这是一个很棒的解决方案,并且在 Android 开发者网站上也得到了官方认可:developer.android.com/guide/topics/ui/controls/button.html
  • 如果按钮很大并且文本变长,那么看起来很丑:图标最多在左边,文本在中间某处
【解决方案3】:

您可以在Button 上调用setBackground() 来设置按钮的背景。

任何文字都会出现在背景之上。

如果您在 xml 中寻找类似的内容,则有: android:background 属性的工作方式相同。

【讨论】:

  • 如果你走这条路,你不想只使用一个简单的drawable作为背景。使用 StateListDrawable(通常通过 res/drawable/ 中的 XML 文件),因此您可以为各种状态(正常、按下、聚焦、禁用等)定义背景。
  • 同意你,寻找这个问题和我的答案:stackoverflow.com/questions/1533038/…
  • 多么愚蠢。我怎么可能在文档中错过了这一点。感谢您的快速回答以及 的提示。这是我绝对希望在未来实现的。
  • 它在 ICS 4.0+ 版本上无法正常工作,图像会拉伸。我使用的是带有背景的 TextView。
【解决方案4】:

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

【讨论】:

  • 一个简单而错误的解决方案。仅用于左对齐。
  • @CoolMind 我只解释我附上的上面的图片..如果你想右对齐使用drawableRight
  • 在我读到这个答案之前,我什至没有想过这样做。这就像一个魅力!
【解决方案5】:

只需使用 LinearLayout 并假装它是 Button - 设置 background可点击 是关键:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

【讨论】:

  • 如何添加点击效果?
  • 最佳答案,这样您就可以管理 100% 的外观和感觉,而不必将图标粘贴到边框上。
  • frankish,将android:onClick 添加到您的视图中
  • 唯一真正的解决方案。好麻烦啊!
【解决方案6】:

直接替换

android:background="@drawable/icon"

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz 一个不错的技巧.. ;)

【讨论】:

    【解决方案7】:

    我采用了与此处所述的方法不同的方法,而且效果非常好,所以我想分享一下。

    我正在使用样式来创建一个自定义按钮,左侧是图像,中间是右侧的文本。只需遵循以下 4 个“简单步骤”:

    我。使用至少 3 个不同的 PNG 文件和您在以下位置拥有的工具创建 9 个补丁:/YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch。在此之后,您应该:

    button_normal.9.png、button_focused.9.png 和 button_pressed.9.png

    然后下载或创建一个 24x24 PNG 图标。

    ic_your_icon.png

    将所有内容保存在 Android 项目的 drawable/ 文件夹中。

    二。在 drawable/ 文件夹下的项目中创建一个名为 button_selector.xml 的 XML 文件。状态应该是这样的:

    <item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/button_focused" />
    <item android:drawable="@drawable/button_normal" />
    

    三。转到 values/ 文件夹并打开或创建 styles.xml 文件并创建以下 XML 代码:

    <style name="ButtonNormalText" parent="@android:style/Widget.Button">
        <item name="android:textColor" >@color/black</item>
        <item name="android:textSize" >12dip</item>
        <item name="android:textStyle" >bold</item>
        <item name="android:height" >44dip</item>
        <item name="android:background" >@drawable/button_selector</item>
        <item name="android:focusable" >true</item>
        <item name="android:clickable" >true</item>
    </style>
    
    <style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
        <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
    </style>
    

    ButtonNormalTextWithIcon 是“子样式”,因为它扩展了 ButtonNormalText(“父样式”)。

    请注意,将 ButtonNormalTextWithIcon 样式中的 drawableLeft 更改为 drawableRight、drawableTop 或 drawableBottom,您可以将图标放置在相对于文本的其他位置。

    四。转到您拥有 UI 的 XML 的 layout/ 文件夹,然后转到要应用样式的 Button 并使其看起来像这样:

    <Button android:id="@+id/buttonSubmit" 
    android:text="@string/button_submit" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    style="@style/ButtonNormalTextWithIcon" ></Button>
    

    还有……瞧!你的按钮在左侧有一张图片。

    对我来说,这是更好的方法!因为这样做,您可以将按钮的文本大小与您要显示的图标分开管理,并为具有不同图标的多个按钮使用相同的背景可绘制对象,遵守 Android UI 指南使用样式。

    您还可以为您的应用创建一个主题并为其添加“父样式”,以便所有按钮看起来都一样,并仅在您需要的地方应用带有图标的“子样式”。

    【讨论】:

    • 干得好。我使用的是 FrameLayout 视图方法,其中包含 ImageView 和 TextView,但这种方法更好。
    • 很棒的方法。 facebook SDK(版本 3)对登录按钮采用相同的方法
    【解决方案8】:

    重要更新

    不要将普通的android:drawableLeft 等...与矢量绘图一起使用,否则 在较低的 API 版本中会崩溃。 (我在现场应用中遇到过)

    用于矢量绘图

    如果您使用的是矢量绘图,那么您必须

    • 您是否已迁移到 AndroidX?如果不是,您必须先迁移到 AndroidX。很简单,见what is androidx, and how to migrate?
    • 它是在版本1.1.0-alpha01发布的,所以appcompat版本至少应该是1.1.0-alpha01。当前最新版本是1.1.0-alpha02,使用最新版本以获得更好的可靠性,请参阅发行说明 - link

      implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

    • 使用AppCompatTextView/AppCompatButton/AppCompatEditText

    • 使用app:drawableLeftCompatapp:drawableTopCompatapp:drawableRightCompatapp:drawableBottomCompatapp:drawableStartCompatapp:drawableEndCompat

    对于普通的drawable

    如果你不需要矢量drawable,那么你可以

    • 使用android:drawableLeftandroid:drawableRightandroid:drawableBottomandroid:drawableTop
    • 您可以使用常规的TextViewButtonEditTextAppCompat 类。

    您可以像下面这样实现输出 -

    【讨论】:

    • 我正在使用 xmlns:app="http://schemas.android.com/apk/res-auto" 命名空间并且看不到那些应用兼容的东西。
    • @Dale 你的命名空间是正确的,我已经更新了我的答案,再看For vector drawable点。
    • @Khemraj 您如何在您附加的图像中显示单个视图(TextView 或按钮或其他内容)中的可绘制对象和文本居中?
    【解决方案9】:
     <Button android:id="@+id/imeageTextBtn" 
            android:layout_width="240dip"
            android:layout_height="wrap_content"
            android:text="Side Icon With Text Button"
            android:textSize="20sp"
            android:drawableLeft="@drawable/left_side_icon"         
            />   
    

    【讨论】:

      【解决方案10】:

      您可以为图片使用drawableTop(也可以是drawableLeft等)并通过添加gravityleft|center_vertical在图片下方设置文字

      <Button
                  android:id="@+id/btn_video"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentRight="true"
                  android:layout_centerVertical="true"
                  android:background="@null"
                  android:drawableTop="@drawable/videos"
                  android:gravity="left|center_vertical"
                  android:onClick="onClickFragment"
                  android:text="Videos"
                  android:textColor="@color/white" />
      

      【讨论】:

        【解决方案11】:

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

        我的建议是用你的风格制作 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 按钮。

            <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" />
        

        这是一个结果。然后使用任何颜色或任何其他属性和边距设置自定义按钮的样式。祝你好运

        【讨论】:

        • 虽然我还没有测试你的代码,因为方法似乎是正确的,但我不明白移动应用程序中出现悬停效果的原因。
        • 我已经为我的应用创建了悬停效果,并且在该应用构建期间我需要悬停效果。但这取决于你:) 如果没有必要,你可以删除悬停效果。
        • 我对您的答案投了赞成票,因为这是一个非常好的方法。我唯一的一点是在移动界面上,你怎么能悬停?
        • 哦...我现在明白了.. :D 是的,你是对的。是不可能的。悬停效果主要用于按压效果。 xml 类的名称不正确
        【解决方案12】:
        <Button
             android:id="@+id/groups_button_bg"
             android:layout_height="wrap_content"
             android:layout_width="wrap_content"
             android:text="Groups"
             android:drawableTop="@drawable/[image]" />
        
        
        android:drawableLeft
        android:drawableRight
        android:drawableBottom
        android:drawableTop
        

        http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

        【讨论】:

          【解决方案13】:

          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 (commit)

          【讨论】:

            【解决方案14】:

            这段代码非常适合我

            <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>
            

            【讨论】:

            • 我已经尝试过你的代码。它可以工作,但如果你有一组按钮,每个按钮的文本大小不同,那么你的代码的主要问题是。您的布局将发生变化。所以按钮的每个图片位置都会在不同的位置。虽然它应该在中心笔直。这就是按钮发生的情况。
            【解决方案15】:
            <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
            

            【讨论】:

              【解决方案16】:

              你可以用这个:

                <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" />
              

              我已将图像设置为background 并添加了文字..!

              【讨论】:

                【解决方案17】:

                制作一个假按钮。

                这是唯一的方法

                  <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>
                

                【讨论】:

                  【解决方案18】:

                  若要结合ButtondrawableTop 并仍然获得点击响应,您可以使用按钮样式@style/Widget.AppCompat.Button.Borderless 使其透明。

                  <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" />
                  

                  【讨论】:

                    【解决方案19】:
                        <ImageView
                            android:id="@+id/iv"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:scaleType="centerCrop"
                            android:src="@drawable/temp"
                            />
                    

                    【讨论】:

                    • 这不是一个正确的答案,因为图像视图不支持文本
                    猜你喜欢
                    • 1970-01-01
                    • 2011-03-14
                    • 2021-11-28
                    • 2012-10-19
                    • 2013-02-13
                    • 2021-10-19
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-05-22
                    相关资源
                    最近更新 更多