如何创建像谷歌位置历史这样的安卓时间线视图？

Question

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

Answer 1

我必须为我使用 RecyclerView 开发的应用程序复制此 UI。
每一行都是一个水平的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>

为顶部、中间和最后一个不同地渲染行的大写字母的一种便捷方法是在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 就足够了。

遗憾的是，谷歌地图安卓应用不是开源的，要知道官方的方式也不是那么容易，所以……Material Design 解读！