Android - Horizontal progress bar with dots

问题

I have a project that the user answers questions in a form. I need to implement a horizontal progress bar (not a dialog), with dots instead the normal bar.

When the user answers a question, the dot of that specific question changes the color. This is possible? I'm using API 16 (target) and API 7 (minimum) with Sherlock ActionBar

回答1:

If you don't have a large number of questions, it might be sufficient if you just use multiple ImageViews to represent the dots. Example of 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>

In 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);

And when user answers a question, just :

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

Note: This approach requires that you have according drawables.

回答2:

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

Adding pictures dynamically and hiding them (based on total number of questions), I also put the layout_weight equal to 1 as you can see, so each "dot" has the same size:

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);
}

Showing pictures after each answer:

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

I just improved what slezadav suggested.

回答3:

There is already a ProgressBar widget included with the Android framework. This works in all types of layouts and is not restricted to dialogs. Using that and specifying the android:progressDrawable or android:indeterminateDrawable property with your own dots drawable would be the easiest solution. See the documentation for details.

来源：https://stackoverflow.com/questions/13288754/android-horizontal-progress-bar-with-dots