Android : 在 TextView 旁边可绘制，对 LinearLayout 中的每个 TextView 具有权重

Question

我正在尝试实现如图1所示的结果。尝试设置重力、paddingleft 等，但可绘制图像出现在右端而不是文本旁边（图 2 中的 SHown）。谁能建议如何对齐 TextView 旁边的图像？还有怎么设置drawable的大小？

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" 
android:background="@drawable/separator"
    android:padding="10dp">

<TextView
    android:id="@+id/sms"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_weight="1"
    android:drawableEnd="@drawable/message"
    android:drawableRight="@drawable/message"
    android:gravity="center"
    android:paddingLeft="3dp"
    android:paddingRight="3dp"
    android:text="SMS" />

<TextView
    android:id="@+id/call"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:drawableEnd="@drawable/call"
    android:drawableRight="@drawable/call"
    android:gravity="center"
    android:text="CALL" />

<TextView
    android:id="@+id/email"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center"
    android:drawableEnd="@drawable/mail"
    android:drawablePadding="3dp"
    android:drawableRight="@drawable/mail"
    android:text="MAIL" />

Answer 1

尝试围绕此构建。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:orientation="horizontal"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1">

        <TextView
            android:id="@+id/sms"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:gravity="center"
            android:drawableRight="@drawable/message"
            android:text="SMS" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1">

        <TextView
            android:id="@+id/call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/call"

            android:gravity="center"
            android:text="CALL" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1">

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/mail"
            android:gravity="center"
            android:text="MAIL" />
    </LinearLayout>
</LinearLayout>

Answer 2

主要问题是，您设置了 layoutWidth=0dp 和权重 1。这使得每个 TextView 根据权重获得最大宽度。 drawableRight/drawableEnd 将可绘制资源设置为在视图的最右边缘绘制。如果您想保留此布局，只需将其包装在另一个 viewGroup 中，如@Dhinakaran 所示。更好的方法是使用 选项卡布局 .

Answer 3

您可以使用相对布局，而不是使用多个线性布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:layout_weight=".33"
        android:gravity="center_horizontal|center_vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall"/>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/textView"
            android:layout_toRightOf="@+id/textView"
            android:src="@android:drawable/btn_star"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:layout_weight=".33"
        android:gravity="center_horizontal|center_vertical">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/textView2"
            android:layout_toRightOf="@+id/textView2"
            android:src="@android:drawable/btn_star"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:layout_weight=".33"
        android:gravity="center_horizontal|center_vertical">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall"/>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/textView3"
            android:layout_toRightOf="@+id/textView3"
            android:src="@android:drawable/btn_star"/>
    </RelativeLayout>
</LinearLayout>

结果

Answer 4

创建了一个不需要布局嵌套并且可以根据需要对齐可绘制图像的自定义按钮。

布局文件button.xml:

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_button"
    style="@style/custom_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:drawablePadding="5dp"
    android:gravity="center" />

自定义按钮Class:

public class DrawableAlignedButton extends RelativeLayout {

  private View view;
  private Button button;

  /**
   * @param context
   *          used to inflate the View.
   * @param attrs
   *          XML defined attributes.
   */
  public DrawableAlignedButton(final Context context, final AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs);
  }

  /**
   * @param context
   *          used to inflate the View.
   */
  public DrawableAlignedButton(final Context context) {
    super(context);
    init(context, null);
  }

  /**
   * @param context
   *          used to inflate the View.
   * @param attrs
   *          XML defined attributes.
   * @param style
   *          the style for the View.
   */
  public DrawableAlignedButton(final Context context, final AttributeSet attrs, final int style) {
    super(context, attrs, style);
    init(context, attrs);
  }

  private void init(final Context context, final AttributeSet attributeSet) {
    view = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.button, this, true);
    button = (Button) view.findViewById(R.id.custom_button);

    String buttonText = null;
    int drawableStart = 0;
    int drawableEnd = 0;

    if (attributeSet != null) {
      final TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomButtonStyle, 0, 0);
      buttonText = a.getString(R.styleable.CustomButtonStyle_buttonText);
      drawableStart = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableStart, 0);
      drawableEnd = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableEnd, 0);
      a.recycle();
    }

    FontUtil.getInstance(context).useNormalRegularFont(button);

    if (buttonText != null) {
      button.setText(buttonText);
    }

    button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
  }

  /**
   * Sets the button text.
   * 
   * @param text
   *          the text to be set.
   */
  public void setButtonText(final String text) {
    if (button != null) {
      button.setText(text);
    }
  }

  /**
   * Sets the drawable to the button.
   * 
   * @param drawableStart
   *          the drawable to set at the beginning of the text.
   * @param drawableEnd
   *          the drawable to set at the end of the text.
   */
  public void setDrawableStart(final int drawableStart, final int drawableEnd) {
    if (button != null) {
      button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
    }
  }

}

如何在XML中使用：

<com.package.view.DrawableAlignedButton
        xmlns:drawableAlignedButton="http://schemas.android.com/apk/res-auto"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/transparent_button_selector"
        drawableAlignedButton:buttonDrawableStart="@drawable/small_active"
        drawableAlignedButton:buttonText="Button Text" />

Android : 在 TextView 旁边可绘制，对 LinearLayout 中的每个 TextView 具有权重

Android : Drawable next to TextView with weight to each TextView in LinearLayout

android

android-layout

android-linearlayout