2011-10-12 21 views
8

He personalizado mi SeekBar - Utilizo una imagen personalizada como fondo, y una imagen personalizada como el pulgar (How to create custom layout for seekbar in android? & How to customize the look of a SeekBar in Android?).Personalización de SeekBar: ¿cómo posicionar correctamente la imagen "pulgar" personalizada?

La idea es hacer una SeekBar que se parece a los de esta imagen:

enter image description here

Deseo tener el pulgar para encajar perfectamente en la barra redondeada cuando el valor progress se establece en 0 o 100 (de 100).

el fin de posicionar el dedo pulgar correctamente (es decir, no se superponen los extremos de la barra) que se han fijado los paddingLeft & paddingRight valores a exactamente la mitad de la anchura de la anchura del pulgar (Android: Seekbar doesn't scroll all the way to end).

.../res/layout/main.xml:

<SeekBar android:id="@+id/frequency_slider" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:max="100" android:progress="0" 
    android:progressDrawable="@drawable/seekbar_no_visible_progress" 
    android:thumb="@drawable/seekbar_thumb" <!-- this is an image --> 
    android:background="@drawable/hos_bar" <!-- this is an image --> 
    android:paddingLeft="24dp" 
    android:paddingRight="24dp"> 
</SeekBar> 

esto funciona en Android 2.1.


En Android 2.2 esto produce un efecto diferente:

enter image description here


Después de investigaciones adicionales (y tratando esto con un total predeterminado SeekBar he encontrado que la posición del pulgar ha cambiado de 2.1 a 2.2. Mi truco de cambiar el paddingLeft & paddingRight no es el problema.

  • En 2.1, el pulgar se centra alrededor del extremo de la barra, con la mitad del pulgar en la barra y la mitad fuera de la barra.
  • En 2.2, el pulgar se coloca dentro de la barra, sin ninguna superposición. De ahí la extraña forma en que los valores de relleno afectan el resultado. Esto es lo que estaba tratando de lograr, pero cuando uso un pulgar personalizado, este efecto ya no funciona de la misma manera.

Creo que necesito para hacer una clase Java personalizada para manejar este tipo de cosas. En esta pregunta (Possible to do rounded corners in custom Progressbar progressDrawable?), el desarrollador usa un ClipDrawable para hacer una barra de progreso normal.

¿Qué tipo de objeto dibujable usaría, y cómo, para posicionar correctamente mi pulgar?

Respuesta

5

El comportamiento de parámetro thumbOffset ha cambiado entre estas 2 versiones. ThumbOffset determina el desplazamiento real de la imagen del pulgar, en comparación con el parámetro de posición proporcionado.

1

Pruebe con esto:

<SeekBar android:id="@+id/seek" 
     android:layout_width="fill_parent" 
     android:layout_height="73dip" 
     android:max="80" 
     android:progress="12" 
     android:maxWidth="273dip" 
     android:maxHeight="73dip" 
     android:secondaryProgress="255" 
     android:background="@drawable/image2"  <!-- this is an image --> 
     android:progressDrawable="@drawable/image1" <!-- this is an image --> 
     android:thumb="@drawable/lock_thumb"        
     /> 

he intentado esto y que estaba trabajando perfectamente con 2.1 y 2.2.

En su caso, intente ajustar maxWidth, max y progress como lo hice e intente eliminar paddings. Puede ayudarte a resolver el problema.

enter image description here

+0

gracias. He actualizado mi pregunta. El efecto que no quiero todavía permanece (también en el SeekBar estándar). Me gustaría que la imagen del pulgar se ajuste bien en cada extremo redondeado de la barra, cuando el valor de progreso se establece en 0 o en máx. –

10
seekbar.setThumbOffset(0); 

En tiempo de ejecución. ¡No es de XML!

Problema resuelto para mí.

1

finalmente encontró la respuesta, en este caso es que se debe utilizar android:thumbOffset, pero android:thumbOffset es NO un regulador para el lugar pulgar a lo largo de la barra de progreso, pero, es la longitud del pulgar de está empezando a es el punto central para que el seekbar pueda ajustar el punto central del pulgar en su punto de inicio. Por lo tanto, si tenemos una imagen del dedo pulgar con una anchura de 50 , la thumbOffset tiene que ser (50/2), de modo que el seekbar ajustará el valor cero en el píxeles 25 del pulgar que hará que el pulgar aparezca exactamente en el medio.

Cuestiones relacionadas