如何创建像谷歌位置历史的Android时间轴视图？

Question

我想设计像谷歌位置历史的用户界面。

Answer 1

我不得不重复这个UI，因为我使用RecyclerView工作的应用程序。 每一行是一个水平LinearLayout其中包含图标，线，并在合适的意见。该生产线是具有圆形背景和半透明圆圈是FrameLayouts一个View。 因为行之间没有空格的单件的行出现接合。 该项目的布局是这样的：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- the circular icon on the left -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_place"
        android:tint="@android:color/white"
        android:layout_marginRight="24dp"
        android:padding="4dp"
        android:background="@drawable/circle_bg"/>

    <!-- the blue line -->
    <FrameLayout
        android:layout_width="15dp"
        android:layout_height="match_parent"
        android:padding="2dp"
        android:id="@+id/item_line">

        <!-- the semi transparent circle on the line -->
        <View
            android:layout_width="11dp"
            android:layout_height="11dp"
            android:background="@drawable/circle"/>

    </FrameLayout>

    <!-- views at the right of the blue line -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="24dp"
        android:paddingBottom="32dp"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackground">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:ellipsize="end"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"
            android:id="@+id/item_title"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/item_subtitle"/>

        <!-- other views -->

    </LinearLayout>
</LinearLayout>

呈现不同线路的上限顶一个，中间的人，最后的简便方法是在Adapter使用位置相关itemViewTypes：

private static final int VIEW_TYPE_TOP = 0;
private static final int VIEW_TYPE_MIDDLE = 1;
private static final int VIEW_TYPE_BOTTOM = 2;
private List<Item> mItems;

// ...

class ViewHolder extends RecyclerView.ViewHolder {

    TextView mItemTitle;
    TextView mItemSubtitle;
    FrameLayout mItemLine;

    public ViewHolder(View itemView) {
        super(itemView);
        mItemTitle = (TextView) itemView.findViewById(R.id.item_title);
        mItemSubtitle = (TextView) itemView.findViewById(R.id.item_subtitle);
        mItemLine = (FrameLayout) itemView.findViewById(R.id.item_line);
    }
}

@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
    Item item = mItems.get(position);
    // Populate views...
    switch(holder.getItemViewType()) {
        case VIEW_TYPE_TOP:
            // The top of the line has to be rounded
            holder.mItemLine.setBackground(R.drawable.line_bg_top);
            break;
        case VIEW_TYPE_MIDDLE:
            // Only the color could be enough
            // but a drawable can be used to make the cap rounded also here
            holder.mItemLine.setBackground(R.drawable.line_bg_middle);
            break;
        case VIEW_TYPE_BOTTOM:
            holder.mItemLine.setBackground(R.drawable.line_bg_bottom);
            break;
    }
}

@Override
public int getItemViewType(int position) {
    if(position == 0) {
        return VIEW_TYPE_TOP;
    else if(position == mItems.size() - 1) {
        return VIEW_TYPE_BOTTOM;
    }
    return VIEW_TYPE_MIDDLE;
}

背景绘项目可以定义是这样的：

<!-- line_bg_top.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
    <corners
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
    <!-- this has to be at least half of line FrameLayout's
         width to appear completely rounded -->
</shape>

<!-- line_bg_middle.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
</shape>

<!-- line_bg_bottom.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary"/>
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"/>
</shape>

当然，你也可以使用ListView或者，如果你知道的步骤将始终只是几个，一个简单的垂直LinearLayout就足够了。

可悲的是谷歌地图Android应用程序是不开源的，它不是那么容易知道官方式，使...材料设计的诠释！