Come creare a livello di programmazione o la modifica di una immagine fatta di linee di colori diversi

Devo disegnare un 3dp linea per rappresentare un livello di completamento in un quiz di gioco.

Questa linea deve essere di 2 colori. Per esempio, se l’utente ha completato 40% del livello, la linea rossa per i primi 40% della linea, l’altro 60% è grigio.

Sono riuscito a farlo con un drawable :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="line" >
            <size android:height="3dp" android:width="40dp"/>
            <stroke
                android:width="1dp"
                android:color="#FFFC10" />
        </shape>
    </item>
    <item android:left="40dp">
        <shape android:shape="line" >
            <size android:height="3dp" android:width="60dp" />
            <stroke
                android:width="1dp"
                android:color="#DDDDDD" />
        </shape>
    </item>
</layer-list>

E poi ho il display con una ImageView :

<ImageView
                android:id="@+id/row_completion_bar"
                android:src="@drawable/completion_bar"
                android:layout_width="100dp"
                android:layout_height="3dp" />

… ma ora, mi deve, naturalmente, essere in grado di cambiare questo 40%/60% della razione in funzione delle actuel utente di completamento.

Prima domanda: qual è il miglior modo più efficace per farlo ? Modificare l’immagine in fase di esecuzione ? o creare una nuova immagine in fase di esecuzione in Java ?

Seconda domanda: come fare ? Ho provato in entrambi i modi (ricreare questa immagine nel codice java /modificare l’xml drawable in fase di esecuzione) e non era riuscito 🙁

Qualsiasi aiuto sarà molto apprezzato.

vorrei creare un custom Drawable come questa classe LineDrawable si estende Drawable { ….
Grazie per la tua risposta. Come si potrebbe fare esattamente?
basta ignorare tutti Drawable abstract ” metodi di estrazione(Tela), in particolare
Finalmente ho trovato un modo più semplice per farlo utilizzando ImageViews colori di sfondo e un relativo layout. Io non riesco a postare la soluzione ora, perché non ho abbastanza reputazione per rispondere alla mia domanda prima di 8 ore. Faremo il più presto possibile.

OriginaleL’autore Stéphane | 2013-07-30

4 Replies
  1. 14

    così questo è un costume Drawable è possibile utilizzare:

    class LineDrawable extends Drawable {
        private Paint mPaint;
    
        public LineDrawable() {
            mPaint = new Paint();
            mPaint.setStrokeWidth(3);
        }
    
        @Override
        public void draw(Canvas canvas) {
            int lvl = getLevel();
            Rect b = getBounds();
            float x = b.width() * lvl / 10000.0f;
            float y = (b.height() - mPaint.getStrokeWidth()) / 2;
            mPaint.setColor(0xffff0000);
            canvas.drawLine(0, y, x, y, mPaint);
            mPaint.setColor(0xff00ff00);
            canvas.drawLine(x, y, b.width(), y, mPaint);
        }
    
        @Override
        protected boolean onLevelChange(int level) {
            invalidateSelf();
            return true;
        }
    
        @Override
        public void setAlpha(int alpha) {
        }
    
        @Override
        public void setColorFilter(ColorFilter cf) {
        }
    
        @Override
        public int getOpacity() {
            return PixelFormat.TRANSLUCENT;
        }
    }

    e il codice di prova:

    View v = new View(this);
    final LineDrawable d = new LineDrawable();
    d.setLevel(4000);
    v.setBackgroundDrawable(d);
    setContentView(v);
    OnTouchListener l = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            int lvl = (int) (10000 * event.getX() / v.getWidth());
            d.setLevel(lvl);
            return true;
        }
    };
    v.setOnTouchListener(l);
    La ringrazio molto! Avete qualche idea su che cosa è il modo più efficace: questo, o la mia soluzione con ImageViews?

    OriginaleL’autore pskink

  2. 2

    Come sull’utilizzo di una barra di avanzamento? Lo stile del fare e a fare i marcatori possono essere impostate a livello di programmazione o tramite file xml.
    Il codice più leggibile e mantenibile, perché potrai utilizzare il widget a destra per il lavoro. Il layout contiene:

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_height="3dip"
        android:layout_width="match_parent"
        android:progressDrawable="@drawable/progress_bar" />

    È possibile aggiornare il bar dal codice utilizzando, ad esempio:

    ProgressBar bar = (ProgressBar)findViewById(R.id.progressBar);
    bar.setProgress(40);

    Questo esempio sostituisce lo stile del bar (come indicato dal progressDrawable attributo), utilizzando un res/drawable/progress_bar.xml file contenuti al di sotto. Questa camera dispone di letti di simpatia, come la sfumatura di ombreggiatura e angoli arrotondati, regolare come si vede in forma:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <item android:id="@android:id/background">
        <shape>
          <corners android:radius="5dip" />
          <gradient
            android:angle="270"
            android:centerColor="#ff5a5d5a"
            android:centerY="0.5"
            android:endColor="#ff747674"
            android:startColor="#ff9d9e9d" />
        </shape>
      </item>
      <item android:id="@android:id/progress">
        <clip>
          <shape>
            <corners android:radius="5dip" />
              <gradient
                android:angle="0"
                android:endColor="#ff009900"
                android:startColor="#ff000099" />
          </shape>
        </clip>
      </item>
    </layer-list>

    Di credito per http://www.tiemenschut.com/how-to-customize-android-progress-bars/, che dà molto di più dettagli su come personalizzare le barre di progresso.

    OriginaleL’autore Geoff

  3. 0

    Ho trovato un modo per fare questo. Non so se è il modo più efficiente, ma qui è:

    Ho usato un RelativeLayout di poter sovrapporre ImageViews con il colore di sfondo.

    in layout.xml:

    <RelativeLayout style="@style/CompletionBar">
    
    <ImageView
        android:id="@+id/row_completion_bar_0"
        style="@style/CompletionBar0" />
    
    <ImageView
        android:id="@+id/row_completion_bar_1"
        style="@style/CompletionBar1" />       
    
    </RelativeLayout>

    in styles.xml:

    <!-- Completion Bar (Relative Layout) -->
    <style name="CompletionBar">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
    
    <!-- Completion Bar 0 (ImageView) -->
    <style name="CompletionBar0">
        <item name="android:layout_width">100dp</item>
        <item name="android:layout_height">2dp</item>
        <item name="android:background">#CCCCCC</item>
    </style>
    
    <!-- Completion Bar 1 (ImageView) -->
    <style name="CompletionBar1">
        <item name="android:layout_width">40dp</item>
        <item name="android:layout_height">2dp</item>
        <item name="android:background">#555555</item>
    </style>

    in un file java:

    ImageView cb1 = (ImageView)row.findViewById(R.id.row_completion_bar_1);
    cb1.getLayoutParams().width = 40; /* Value in pixels, must convert to dp */

    OriginaleL’autore Stéphane

  4. 0

    Questo frammento di codice funziona per tutte le api

    Uso questo:

    Drawable drawable = editText.getBackground();
    drawable.setColorFilter(editTextColor, PorterDuff.Mode.SRC_ATOP);
    if(Build.VERSION.SDK_INT > 16) {
        editText.setBackground(drawable);
    }else{
        editText.setBackgroundDrawable(drawable);
    }

    OriginaleL’autore Ronit kadwane

Lascia un commento