先来看看网易云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);
二、实现效果展示

三、总结
效果其实比较好实现,但是很多地方需要设置一些判断。
到此这篇关于Android实现网易云推荐歌单界面的文章就介绍到这了,更多相关Android网易云歌单界面内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!