Android Imitation micro-letter group chat head _android

Work needs to achieve the image of the nail-nail group head of a function, is the personal head together to display, looked at the market on the app like micro-letter group chat Head is a combination of the head of QQ is not, others seem to have no.

To share with you how to achieve it. First, let's look at the effect chart:

Okay, here's how it's going to be done:

Realize the idea

• 1. Get bitmap Pictures First (local, network)
• 2. Create a thumbnail of the specified size
• 3. Combination bitmap picture

Very simple, local pictures need us to read from the local, if it is a network image we can also according to the URL to get bitmap to combine

Specific implementation process

1. layout file:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android: paddingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android :p addingtop= "@dimen/activity_vertical_margin" android:gravity= "center" android:orientation= "vertical" Android: Background= "#987" android:paddingbottom= "@dimen/activity_vertical_margin" tools:context= ". Mainactivity "> <textview android:background=" #fff "android:layout_width=" Match_parent "Android:layout_ height= "1DP"/> <imageview android:src= "@drawable/j" android:id= "@+id/iv1" android:layout_width= "Wrap_c Ontent "android:layout_height=" wrap_content "/> <textview android:background=" #fff "Android:layout_wid
Th= "Match_parent" android:layout_height= "1DP"/> <imageview android:src= "@drawable/j"    Android:id= "@+id/iv2" android:layout_width= "wrap_content" android:layout_height= "wrap_content"/> <Tex Tview android:background= "#fff" android:layout_width= "match_parent" android:layout_height= "1DP"/> <Ima Geview android:src= "@drawable/j" android:id= "@+id/iv3" android:layout_width= "Wrap_content" Android:layout_ height= "Wrap_content"/> <textview android:background= "#fff" android:layout_width= "Match_parent" Andro id:layout_height= "1DP"/> <imageview android:src= "@drawable/j" android:id= "@+id/iv4" Android:layout_wid Th= "Wrap_content" android:layout_height= "wrap_content"/> <textview "#fff" Android:

 Layout_width= "Match_parent" android:layout_height= "1DP"/> </LinearLayout>

Four ImageView controls, used to display pictures don't say it.

2. Get bitmap, set the properties of the picture

/**
   * Get picture array entity
   * @param count
   * @return
  /private list<bitmapbean> getbitmapentitys (int Count) {
    list<bitmapbean> mlist = new arraylist<> ();
    String value = Propertiesutil.readdata (this, string.valueof (count),
        r.raw.data);
    string[] arr1 = Value.split (";");
    int length = Arr1.length;
    for (int i = 0; i < length; i++) {
      String content = arr1[i];
      string[] arr2 = Content.split (",");
      Bitmapbean entity = null;
      for (int j = 0; J < Arr2.length J + +) {
        entity = new Bitmapbean ();
        Entity.setx (float.valueof (arr2[0));
        Entity.sety (float.valueof (arr2[1));
        Entity.setwidth (float.valueof (arr2[2));
        Entity.setheight (Float.valueof (arr2[3]));
      }
      Mlist.add (entity);
    }
    return mlist;
  }

3. Create a compressed picture where we use the Extractthumbnail () method in Thumbnailutils, with the parameter bitmap,width,height

/** * Initialization data/private void InitData () {/* get four images array/bitmapBeans1 = Getbitmapentitys (1);
    BitmapBeans2 = Getbitmapentitys (2);
    BITMAPBEANS3 = Getbitmapentitys (3);
    BITMAPBEANS4 = Getbitmapentitys (4); /*bitmap thumbnail */bitmap[] Bitmaps1 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getres
    Ources (), R.DRAWABLE.J), (int) bitmapBeans1. Get (0). GetWidth (), (int) bitmapbeans1.get (0). GetWidth ())}; Bitmap[] Bitmaps2 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.drawab LE.J), (int) bitmapBeans2. Get (0). GetWidth (), (int) bitmapbeans2.get (0). GetWidth ()), Thumbnailutils.extrac Tthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans2. Get (0). GetWidth (
    ), (int) bitmapbeans2.get (0). GetWidth ())}; Bitmap[] bitmaps3 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.draWABLE.J), (int) bitmapBeans3. Get (0). GetWidth (), (int) bitmapbeans3.get (0). GetWidth ()), Thumbnailutils.ext Ractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans3. Get (0). Getwid
            Th (), (int) bitmapbeans3.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (Bitmaputils.getscalebitmap ( Getresources (), R.DRAWABLE.J), (int) bitmapBeans3. Get (0). GetWidth (), (int) bitmapbeans3.get (0). GetWidth ())
    }; Bitmap[] Bitmaps4 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.dr AWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutil S.extractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (bitmaputils.getscalebit Map (gEtresources (), R.DRAWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) BitmapB
 Eans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ())};
 }

