電子商取引アプリケーションの動的ビューとドロウアブルを使用してレイアウトを作成する際の問題

Question

私は電子商取引アプリケーションを作成しており、図に添付されているようにレイアウトを作成する必要があります。私は動的なビューとdrawableで試してみましたが、私は成功を収めることができません。

Answer 1

あなたはほんの少し違ったグラフィック画像を見てする必要があります。

トップの水平表示（Place/Shipped/Delivered）を考えてみましょう。あなたは、このような画像を作成した場合：

画像1：

画像2

画像3：

次に、表示を3つの列に分けることができます.1つは、[配置済み]、[出荷済み]、[配送済み]の各列です。

3つの列が隣り合わせになると、線はディスプレイのように1つの連続した線につながります。

あなたの列には、この（擬似XML）のようになります。

<LinearLayout 
     android:orientation="vertical"> 

     <TextView 
      android:text="Placed"/> 

     <TextView 
      android:text="20th Jan"/> 

     <ImageView 
      android:src="@drawable/start_with_check"/> 

    </LinearLayout> 

あなたは水平LinearLayoutにまとめたものを入れて、あるいは横RecyclerViewことができます。

下部の垂直タイムラインの場合、同じ戦略を使用して、任意の数のイベントを表示する垂直のRecyclerViewを使用できます。 イメージが重ね合わされると、連続した縦線が表示されます。

---

編集

それでは、それがさらに容易円からラインを分離することによって、あなたのグラフィックスを一緒に入れて作りましょう。

line_start.png：

line_continue.png：

line_end.png：

white_check .PNG：

blue_check。PNG：

dot.png：。。

は（はい、私は証明するために、この間に合わせあなたはグラフィックデザイナーが持っている理由ですやっ界で不具合があり、

これらの例で行ったように、透過性を持つPNG画像を使用すると、画像をオーバーレイすることができます。

ここで、最初のアイテムが常にline_startを持ち、最後のアイテムが常にline_endを持ち、その間にあるすべてのアイテムがline_continueを持つ様子を確認できます。

これを取得したら、FrameLayoutを使用して、サークルグラフィックスをライングラフィックスの上に重ねることができます。例えば、ここでは最初の3つの項目は以下のとおりです。

<LinearLayout 
     android:orientation="vertical"> 

     <TextView 
      android:text="Placed"/> 

     <TextView 
      android:text="20th Jan"/> 

     <FrameLayout 
      android:width="wrap_content" 
      android:height="wrap_content"> 
      <ImageView 
       android:src="@drawable/line_start"/> 
      <ImageView 
       android:src="@drawable/white_check"/> 
     </FrameLayout> 

    </LinearLayout> 

    <LinearLayout 
     android:orientation="vertical"> 

     <TextView 
      android:text="Shipped"/> 

     <TextView 
      android:text="21st Jan"/> 

     <FrameLayout 
      android:width="wrap_content" 
      android:height="wrap_content"> 
      <ImageView 
       android:src="@drawable/line_continue"/> 
      <ImageView 
       android:src="@drawable/dot"/> 
     </FrameLayout> 

    </LinearLayout> 

    <LinearLayout 
     android:orientation="vertical"> 

     <TextView 
      android:text="Delivered"/> 

     <TextView 
      android:text="25th Jan"/> 

     <FrameLayout 
      android:width="wrap_content" 
      android:height="wrap_content"> 
      <ImageView 
       android:src="@drawable/line_end"/> 
      <ImageView 
       android:src="@drawable/blue_check"/> 
     </FrameLayout> 

    </LinearLayout> 

は私がプリセットXMLとしてこれらを示したが、すべての項目は、同じ基本的なレイアウトを持っているので、私はあなたがそれを動的にこれらを生成することがいかに簡単かを見ることができると思います。