Question

我的目标是制作左边没有填充的圆形图像按钮和右边的多行文字，其中2行有不同的样式（颜色/字体）。像这样：

我的问题是：

我不知道如何实现多行按钮文字
左边的图像边角不是圆角
图片大于请求

查看我的结果：

我的代码如下：

buttonshape.xml：

Traceback (most recent call last):
 File "<pyshell#102>", line 4, in <module>
   fwd_limit=10  # allow the user to see the 10 last messages
  File "C:\Python34\lib\site-packages\telethon\telegram_client.py", line 247, in invoke
   request, timeout=timeout, updates=updates)
   File "C:\Python34\lib\site-packages\telethon\telegram_bare_client.py",    line 188, in invoke
    self.sender.send(request)
  File "C:\Python34\lib\site-packages\telethon\network\mtproto_sender.py",    line 57, in send
   request.on_send(writer)
  File "C:\Python34\lib\site-packages\telethon\tl\functions\messages    \add_chat_user.py", line 39, in on_send
   self.user_id.on_send(writer)
    AttributeError: 'int' object has no attribute 'on_send'

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

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

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

结果是：

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

更新2： 更接近最终结果。现在边界存在，只有阴影丢失：

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>

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

Answer 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的背景。

对于影子问题，请

修改，请为cardView或LinearLayout设置RelativeLayout的父级。我没有对自己进行测试，但我确信它会起作用。

希望这有帮助请评论一下是否有问题。

Answer 2

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

多行和样式Android按钮与图像

2 个答案: