带有两个 TextView 的自定义视图

Question

我想创建一个带有 2 个 TextView 的自定义视图，可能会更改 xml 中的文本和文本外观。此视图应具有两种状态 - 正常和已选中（每种状态的 TextViews 样式应不同）。

我需要一些例子。

Answer 1

自定义视图非常基础，Internet 上到处都有示例。对于像两个文本视图这样简单的东西，通常最容易扩展 LinearLayout。

这是带有两个并排排列的文本视图的 LinearLayout。

res/double_text.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"/>
    <TextView
        android:id="@+id/right_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"/>
</LinearLayout>

接下来我们定义一个样式化的资源块，这样我们就可以将自定义属性添加到我们的自定义布局中。

res/values/attrs.xml

<resources>
    <declare-styleable name="DoubleText">
        <attr name="leftText" format="string" />
        <attr name="rightText" format="string" />
        <attr name="android:ems" />

    </declare-styleable>
</resources>

接下来是 DoubleText 自定义视图的 class 文件。在这里，我们提取自定义属性并设置每个 TextView。

DoubleTextView.java

public class DoubleTextView extends LinearLayout {
   LinearLayout layout = null;
   TextView leftTextView = null;
   TextView rightTextView = null;
   Context mContext = null;

   public DoubleTextView(Context context) {

      super(context);
      mContext = context;
   }

   public DoubleTextView(Context context, AttributeSet attrs) {
      super(context, attrs);

      mContext = context;

      TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DoubleText);

      String leftText = a.getString(R.styleable.DoubleText_leftText);
      String rightText = a.getString(R.styleable.DoubleText_rightText);

      leftText = leftText == null ? "" : leftText;
      rightText = rightText == null ? "" : rightText;

      String service = Context.LAYOUT_INFLATER_SERVICE;
      LayoutInflater li = (LayoutInflater) getContext().getSystemService(service);

      layout = (LinearLayout) li.inflate(R.layout.double_text, this, true);

      leftTextView = (TextView) layout.findViewById(R.id.left_text);
      rightTextView = (TextView) layout.findViewById(R.id.right_text);

      leftTextView.setText(leftText);
      rightTextView.setText(rightText);

      a.recycle();
   }

   public DoubleTextView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      mContext = context;
   }

   @SuppressWarnings("unused")
   public void setLeftText(String text) {
      leftTextView.setText(text);
   }

   @SuppressWarnings("unused")
   public void setRightText(String text) {
      rightTextView.setText(text);
   }

   @SuppressWarnings("unused")
   public String getLeftText() {
      return leftTextView.getText().toString();
   }

   @SuppressWarnings("unused")
   public String getRightText() {
      return rightTextView.getText().toString();
   }

}

最后，使用自定义 class 就像在布局文件中声明一样简单。

<RelativeLayout
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/main_text"
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/custom"/>

    <example.com.test.DoubleTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:leftText="Text Left"
        app:rightText="Text Right"
        android:layout_below="@+id/main_text"/>
</RelativeLayout>

简单易行。

带有两个 TextView 的自定义视图

Custom View with two TextViews

android

custom-view

viewgroup

android-viewgroup