Android实现网易云推荐歌单界面

先来看看网易云APP的效果：

前言

关于网易云音乐推荐歌单界面的实现

一、实现

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();
   }
   /**
    * 绘制圆角矩形图片
    * @author jimeng
    */
   @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);
       }
   }

/**
    * 把图片转换成Bitmap
    * @param drawable
    * 资源图片
    * @return 位图
    */
   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;
   }

}

效果图如下：

时间原因，一些简单的细节没有画上去。

2.进行布局摆设

将整个布局放在HorizontalScrollView中使其可以左右滑动，以一个item为例。

<HorizontalScrollView
   xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scrollbars="none"
   android:orientation="horizontal"
   >
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal">
<!--     美化，并无其他作用-->
    <RelativeLayout
        android:layout_width="@dimen/jimeng_dp_16"
        android:layout_height="@dimen/jimeng_dp_135"/>

<RelativeLayout
        android:layout_width="@dimen/jimeng_dp_130"
        android:layout_height="@dimen/jimeng_dp_135"
        >

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/like_icon2"
            android:layout_centerHorizontal="true"
            android:text="计蒙不吃鱼"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@color/jimeng_black"
            android:textSize="12.0dip" />

<com.shenzhen.jimeng.jmhnzsb.View.MellowImageView
            android:id="@+id/like_icon2"
            android:layout_width="120.0dip"
            android:layout_height="120.0dip"
            android:layout_centerHorizontal="true"
            android:scaleType="centerCrop"
            android:src="@drawable/yf1" />

</RelativeLayout>

</LinearLayout>

</HorizontalScrollView >

3.图片切换动画效果

博主使用的是ViewFlipper。
XML代码如下

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
   android:layout_height="wrap_content">
   <ViewFlipper
       android:id="@+id/viewFlipper"
       android:layout_width="120.0dip"
       android:layout_height="120.0dip"
       android:flipInterval="3000"
       android:inAnimation="@anim/anim_marquee_in"
       android:outAnimation="@anim/anim_marquee_out" />
</RelativeLayout>

划重点：两个动画文件，计蒙调试的将近30分钟才调试成类似效果
anim_marquee_in：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
       <translate
           android:duration="500"
           android:fromYDelta="120％p"
           android:toYDelta="0"/>
   <scale
       android:duration="500"
       android:fromXScale="0.8"
       android:fromYScale="0.8"
       android:toXScale="1"
       android:toYScale="1"
       android:pivotY="50％"
       android:pivotX="50％"/>
   </set>

anim_marquee_out：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate
       android:duration="500"
       android:fromYDelta="0"
       android:toYDelta="-120％p"/>
   <scale
       android:duration="500"
       android:fromXScale="1"
       android:fromYScale="1"
       android:toXScale="0.8"
       android:toYScale="0.8"
       android:pivotY="50％"
       android:pivotX="50％">

</scale>

</set

在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);

二、实现效果展示

三、总结

效果其实比较好实现，但是很多地方需要设置一些判断。

来源：https://blog.csdn.net/qq_42761395/article/details/122885290