Personalizzazione SeekBar - come posizionare correttamente l'immagine "thumb" personalizzata?

Question

Ho personalizzato il mio SeekBar: utilizzo un'immagine personalizzata come sfondo e un'immagine personalizzata come il pollice (How to create custom layout for seekbar in android? & How to customize the look of a SeekBar in Android?).

L'idea è di fare un SeekBar che assomiglia a quelli di questa immagine:

vorrei avere l'immagine del pollice si inseriscono perfettamente nella barra arrotondata quando il valore progress è impostato su 0 o 100 (su 100).

Per posizionare correttamente il pollice (cioè non si sovrappongono alle estremità della barra) Ho impostato il paddingLeft & paddingRight valori esattamente la metà della larghezza della larghezza pollice (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> 

Questo funziona in Android 2.1.

---

In Android 2.2 questo produce un effetto diverso:

---

Dopo ulteriori indagini (e provare questo con un totale di default SeekBar ho trovato che la posizione dell'immagine pollice è cambiato da 2.1 a 2.2 La mia modifica al paddingLeft & paddingRight non è il problema

• In 2.1, il pollice è centrato attorno all'estremità della barra, con metà del pollice sulla barra e metà della barra.
• In 2.2, il pollice è posizionato all'interno della barra, senza alcuna sovrapposizione. Da qui lo strano modo in cui i valori del padding influenzano il risultato. Questo è quello che stavo cercando di ottenere, ma quando si utilizza un pollice personalizzato, questo effetto non funziona più allo stesso modo.

---

Penso che ho bisogno di fare una classe Java personalizzato per gestire questo tipo di cose. In questa domanda (Possible to do rounded corners in custom Progressbar progressDrawable?), lo sviluppatore utilizza uno ClipDrawable per fare una normale barra di avanzamento.

Quale tipo di oggetto estraibile utilizzerei e in che modo, per posizionare correttamente il pollice?

Answer 1

Il comportamento del parametro thumbOffset è cambiato tra queste 2 versioni. ThumbOffset determina l'offset effettivo dell'immagine del pollice, rispetto al parametro di posizione fornito.

Answer 2

Provare a utilizzare questo:

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

Ho provato questo ed era perfettamente funzionante con 2.1 e 2.2.

Nel tuo caso, prova a regolare maxWidth, max e progredire come ho fatto e prova a rimuovere i paddings. Potrebbe aiutarti a risolvere il problema.

Answer 3

seekbar.setThumbOffset(0); 

In fase di esecuzione. Non da XML!

Risolto problema per me.

Answer 4

finalmente trovato la risposta, il caso qui è che si deve utilizzare android:thumbOffset, ma android:thumbOffset è NON un setter per il luogo pollice lungo con la barra di avanzamento, ma, è la lunghezza del pollice da sta cominciando a è il punto centrale in modo che lo seekbar possa regolare il punto centrale del pollice al suo punto di inizio. Quindi, se abbiamo un'immagine di pollice di larghezza , il thumbOffset deve essere (50/2), in modo che il seekbar registrerà il valorezero al pixel 25 del pollice che farà apparire il pollice esattamente al centro.