android - 下方带有中心图像和文本的大按钮

Question

我想绘制与父级匹配的按钮，并在中心和上方有图像，毕竟我得到了

<Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:center="center_vertical|center_horizontal"
        android:drawableTop="@drawable/ic_launcher"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/button1" />

这让我可以将文本居中并将图像放在按钮顶部，如何根据需要进行设置。？我不想制作自定义按钮，如果可能的话以 xml 方式

Answer 1

您是否尝试过图像按钮而不是按钮，然后在下面添加一个文本视图。

<RelativeLayout
    android:id="@+id/relId"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageButton"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="@string/text" />
</RelativeLayout>

根据需要调整 textview 的下边距。

Answer 2

您也可以通过相对布局来做同样的事情。有一个相对布局，里面有你的带有drawable的imageview作为图标启动器，将该imageview的布局重力设置为centerhorizo​​ntal|centerVertical，并在relativeLayout中有一个文本视图并将其对齐到按钮的顶部。您可以将 relativelayout 的可点击设置为 true，以便它可以像按钮一样工作。你的 xml 可能看起来有点像

<RelativeLayout
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    style="@android:style/Widget.Button"
>

<TextView android:id="@+id/top_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alignParentTop=”true”
    android:text="@string/text"/>

<ImageView android:id="@+id/center_image"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/image"
    android:layout_below=" @+id/top_text "
    android:layout_gravity="center_vertical|center_horizontal"/>

</RelativeLayout>

此外，如果您想在单个按钮中执行此操作，请使用以下

 <Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button1"
    android:visibility="visible"
    android:text="@String/text"
    android:drawableBottom="@drawable/ic_launcher"
    android:gravity="top"
    android:layout_gravity="center_vertical|center_horizontal"/>

希望这会有所帮助。

Answer 3

尝试这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    style="@android:style/Widget.Button"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="true"/>


    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text"
        android:layout_marginTop="5dp"
        android:textColor="@android:color/black" />

</LinearLayout>

Answer 4

我也面临同样的问题，但我不想单独使用 Button 和 TextView 。所以我找到了这个。我知道我迟到了。但它可以帮助你

<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_margin="20dp"
            android:background="@drawable/next_btn_bg_rounded_corners">


            <Button
                android:id="@+id/btn_restore_purchases"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@null"
                android:drawableLeft="@mipmap/restore"
                android:drawablePadding="10dp"
                android:drawableStart="@mipmap/restore"
                android:text="@string/restore_purchases"
                android:textAllCaps="false"
                android:textColor="@color/white" />
        </FrameLayout>