如何创建如图所示的布局？

Question

我要创建一个具有如上图所示设计的旅行应用程序。中心点表示2个位置之间的中间停靠点。第一个是源，第二个是目的地。

我想知道实现布局的最佳方法，如此图片中描述的旅行应用程序。

提前致谢。

我在下面尝试的代码在这里:(示例）

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="224dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="16dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="44dp"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/textView1"
        android:src="@drawable/abc_ic_go_search_api_holo_light" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/textView2"
        android:src="@drawable/abc_ic_go_search_api_holo_light" />

    <View
        android:id="@+id/line"
        android:layout_width="2dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView2"
        android:layout_alignLeft="@+id/imageView1"
        android:layout_below="@+id/imageView1"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="-10dp"
        android:background="#FF00FF00" />

</RelativeLayout>

我可以在布局中获得源，中间，时间，但不确定如何添加动态中间点＆＃39;在布局中。另请注意，可以有多个中间站点。

Answer 1

在LinearLayout内加orientation = horizontal一个ImagView然后TextView，然后另一个TextView

Answer 2

由于您说这些位置将动态填充并且计数可能很高，您可以尝试 ListView，分隔符高度为0 ，项目如下：

来源：第1项

其他中间位置

目的地：最后一项

ListView会有以下内容：

android:dividerHeight="0dp"
android:divider="@null"

Answer 3

另一种选择是

<LinearLayout
    android:orientation="horizontal">

    <ImageView ... />
    <TableLayout>

        <TableRow>
            <TextView ... /> <!-- Source -->
            <TextView ... /> <!-- 9:30 -->
        </TableRow>        

        <TableRow>
            <TextView ... /> <!-- Intermediate -->
            <TextView ... /> <!-- 9:30 -->
        </TableRow>

        <TableRow>
            <TextView ... /> <!-- Destination -->
            <TextView ... /> <!-- 9:30 -->
        </TableRow>        

    </TableLayout>    

</LinearLayout>