带有图像的多线和样式 Android 按钮答案

【问题标题】：Multi line and style Android button with image带有图像的多线和样式 Android 按钮
【发布时间】：2017-07-06 13:24:07
【问题描述】：

我的目标是在左侧制作一个没有填充的圆形图像按钮，在右侧制作一个多行文本，其中两行具有不同的样式（颜色/字体）。像这样：

我的问题是：

不知道如何实现多行按钮文字
图像边角在左侧没有圆角
图片比要求的大

查看我的结果：

我的代码如下：

buttonshape.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners android:radius="5dp" />
    <solid android:color="#F7F7F7" />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
    <size android:width="270dp"
          android:height="60dp" />
</shape>

myActivity.xml：

<Button
    android:id="@+id/parkingBtn"
    android:layout_width="0dp"
    android:layout_height="82dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/buttonshape"
    android:drawableStart="@drawable/parking"
    android:drawablePadding="20dp"
    android:text="Parking"
    android:textAlignment="viewStart"
    android:textAllCaps="false"
    android:textColor="@color/colorPrimary"
    android:textDirection="ltr"
    android:textSize="18sp"
    android:cropToPadding="true"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/otherBtn" />

更新： 我改成 CardView，结果几乎没问题。感谢@pouya 的提示。问题是图像上看不到圆角。

card_layout.xml：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    card_view:cardCornerRadius="15dp"
    card_view:cardElevation="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/buttonshape15"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:background="@drawable/parking" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:paddingStart="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:paddingTop="8dp"
                android:text="Parking"
                android:textColor="@color/colorPrimary"
                android:textSize="24sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="8dp"
                android:text="Pay without coins" />
        </LinearLayout>
    </LinearLayout>

</android.support.v7.widget.CardView>

结果是：

（我更改了边框颜色和半径以获得更好的可见性）

更新 2： 更接近最终的结果。现在边框出现了，只有阴影不见了：

layout.xml：

<LinearLayout xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/buttonshape15" >

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="15dp"
        card_view:cardElevation="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:scaleType="fitXY"
                android:background="@drawable/parking" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="6"
                android:orientation="vertical"
                android:paddingStart="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif"
                    android:paddingTop="6dp"
                    android:text="Parking"
                    android:textColor="@color/colorPrimary"
                    android:textSize="22sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="3dp"
                    android:text="Pay without coins"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

为了解决阴影问题，我尝试在 background.xml 中使用 layer-list，但它会产生难看的阴影。将所有内容再次包装在 CardView 中并设置高程可以得到更好的结果，但不如参考布局那么完美。

【问题讨论】：

你不能设计一个自定义布局并添加onClickListener
文本是一个完整的字符串吗？
使用自定义布局我能够解决多行问题，但图像角落仍然错误，并且我也丢失了按钮阴影。
文本是 2 个不同的字符串

标签： android android-layout button

【解决方案1】：

我会使用CardView 作为card_view:cornerRadius=5dp 的父视图，然后在其中使用LinearLayout，所以它看起来像这样。

<android.support.v7.widget.CardView 
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="@color/black"
android:id="@+id/root_layout"
android:theme="@style/light_list_item"
card_view:cornerRadius=5dp>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp" >
<ImageView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@mipmap/ic_launcher"/>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="name"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="cost"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="benefit"/>
</LinearLayout>
</android.support.v7.widget.CardView>

请注意，我认为您应该为 ImageView 使用背景。

edit 对于影子问题，请为 cardView 放置一个父级，该父级应该是 LinearLayout 或 RelativeLayout 。我自己没有测试过，但我很确定它会起作用。

希望对你有帮助，如有问题请发表评论。

【讨论】：

这个 CardView 想法不错，但还有一个小问题。请参阅我更新的帖子，其中包含代码和屏幕截图。
什么意思我看不到？阴影和角半径较低，我认为它们完全相同。如果不是，您可以在 image view 上使用 scaletype="fitXY" 。试试看，让我了解或解释更多。
深灰色边框来自背景形状，右侧角落可见，左侧不可见。
我找到了解决方案，请检查它是否有效。检查我的更新答案
是的，它很好地解决了边界问题。不幸的是，阴影效果丢失了。

【解决方案2】：

我会使用 LinearLayout，这样我就可以在圆形图像的右侧放置文本。文本实际上是两个不同的文本。所以使用权重，然后你可以把它们放在你想要的任何地方。

【讨论】：