Как реализовать регистрацию/зарегистрироваться в android?

Question

Я хочу настроить регистрацию пользователя, которая состоит из нескольких шагов. Каждый шаг будет выделен в виде баров. Темно-серый бар будет завершен, и светло-серый бар станет шагом, который необходимо выполнить. Кажется, Кэнт не думает о том, как это сделать. Пожалуйста, предложите.

Мы можем видеть это в подписке myfitnesspal. Я выделил это в красной рамке на рисунке ниже.

Answer 1

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

попробовать макет, как это и определить фрагменты, чтобы изменить содержимое динамически

Answer 2

Если вы нормально с немигающим баром вы можете использовать собственный прогресс, как объяснены в this answer.

Если вам действительно нужны отдельные сегменты, как на картинке, вам, вероятно, придется создать «светлый» и «темный» ресурс изображения и разместить кучу ImageViews в горизонтальном LinearLayout. Когда вы переходите к следующему шагу, вы просто измените образ этого ImageView на «темный» ресурс изображения.

Answer 3

Вы должны проверить эту библиотеку: https://github.com/TechFreak/WizardPager