2017-01-03 13 views
3

私は、左に起こった時刻、右に起こった時刻、その間の行、各イベントの行にバブルがある、垂直の動的タイムラインを作成したいと思います。時間、イベント、イベントの数は動的になります。垂直RecyclerViewタイムラインにアプローチする方法は?

ここで私が考えていたのは、おそらくRecyclerViewだったのです。リストアイテムには、時間、バブル画像、イベントビューが含まれます。これを書き出す前に、縦線でバブルを並べることに問題があると思っています。これにアプローチするより良い方法があるのでしょうか、あるいは、誰かが気泡が別の画面密度とサイズで私のラインの中心にくることを保証する方法を指摘できますか?

enter image description here

答えて

1

私は私のアプリで同様のビューを実装するために探しています。

個人的には、私は静的な行のファンではありません。私の考えは、3列のレイアウトを持つラインに沿ったものでした。 1つは時間とともに、1つはドットと垂直線のイメージ(または最後の項目の上の行だけ)とcardviewの3番目の列です。

私が投稿したレイアウトはかなりラフですが、私はちょうど数分でそれを一緒にノックしたので、あなたはそのアイデアを得るべきです。これは、結果はそうのように見えるで

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:weightSum="1"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:padding="10dp" 
     android:layout_weight="0.06"> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="10dp" 
      android:layout_gravity="center"> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="1:45 PM" /> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:padding="10dp" 
      android:layout_gravity="center"> 

      <ImageView 
       android:layout_width="30dp" 
       android:layout_height="30dp" 
       android:src="@drawable/ic_test" /> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:padding="10dp"> 

      <android.support.v7.widget.CardView 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 

       <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Hello there" 
        android:padding="10dp"/> 
      </android.support.v7.widget.CardView> 

     </LinearLayout> 

    </LinearLayout> 

</LinearLayout> 

(私の例では、それらの間にギャップが存在することになる)アイコンの縦線は、レイアウトの端に行くことを確認するために微調整する必要があります。

Rough Example

また、私は大丈夫に見えたlibraryを見つけた - アイコンは、いくつかの作業を行うことができますが、私は取材の多くは既に行われていると思います。

このレイアウトタイプは正式に(Matrial Design Guidelinesに従って)stepperです。私は実際にそれらを参照することはできませんが、 'Develop'ドキュメントでは、適切なライブラリを検索する際に役立つかもしれません。

+0

これは受け入れられるべきです。 –

関連する問題