android - 在水平时间轴中设置文本

Question

我正在尝试实现水平时间轴。所以我已经编写了设计水平线的代码，但我能够弄清楚如何在该线的上方和下方编写文本。

还有一件事我不想使用任何其他库。

我已经尝试通过自定义 View 来解决它，因为这里的人已经被建议但被击中了。

timeline_segment.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
    android:weightSum="1"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
       android:padding="3dp"
        android:textAlignment="textEnd"
        android:text="Top"
        android:id="@+id/top_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <TextView
            android:layout_gravity="center"
            android:layout_weight="0.5"
            android:background="@color/alphabet_a"
            android:layout_width="wrap_content"
            android:layout_height="2dp" />

        <ImageView
            android:background="@drawable/circle1"
            android:layout_width="15dp"
            android:layout_height="15dp" />

        <TextView
            android:layout_weight="0.5"
            android:layout_gravity="center"
            android:background="@color/alphabet_a"
            android:layout_width="wrap_content"
            android:layout_height="2dp" />

    </LinearLayout>


    <TextView
        android:padding="3dp"
        android:gravity="center"
        android:text="bottom"
        android:id="@+id/bottom_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
</merge>

timeline_segment.java

public class timeline_segement extends LinearLayout {

    View rootView;
    TextView upperText;
    TextView startLine;
    TextView endLine;
    ImageView circleView;
    TextView bottomText;

    public timeline_segement(Context context) {
        super(context);
        init(context);
    }

    public timeline_segement(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public timeline_segement(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }


    private void init(Context context) {

      rootView=inflate(context, R.layout.timeline_segment, this );

      upperText=(TextView) rootView.findViewById(R.id.top_data);
      bottomText=(TextView) rootView.findViewById(R.id.bottom_data);

      upperText.setText("Top");
      bottomText.setText("Bottom");

    }

    public  void setUpperText(String string)
    {
        upperText.setText(string);
    }

    public void setBottomText(String string)
    {
        bottomText.setText(string);
    }

}

Answer 1

决定回答，因为评论框有点限制。这是我的评论:

You'll need a custom view to achieve this. You can either composite ready-made views or go full custom

如果您选择合成 View ，那么您首先要逐层分解该图像。在最高级别，它是带有“TimelineCell”(或您选择的任何名称)的水平布局。

TimelineCell 基本上是一个垂直的 LinearLayout，带有右对齐的 TextView，一个绘制行和另一个中心对齐 TextView。

然后您可以以编程方式创建这些并将它们添加到父水平 LinearLayout。

但是，如果您选择完全自定义，则必须处理所有组件的测量、布局和绘图，包括线上和线下的文本。

看看this link很好地介绍了 android 上的自定义 View