barra di SeekBar o il progresso con i colori multipli

Question

Voglio creare un bar come questo inizialmente quando il progresso è pari a zero sarà una dissolvenza di colore, ma e come progresso va avanti Diventerà luminosa su quella parte (questa è meglio che posso spiegare) La cosa principale è che voglio che la barra mostri tutti i colori allo stesso tempo.

Answer 1

clip tua "on" drawable:
sopra la vostra "off" drawable:

utilizzando res/drawable/custom_progress_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

    <!-- Background --> 
    <item 
     android:id="@android:id/background" 
     android:drawable="@drawable/custom_progress_bar_off"/> 

    <!-- Secondary progress - this is optional --> 
    <item android:id="@android:id/secondaryProgress"> 
     <clip android:drawable="@drawable/custom_progress_bar_secondary" /> 
    </item> 

    <!-- Progress --> 
    <item android:id="@android:id/progress"> 
     <clip android:drawable="@drawable/custom_progress_bar_on" /> 
    </item> 

</layer-list> 

Dal Activity, utilizzare

Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme()); 
myProgressBar.setProgressDrawable(progressDrawable); 

o in xml, utilizzare

android:progressDrawable="@drawable/custom_progress_drawable" 

Ed ecco il risultato quando si utilizza android:max="10" in xml:

E 'un po' fuori, ma si potrebbe usare setMax() con qualcosa di più simile a 10000 e fare alcuni calcoli di compensazione quando si chiama setProgress() fare è più pulito.

Answer 2

Come già suggerito, penso che dovresti andare per un elenco di livelli e quindi impostare più drawable. Il problema principale su questo è che ho bisogno di essere ridimensionabile. Una soluzione di dimensioni fisse sarebbe abbastanza facile da implementare.

Answer 3

Finalmente! Sono andato in missione per capirlo, quindi se questo è sufficiente, sentiti libero di darmi quella taglia, haha.

---

Provare a utilizzare questo nel layout:

<View android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".20"/> 

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="0dip" 
       android:orientation="horizontal" 
       android:gravity="center" 
       android:layout_weight="0.62"> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
       <ProgressBar style="?android:attr/progressBarStyleHorizontal" 
        android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight="0.94" 
        android:progressDrawable="@drawable/progressmask" 
        android:progress="0" 
        android:max="10" 
        android:rotation="180"/> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
      </LinearLayout> 
    <View 
     android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".18"/> 
</LinearLayout> 

che fa riferimento a questa disegnabile (progressmask.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="50dip" /> 
     <gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" /> 
     <stroke android:width="1dp" android:color="#00000000" /> 
    </shape> 
</item> 
<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <corners android:radius="50dip" /> 
      <gradient android:startColor="#aa000000" android:endColor="#aa000000" 
       android:angle="270" /> 
      <stroke android:width="1dp" android:color="#00000000" /> 
     </shape> 
    </clip> 
</item> 
</layer-list> 

e questa immagine (colorprogress.png)

Quello che fa è impostare l'immagine come sfondo di una visualizzazione lineare, che contiene una barra di avanzamento. La barra di avanzamento aggiunge una maschera nera semitrasparente all'immagine per far sembrare che le luci siano spente.

NOTA: per ottenere questo effetto, ho dovuto eseguire lo scuotimento con la barra di avanzamento (ad es. Capovolgerlo e impostarlo su solo 10 intervalli. Dovrai fare un po 'di matematica per ottenere il progresso per allinearlo con il immagine setprogress ((100-trueprogress)/10) Spiacente non ho fatto questa parte per voi

Questo è come sarà al progresso del 50% (le piccole xe i triangoli scompariranno sul dispositivo)

Spero che questo risponde alla tua domanda!

Answer 4

In realtà non è possibile impostare le barre di avanzamento su colori diversi. Puoi comunque utilizzare solo il drawable on e ottenere l'effetto desiderato. Potresti semplicemente applicare una maschera di livello. Quello che intendo è aggiungere un layout relativo che inizialmente è dark grey in tutto il tempo in cui il gradiente ha solo UN colore che è grigio scuro. Ora, utilizzare code per impostare il colore del gradiente a sinistra a livello di programmazione. Ovviamente il colore a sinistra sarà trasparente. Ulteriori informazioni su Linear Gradients. Questo è tutto. Hai solo bisogno di calcolare la posizione da cui inizia il gradiente giusto, piuttosto dove finisce il gradiente a sinistra (transparent).

Questo metodo è leggermente imperfetto e potrebbe non funzionare su TUTTI i dispositivi.

Il metodo perfetto sarebbe creare più immagini .9png e impostare il drawable della finestra di dialogo di avanzamento ogni volta.