Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to realize the song list interface recommended by Android". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to realize the song list interface for NetEase Cloud recommendation by Android" can help you solve the problem.

First, to achieve 1. Customize a fillet picture control (you can also use a third-party frame directly)

Because it is some simple drawing, it will not be introduced one by one, just go to the code.

Public class MellowImageView extends ImageView {private Paint paint; public MellowImageView (Context context) {super (context);} public MellowImageView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs);} public MellowImageView (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); paint=new Paint () } / * draw rounded rectangles * @ author jimeng * / @ Override protected void onDraw (Canvas canvas) {Drawable drawable = getDrawable (); if (null! = drawable) {Bitmap bitmap = getBitmapFromDrawable (drawable); Bitmap b = getRoundBitmapByShader (bitmap,getWidth (), getHeight (), 20L0) Final Rect rectSrc = new Rect (0super.onDraw (), b.getWidth (), b.getHeight ()); final Rect rectDest = new Rect (0super.onDraw (), getHeight ()); canvas.drawBitmap (b, rectSrc, rectDest, paint);} else {super.onDraw (canvas) }} / * convert the picture into Bitmap * @ param drawable * resource picture * @ return bitmap * / public static Bitmap getBitmapFromDrawable (Drawable drawable) {int width = drawable.getIntrinsicWidth (); int height = drawable.getIntrinsicHeight (); Bitmap bitmap = Bitmap.createBitmap (width, height, drawable .getOpacity ()! = PixelFormat.OPAQUE? Bitmap.Config.ARGB_8888: Bitmap.Config.RGB_565); Canvas canvas = new Canvas (bitmap); drawable.draw (canvas); return bitmap;} public static Bitmap getRoundBitmapByShader (Bitmap bitmap, int outWidth, int outHeight, int radius, int boarder) {if (bitmap = = null) {return null;} int width = bitmap.getWidth () Int height = bitmap.getHeight (); float widthScale = outWidth * 1f / width; float heightScale = outHeight * 1f / height; Matrix matrix = new Matrix (); matrix.setScale (widthScale, heightScale); / / create bitmap Bitmap desBitmap = Bitmap.createBitmap (outWidth, outHeight, Bitmap.Config.ARGB_8888) that needs output; Canvas canvas = new Canvas (desBitmap) Paint paint = new Paint (Paint.ANTI_ALIAS_FLAG); / / Shader BitmapShader bitmapShader = new BitmapShader (bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); / / configure the shader matrix bitmapShader.setLocalMatrix (matrix); paint.setShader (bitmapShader); / / create a rectangular region and reserve border RectF rect = new RectF (boarder, boarder, outWidth-boarder, outHeight-boarder) / / draw the incoming bitmap into the rounded rectangle canvas.drawRoundRect (rect, radius, radius, paint); return desBitmap;}}

The effect picture is as follows:

Because of the time, some simple details were not painted.

two。 Carry out layout and decoration

Place the entire layout in HorizontalScrollView so that it can slide left and right, taking an item as an example.

3. Picture toggle animation effect

Bloggers use ViewFlipper.

The XML code is as follows

Highlight: two animation files, which took nearly 30 minutes to debug to achieve a similar effect.

Anim_marquee_in:

Anim_marquee_out:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.