Android自定义view之网易云推荐歌单界面
文章目录
系列文章目录前言一、实现
1.自定义一个圆角图片控件（也可直接使用第三方框架）2.进行布局摆设3.图片切换动画效果 二、实现效果展示三、总结
先来看看网易云APP的效果： 前言
前天有粉丝想计蒙资讯关于网易云音乐推荐歌单界面的实现，想着好久没写博客了，于是写一篇关于自定义view的文章。
一、实现 1.自定义一个圆角图片控件（也可直接使用第三方框架）
由于是一些简单的绘制，就不一一介绍了，直接上代码。
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(); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (null != drawable) { Bitmap bitmap = getBitmapFromDrawable(drawable); Bitmap b = getRoundBitmapByShader(bitmap,getWidth(),getHeight(), 20,0); final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight()); final Rect rectDest = new Rect(0,0,getWidth(),getHeight()); canvas.drawBitmap(b, rectSrc, rectDest, paint); } else { super.onDraw(canvas); } } 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); //创建需要输出的bitmap Bitmap desBitmap = Bitmap.createBitmap(outWidth, outHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(desBitmap); Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); //着色器 BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); //给着色器配置matrix bitmapShader.setLocalMatrix(matrix); paint.setShader(bitmapShader); //创建矩形区域并且预留出border RectF rect = new RectF(boarder, boarder, outWidth - boarder, outHeight - boarder); //把传入的bitmap绘制到圆角矩形区域内 canvas.drawRoundRect(rect, radius, radius, paint); return desBitmap; }}
效果图如下：
时间原因，一些简单的细节没有画上去。
将整个布局放在HorizontalScrollView中使其可以左右滑动，以一个item为例。
博主使用的是ViewFlipper。
XML代码如下
划重点：两个动画文件，计蒙调试的将近30分钟才调试成类似效果
anim_marquee_in：
<?xml version="1.0" encoding="utf-8"?>
anim_marquee_out：
<?xml version="1.0" encoding="utf-8"?>
在Java文件中为ViewFlipper添加view：
private ViewFlipper viewFlipper; //--------------------------------- viewFlipper.removeAllViews(); View view = View.inflate(getContext(), R.layout.home_rebroadcast_item, null); MellowImageView carouselImageView=view.findViewById(R.id.carousel_item_iv); View view1 = View.inflate(getContext(), R.layout.home_rebroadcast_item1, null); MellowImageView carouselImageView1=view.findViewById(R.id.carousel_item_iv); // 循环滚动图片的点击事件 // iv.setonClickListener(new ....); //添加view viewFlipper.addView(view); viewFlipper.addView(view1);
二、实现效果展示 三、总结效果其实比较好实现，但是很多地方需要设置一些判断。欢迎留言。如有问题也可私信计蒙。