Placer le texte dans une ligne temporelle horizontale

Question

J'essaie de mettre en place une ligne de temps horizontale. J'ai donc écrit le code pour concevoir la ligne horizontale mais je n'arrive pas à comprendre comment je vais écrire le texte au-dessus et au-dessous de la ligne.

Une dernière chose, je ne veux pas utiliser d'autres bibliothèques.

J'ai essayé de résoudre le problème en utilisant l'option Custom view, comme l'ont suggéré les personnes ici présentes, mais je n'ai pas réussi.

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

J'ai décidé de répondre parce que la boîte de commentaires est un peu limitée. Voici mon commentaire :

Vous aurez besoin d'une vue personnalisée pour y parvenir. Vous pouvez soit composer des vues prêtes à l'emploi, soit les personnaliser entièrement

Si vous optez pour des vues composites, commencez par décomposer l'image niveau par niveau. Au niveau le plus élevé, il s'agit d'une mise en page horizontale avec ' TimelineCell (ou quel que soit le nom que vous lui donnez).

A TimelineCell sera essentiellement verticale LinearLayout avec un TextView , a View qui trace la ligne et un autre aligné au centre TextView .

Vous pouvez ensuite les créer par programme et les ajouter à un parent horizontal LinearLayout .

Si vous optez pour une personnalisation complète, vous devrez prendre en charge les mesures, la mise en page et le dessin de tous les composants, y compris le texte au-dessus et au-dessous de la ligne.

Jetez un coup d'œil à ce lien pour une bonne introduction aux vues personnalisées sur Android