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

Question

我想设计Google位置历史记录等用户界面.

Answer 1

我必须为我使用的应用程序复制此UI RecyclerView.
每行都是一个水平线LinearLayout,其中包含右侧的图标,线条和视图.该线是FrameLayout圆形背景,半透明圆是Views.
因为行之间没有空格,所以该行的单个部分显示为连接.
项目布局如下所示:

<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>

一种方便的方式来渲染顶部,中间和最后一行的线条的大写是在以下位置使用与位置相关的itemViewTypes Adapter:

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;
}

背景drawables可以像这样定义:

<!-- 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应用程序不是开源的,所以要知道官方方式并不容易......材料设计解释!