2013-12-24 60 views
4

我想設置一個由多個步驟組成的用戶註冊。每一步都會以條形的形式突出顯示。深灰色條將成爲完成的步驟,淺灰色條將成爲需要完成的步驟。不能想到一個辦法做到這一點。請建議。如何在android中實現註冊/註冊?

我們可以在myfitnesspal註冊中看到這個。我在下面的圖片中用紅色框突出顯示了這一點。

enter image description here

回答

0
<RelativeLayout 
     android:id="@+id/layout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"> 

     <LinearLayout 
      android:id="@+id/tab_layout" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentTop="true" 
      android:orientation="horizontal" > 

      <Button 
       android:id="@+id/step1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="-5dp" 
       android:background="@drawable/tab_active" /> 

      <Button 
       android:id="@+id/step2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="-5dp" 
       android:background="@drawable/tab_active" /> 

      <Button 
       android:id="@+id/step3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="-5dp" 
       android:background="@drawable/tab_active" /> 

      <Button 
       android:id="@+id/step4" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:layout_marginTop="-5dp" 
       android:background="@drawable/tab_active" /> 
     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/steptitle" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/tab_layout" > 

      <TextView 
       android:id="@+id/eventItemTitle" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical" 
       android:ellipsize="end" 
       android:paddingLeft="15dp" 
       android:singleLine="true" 
       android:text="@string/symptomstitlebar" 
       android:textColor="@color/white_color" 
       android:textSize="14sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/content" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/event_title_layout" 
      android:orientation="horizontal" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" > 

      <include 
       android:id="@+id/stepContent" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       layout="@layout/event_tab_layout" /> 
     </LinearLayout> 
    </RelativeLayout> 

嘗試這樣的佈局,並定義片段來改變內容動態

0

如果你都OK了連續酒吧,您可以在this answer解釋使用自定義的進度條。

如果您確實需要圖片中的單獨片段,您可能需要創建「淺色」和「深色」圖像資源,並將一堆ImageView放置在水平LinearLayout中。隨着下一步的進行,您只需將該ImageView的drawable更改爲「黑暗」圖像資源。