Cách tạo chế độ xem dòng thời gian trên Android như lịch sử vị trí trên Google?

Question

Tôi muốn thiết kế giao diện người dùng như lịch sử vị trí của Google.

Answer 1

Tôi đã phải sao chép giao diện người dùng này cho một ứng dụng mà tôi đã sử dụng bằng cách sử dụng RecyclerView.
Mỗi hàng là một ngang LinearLayout lưu trữ biểu tượng, đường thẳng và chế độ xem ở bên phải. Dòng là FrameLayout với nền tròn và vòng tròn bán trong suốt là View s.
Vì không có khoảng cách giữa các hàng, các phần của dòng xuất hiện.
Cách bố trí mục trông như thế này:

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

Một cách thuận tiện để render khác nhau mũ của dòng cho một đầu, những người trung lưu và người cuối cùng là sử dụng itemViewTypes vị trí liên quan đến trong 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; 
} 

Các drawables nền có thể được định nghĩa như thế này:

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

Tất nhiên bạn cũng có thể sử dụng ListView hoặc nếu bạn biết rằng các bước sẽ luôn luôn chỉ là một vài, một đơn giản dọc LinearLayout sẽ là đủ.

Đáng buồn là ứng dụng Google Maps dành cho Android không phải là nguồn mở, không dễ để biết cách chính thức như vậy ... Giải thích về thiết kế Material Design!