具有两个TextView的自定义视图

时间:2016-10-10 14:50:41

标签: android custom-view viewgroup android-viewgroup

我想用2个TextView创建一个自定义视图,可能会从xml更改文本和文本外观。这个视图应该有两个状态 - normal和selected(TextViews样式应该对每个状态都不同)。

我需要一些例子。

1 个答案:

答案 0 :(得分:11)

自定义视图非常基本,互联网上有各种示例。对于像两个文本视图这样简单的东西,通常最容易扩展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 /值/ 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自定义视图的类文件。在这里,我们提取自定义属性并设置每个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();
   }

}

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

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

轻松自负。