Question

我需要创建一个如下所示的组件：

enter image description here

我真的不知道如何处理这个问题。我正在考虑创建一个自定义TextView组件（扩展TextView的类），但我不知道该怎么做。

感谢您的回复，这是我的解决方案：

<LinearLayout
            android:layout_width="@dimen/size_profile_pic"
            android:layout_height="@dimen/size_profile_pic"
            android:id="@+id/playedCounter"
            android:orientation="vertical"
            android:background="@drawable/layout_border"
            android:layout_gravity="center_vertical"
            android:weightSum="4">

            <TextView
                android:id="@+id/times_played_txt"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2.5"
                android:text="18"
                android:textStyle="bold"
                android:gravity="center"
                android:textSize="30sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@android:color/black" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1.5"
                android:text="Played"
                android:gravity="center" />

        </LinearLayout>

Answer 1

试试这个

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/my_text_box"
    android:background="@drawable/border"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:layout_margin="10dp"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:text="Played"
        android:layout_margin="10dp"
        />

</LinearLayout>

在drawable create border.xml中

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="2dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
    android:bottom="1dp" />
</shape>

Answer 2

试试这段代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white">

    <RelativeLayout
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="162dp"
        android:background="@drawable/style"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="24dp"
            android:text="played"
            android:textColor="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView1"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="22dp"
            android:text="18"
            android:textColor="#000000"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>

</RelativeLayout>

为布局创建边框，从drawable创建style.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
 <stroke
      android:width="5dp"
      android:color="@android:color/black" />
</shape>

输出：

enter image description here

Answer 3

您需要一个垂直方向的LinearLayout，带有描边背景和上下TextView之间的分隔符。

RES /布局/ custom_view.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_bg"
    android:gravity="center">

    <TextView
        android:id="@+id/value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:textStyle="bold"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:text="18" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/black" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Played" />

</LinearLayout>

RES /抽拉/ custom_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="@android:color/black" />
</shape>

如果您想要进行OOP并将对象附加到要在GridView或ListView中使用的视图，则可以扩展LinerLayout类。

CustomView.java

public class CustomView extends LinearLayout {
    MyObject mObject;

    public CustomView(Context context, MyObject object) {
        super(context);
        LinearLayout.inflate(getContext(), R.layout.custom_view, this);
        initLayout();
    }

    private void initLayout() {
        ((TextView) findViewById(R.id.value)).setText(mObject.getValue().toString());
        ((TextView) findViewById(R.id.status)).setText(mObject.getStatus());
    }

    public void setmObject(MyObject mObject) {
        this.mObject = mObject;
        initLayout();
    }
}

MyObject.java

public class MyObject {
    Integer value;
    String status;

  /* constructors
     getters and setters
   */
}

Android自定义视图，里面有2个文本

3 个答案: