Android — горизонтальный индикатор выполнения с точками

У меня есть проект, в котором пользователь отвечает на вопросы в форме. Мне нужно реализовать горизонтальную полосу выполнения (не диалоговое окно) с точками вместо обычной полосы.

Когда пользователь отвечает на вопрос, точка этого конкретного вопроса меняет цвет. Это возможно? Я использую API 16 (цель) и API 7 (минимум) с Sherlock ActionBar.


android android-progressbar progress-bar
person Zephyros    schedule 08.11.2012    source источник
comment
попробуйте это stackoverflow.com/a/37741873/7104450   -  person Shashank Verma    schedule 10.10.2017

Ответы (3)


arrow_upward
1
arrow_downward

Если у вас не так много вопросов, может быть достаточно, если вы просто используете несколько ImageView для представления точек. Пример XML:

 <RelativeLayout
        android:id="@+id/dotsL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/dot1"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/circle_white" >
        </ImageView>

        <ImageView
            android:id="@+id/dot2"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/dot1"
            android:background="@drawable/circle_white" >
        </ImageView>

        <ImageView
            android:id="@+id/dot3"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/dot2"
            android:background="@drawable/circle_white" >
        </ImageView>

        <ImageView
            android:id="@+id/dot4"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/dot3"
            android:background="@drawable/circle_white" >
        </ImageView>

        <ImageView
            android:id="@+id/dot5"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/dot4"
            android:background="@drawable/circle_white" >
        </ImageView>
    </RelativeLayout>

В Java:

    mDots = new ImageView[5];
    mDots[0] = (ImageView) rootView.findViewById(R.id.dot1);
    mDots[1] = (ImageView) rootView.findViewById(R.id.dot2);
    mDots[2] = (ImageView) rootView.findViewById(R.id.dot3);
    mDots[3] = (ImageView) rootView.findViewById(R.id.dot4);
    mDots[4] = (ImageView) rootView.findViewById(R.id.dot5);

И когда пользователь отвечает на вопрос, просто:

mDots[questionNumber].setBackgroundDrawable(getResources().getDrawable(R.drawable.circle_green));

Примечание. Этот подход требует наличия соответствующих рисунков.

person slezadav    schedule 08.11.2012
comment
Я думаю, это сработает, если я уже знаю количество вопросов, на которые ответит пользователь, но количество вопросов не зависит от меня, пользователь создает форму на веб-сайте, и он может создать форму с 10 вопросами или 100. , Я не могу сделать статическое количество точек в xml, я должен программно указать их с коэффициентом N. - person Zephyros; 08.11.2012
comment
В этом случае вы правы, вам нужно создавать экземпляры ImageView программно, что, безусловно, возможно. Возможно, это не самый чистый способ решения этой проблемы, но он должен работать. - person slezadav; 08.11.2012

arrow_upward
1
arrow_downward

XML:

<LinearLayout
    android:id="@+id/image_layout"
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical">

Динамически добавляя изображения и скрывая их (в зависимости от общего количества вопросов), я также установил layout_weight равным 1, как вы можете видеть, поэтому каждая «точка» имеет одинаковый размер:

ImageView[] images = new ImageView[totQuestions];
LinearLayout imageLayout = (LinearLayout) findViewById(R.id.image_layout);  
ImageView image;
LinearLayout.LayoutParams layoutParams;
for(int i = 0; i < totQuestions; i++){
    image = new ImageView(this);
    layoutParams = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, 1.0f);
    image.setLayoutParams(layoutParams);
    image.setBackgroundDrawable(getResources().getDrawable(R.drawable.circle_green));
    image.setVisibility(View.INVISIBLE);
    images[i] = image;
    imageLayout.addView(image);
}

Показ картинок после каждого ответа:

imageLayout.getChildAt(questionNr).setVisibility(View.VISIBLE); //starting at 0

Я только что улучшил то, что предложил slezadav.

person Carnal    schedule 08.11.2012
comment
Я протестирую это и завтра выложу отзыв, ткз! - person Zephyros; 08.11.2012
comment
Я не проверял это, но я уверен, что это работает. Может быть небольшая проблема с этим. - person Carnal; 08.11.2012

arrow_upward
0
arrow_downward

В инфраструктуру Android уже включен виджет ProgressBar. Это работает во всех типах макетов и не ограничивается диалогами. Использование этого и указание свойства android:progressDrawable или android:indeterminateDrawable с вашими собственными точками, которые можно рисовать, было бы самым простым решением. Подробнее см. в документации.

person al.    schedule 08.11.2012