2016-07-13 19 views
2

Wie kann ich ein lineares Layout in Android transparenten Hintergrund mit Farbverlauf geben, hat das Layout derzeit ein unscharfes Bild als Hintergrund, aber ich brauche das unscharfe Bild an der Spitze des Layouts leicht transparent und dann gehe zu undurchsichtig an der Unterseite davon.Android lineares Layout mit Farbverlauf Transparenz Hintergrund

Das Layout ist in einem Parallaxen-Scrollview verschachtelt, sodass das Layout über das Kopfzeilenbild gleiten kann.

ich erzeugen die unscharfe ziehbar wie so:

final View content = img_header; 
    if (content.getWidth() > 0) { 
     Bitmap image = BlurBuilder.blur(content); 
     BitmapDrawable background = new BitmapDrawable(image); 

     ll_parent_layout.setBackground(background); 
    } else { 
     content.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
      @Override 
      public void onGlobalLayout() { 
       Bitmap image = BlurBuilder.blur(content); 
       BitmapDrawable background = new BitmapDrawable(image); 
       ll_parent_layout.setBackground(background); 
      } 
     }); 
    } 

Die Unschärfe Bauer sieht wie folgt aus:

public class BlurBuilder { 
private static final float BITMAP_SCALE = 1f; 
private static final float BLUR_RADIUS = 25f; 

public static Bitmap blur(View v) { 
    return blur(v.getContext(), getScreenshot(v)); 
} 

public static Bitmap blur(Context ctx, Bitmap image) { 
    int width = Math.round(image.getWidth() * BITMAP_SCALE); 
    int height = Math.round(image.getHeight() * BITMAP_SCALE); 

    Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false); 
    Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap); 
    /// compress bitmap here 

    RenderScript rs = RenderScript.create(ctx); 
    ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); 
    Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap); 
    Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap); 
    theIntrinsic.setRadius(BLUR_RADIUS); 
    theIntrinsic.setInput(tmpIn); 
    theIntrinsic.forEach(tmpOut); 
    tmpOut.copyTo(outputBitmap); 

    return outputBitmap; 
} 

public static Bitmap blur(Context ctx, Bitmap image, float scale, float radius) { 
    int width = Math.round(image.getWidth() * scale); 
    int height = Math.round(image.getHeight() * scale); 

    Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false); 
    Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap); 

    RenderScript rs = RenderScript.create(ctx); 
    ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); 
    Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap); 
    Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap); 
    theIntrinsic.setRadius(radius); 
    theIntrinsic.setInput(tmpIn); 
    theIntrinsic.forEach(tmpOut); 
    tmpOut.copyTo(outputBitmap); 

    return outputBitmap; 
} 


private static Bitmap getScreenshot(View v) { 
    Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.ARGB_8888); 
    Canvas c = new Canvas(b); 
    v.draw(c); 
    return b; 
} 
} 
+0

können Sie Code für Zeichen eingeben? –

+0

@KaranMer Beitrag bearbeitet wie angefordert – MichaelStoddart

+0

Sie verwenden keine zeichnende Ressource dafür? –

Antwort

1

Da Sie Bitmap manipulieren, um das unscharfe Bild zu erzeugen, können Sie einen LinearGradient Shader verwenden, um Transparenz wie in this answer hinzuzufügen.

public Bitmap addGradient(Bitmap src) { 
    int w = src.getWidth(); 
    int h = src.getHeight(); 
    Bitmap overlay = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); 
    Canvas canvas = new Canvas(overlay); 

    canvas.drawBitmap(src, 0, 0, null); 

    Paint paint = new Paint(); 
    LinearGradient shader = new LinearGradient(0, 0, 0, h, 0xFFFFFFFF, 0x00FFFFFF, Shader.TileMode.REPEAT); 
    paint.setShader(shader); 
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
    canvas.drawRect(0, h - h, w, h, paint); 

    return overlay; 
} 
+0

Arbeitete wie ein Charme, ich suchte nach einer Lösung für mindestens eine Woche! – MichaelStoddart

+0

Ich habe jetzt ein Problem mit dieser Lösung, es scheint, dass auf Hintergründen, bei denen das unscharfe Bild schwarz ist, eine Linie zu sehen ist, wo der Farbverlauf beginnt. Hattest du dieses Problem schon einmal? – MichaelStoddart

0

Sie ziehbar xml verwenden können, wie unten die Steigung zum Layout gesetzt.

Platzieren Sie den Code in der Datei unter mybg.xml und legen Sie ihn in den ziehbaren Ordner.

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" 
> 
    <gradient 
     android:startColor="@color/mycolor1" 
     android:endColor="@color/mycolor2" 
     android:angle="270" /> 
</shape> 

Verwendung 8 char hashcode für Farben, so können Sie Ihre Farben wie dieses

mycolor1 -> #000000aa //this will give you transparent colored background 
mycolor2 -> #ff00aa00 //this will be opaque like background 

ersten beiden Zeichen sein hier die Alpha-Ebene für Farbe eingestellt.

0

kann es auf diese Weise tun:

nur sicherstellen, dass Bitmap ist wandelbar, auch mit fadingPortion Wert (> = 0 und < = 1) Sie nur einen Teil Hintergrundgradienten machen können transparent

public static Bitmap makeBitmapTransparent(Bitmap mutableBitmap, float fadingPortion) { 
    final Shader gradientShader = new LinearGradient(
      mutableBitmap.getWidth()/2, 0, 
      mutableBitmap.getWidth()/2, mutableBitmap.getHeight() * fadingPortion, 
      0x00000000, 0xFF000000, 
      Shader.TileMode.CLAMP); 

    Paint paint = new Paint(); 
    paint.setShader(gradientShader); 
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 

    Canvas canvas = new Canvas(mutableBitmap); 
    canvas.drawRect(new Rect(0, 0, mutableBitmap.getWidth(), (int) (mutableBitmap.getHeight() * FADING_PORTION)), paint); 
    canvas.drawBitmap(mutableBitmap, 0, 0, null); 

    return mutableBitmap; 
} 
+0

Was verbinde ich als verblassender Teil? – MichaelStoddart

+0

Float im Bereich zwischen 0 und 1. 0,25 (zum Beispiel) bedeutet, dass nur das obere Viertel gradient transparent ist – Sharpe