4. Combine bitmap pictures (which is to draw our pictures together with canvas)

/**
   * Get together Bitmap
   * @param mentitylist *
   @param bitmaps * @return *
   * public
  Static Bitmap Getcombinebitmaps (list<bitmapbean> mentitylist,
                      Bitmap ... bitmaps) {Bitmap Newbitmap
    = Bitmap.createbitmap (Bitmap.Config.ARGB_8888);
    for (int i = 0; i < mentitylist.size (); i++) {
      Bitmaps[i] = Getroundedcornerbitmap (bitmaps[i));
      Newbitmap = Mixturebitmap (Newbitmap, bitmaps[i), New PointF (
          mentitylist.get (i), GetX (), Mentitylist.get (i). GetY ()));
    }
    return newbitmap;
  }

Here, I set the picture to be rounded to look good.

/** * Get round bitmap * @param bitmap * * @return * * public static bitmap Getroundedcornerbitmap (bitmap bitmap) { try {Bitmap output = Bitmap.createbitmap (Bitmap.getwidth (), Bitmap.getheight (), Bitmap.Config.ARGB_8
      888);
      Canvas Canvas = new Canvas (output);
      Final Paint Paint = new Paint ();
      Final Rect Rect = new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ());
      Final RECTF RECTF = new RECTF (new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ()));
      Final float roundpx = 50;
      Paint.setantialias (TRUE);
      Canvas.drawargb (0, 0, 0, 0);
      Paint.setcolor (Color.Black);
      Canvas.drawroundrect (RECTF, ROUNDPX, ROUNDPX, paint);

      Paint.setxfermode (New Porterduffxfermode (PorterDuff.Mode.SRC_IN));

      Final Rect src = new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ());
      Canvas.drawbitmap (bitmap, SRC, rect, paint);
    return output;
catch (Exception e) {return bitmap;    }
  }

 

The last to open the painting

 /** *
   Bitmap
   * @param
   @param second
   * @param frompoint
   * @return
  /public static Bitmap Mixturebitmap (Bitmap, Bitmap Second,
                    PointF frompoint) {
    if (A-null | | second = NULL | | fromp Oint = = null) {return
      null;
    }
    Bitmap Newbitmap = Bitmap.createbitmap (First.getwidth (),
        first.getheight (), Bitmap.Config.ARGB_8888);
    Canvas CV = new Canvas (newbitmap);
    Cv.drawbitmap (0, 0, null);
    Cv.drawbitmap (second, frompoint.x, frompoint.y, null);
    Cv.save (Canvas.all_save_flag); Save All Layers
    cv.restore ();
    return newbitmap;
  }

This is simple to achieve the micro-letter group chat avatar effect, of course, need to do some processing of pictures, has prevented Oom, you can also customize it as a view component, small set of time will achieve this.
Finally, let us look at the implementation of small items on the effect bar, no difference, only a few data sources are not the same, is obtained from the network.

Here to write a picture description:

The above is the entire content of this article, I hope to help you learn.