【问题标题】:I want to add image and text in center like in button我想像在按钮中一样在中心添加图像和文本
【发布时间】:2018-09-06 12:42:09
【问题描述】:

以下是我尝试在按钮中心同时执行图标和文本的操作,但图标位于图像顶部。我希望他们处于中心位置。

 <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#fff"
                    android:layout_weight="1"
                    android:gravity="center"
                   >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/baseline_home_24"
                    />
                    <TextView
                        android:id="@+id/btnCleaner"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Cleaner"/>
                </RelativeLayout>

【问题讨论】:

标签: android android-button material-components-android


【解决方案1】:

试试这个:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:layout_weight="1"
    android:gravity="center"
    >
    <ImageView
        android:id="@+id/image" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/baseline_home_24"
        />
    <TextView
        android:id="@+id/btnCleaner"
        android:layout_toRightOf="@id/image"
        android:layout_marginLeft="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cleaner"/>
</RelativeLayout>

【讨论】:

  • 我只是把textView对齐在imageView的右边。就是这样。
【解决方案2】:

简单地这样做:-

 <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#fff">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/baseline_home_24"
                        android:layout_centerInParent="true"  />
                    <TextView
                        android:id="@+id/btnCleaner"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"/>
/>

希望这会有所帮助。

【讨论】:

  • 这给出了与我之前相同的结果
  • 请在我忘记添加的TextView中添加这些属性。 "android:marginLeft="10dp"
【解决方案3】:

这个呢?

<FrameLayout style="?android:attr/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        style="?android:attr/buttonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@null"
        android:clickable="false"
        android:drawableLeft="@android:drawable/ic_delete"
        android:focusable="false"
        android:gravity="center"
        android:minHeight="0dp"
        android:minWidth="0dp"
        android:text="Button Challenge" />
</FrameLayout>

输出:

【讨论】:

    【解决方案4】:

    试试这个与您的要求相关的:

    <?xml version="1.0" encoding="utf-8"?>
       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/grey_back"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp">
    
        <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="@mipmap/ic_launcher" />
    
        <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>
    

    【讨论】:

    • 如果我的回答对你有帮助,那么请把我的回答标记为正确,否则我会删除这个答案兄弟:google.com/…:
    【解决方案5】:

    您可以只使用 Textview 来做到这一点,如下所示:

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:gravity="center">
               <TextView
                android:id="@+id/btnCleaner"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cleaner"
                android:layout_centerInParent="true"
                android:drawableLeft="@drawable/yourDrawable" // your image 
                android:drawablePadding="3dp"/>
    </RelativeLayout>
    

    如果您希望图像位于文本左侧,则使用 drawableLeft;如果您希望图像位于文本右侧,则使用 drawableRight。您还可以通过 drawablePadding 为文本中的图像添加填充。

    【讨论】:

    • drawableleft 将把图标定位在左边而不是中心
    【解决方案6】:

    这可以通过在 Google 的 Material Components 中找到的新 MaterialButton 类来实现

    例如:

    <com.google.android.material.button.MaterialButton
        android:id="@+id/material_icon_button"
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/icon_button_label_enabled"
        app:icon="@drawable/icon_24px"
        app:iconPadding="8dp"/>
    

    会显示一个带有内边距图标的按钮

    这个按钮的源代码和这些组件的其余部分可以在项目的Github上找到here

    【讨论】:

      【解决方案7】:

      您可以使用官方Material Components Library提供的MaterialButton

      您必须应用 app:iconGravity="textStart" 属性。
      比如:

          <com.google.android.material.button.MaterialButton
              style="@style/Widget.MaterialComponents.Button.Icon"
              app:icon="@drawable/..."
              app:iconGravity="textStart"
              android:text="@string/..."/>
      

      您还可以使用属性app:iconPadding="xxdp" 更改图标和文本之间的填充。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-16
        • 1970-01-01
        • 2023-04-04
        • 1970-01-01
        相关资源
        最近更新 更多