如何创建类似于Google位置记录的Android时间线视图? [英] How to create android timeline view like google location history?

问题描述

我想设计Google位置记录之类的用户界面.

I want to design user interface like Google location history.

推荐答案

我必须为使用 RecyclerView 开发的应用程序复制此UI.
每行是一个水平的 LinearLayout ，其中包含图标，线条和右侧的视图.该行是带有圆形背景的 FrameLayout ，半透明的圆圈是 View s.
由于行之间没有空格，因此该行的各个部分似乎已连接在一起.
项目布局如下:

I had to replicate this UI for an application I worked on using RecyclerView.
Every row is a horizontal LinearLayout which contains the icon, the line and the views at the right. The line is a FrameLayout with a rounded background and the semi transparent circles are Views.
Because there is no space between rows the single pieces of the line appear joined.
The item layout looks like this:

<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 中使用与位置相关的itemViewType:

A convenient way to render differently the line's caps for the top one, the middle ones and the last is to use position-related itemViewTypes in the 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;
}

背景可绘制对象可以这样定义:

The background drawables can be defined like this:

<!-- 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 就足够了.

Of course you can also use ListView or if you know that the steps will always be just a few, a simple vertical LinearLayout will be enough.

可悲的是，Google Maps Android应用程序不是开源的，要知道正式的方法并不是那么容易，所以... Material Design的解释！

Sadly the Google Maps Android app is not open source, it's not that easy to know the official way so... Material Design interpretations!

这篇关于如何创建类似于Google位置记录的Android时间线视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！