经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Android实现网易云推荐歌单界面
来源:jb51  时间:2022/2/14 8:34:53  对本文有异议

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

请添加图片描述

前言

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

一、实现

1.自定义一个圆角图片控件(也可直接使用第三方框架)

由于是一些简单的绘制,就不一一介绍了,直接上代码。

  1. public class MellowImageView extends ImageView {
  2. private Paint paint;
  3.  
  4. public MellowImageView(Context context) {
  5. super(context);
  6. }
  7.  
  8. public MellowImageView(Context context, @Nullable AttributeSet attrs) {
  9. super(context, attrs);
  10. }
  11.  
  12. public MellowImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  13. super(context, attrs, defStyleAttr);
  14. paint=new Paint();
  15. }
  16. /**
  17. * 绘制圆角矩形图片
  18. * @author jimeng
  19. */
  20. @Override
  21. protected void onDraw(Canvas canvas) {
  22. Drawable drawable = getDrawable();
  23. if (null != drawable) {
  24. Bitmap bitmap = getBitmapFromDrawable(drawable);
  25. Bitmap b = getRoundBitmapByShader(bitmap,getWidth(),getHeight(), 20,0);
  26. final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());
  27. final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
  28.  
  29. canvas.drawBitmap(b, rectSrc, rectDest, paint);
  30.  
  31. } else {
  32. super.onDraw(canvas);
  33. }
  34. }
  35.  
  36. /**
  37. * 把图片转换成Bitmap
  38. * @param drawable
  39. * 资源图片
  40. * @return 位图
  41. */
  42. public static Bitmap getBitmapFromDrawable(Drawable drawable) {
  43. int width = drawable.getIntrinsicWidth();
  44. int height = drawable.getIntrinsicHeight();
  45. Bitmap bitmap = Bitmap.createBitmap(width, height, drawable
  46. .getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
  47. : Bitmap.Config.RGB_565);
  48. Canvas canvas = new Canvas(bitmap);
  49. drawable.draw(canvas);
  50. return bitmap;
  51. }
  52.  
  53. public static Bitmap getRoundBitmapByShader(Bitmap bitmap, int outWidth, int outHeight, int radius, int boarder) {
  54. if (bitmap == null) {
  55. return null;
  56. }
  57. int width = bitmap.getWidth();
  58. int height = bitmap.getHeight();
  59. float widthScale = outWidth * 1f / width;
  60. float heightScale = outHeight * 1f / height;
  61.  
  62. Matrix matrix = new Matrix();
  63. matrix.setScale(widthScale, heightScale);
  64. //创建需要输出的bitmap
  65. Bitmap desBitmap = Bitmap.createBitmap(outWidth, outHeight, Bitmap.Config.ARGB_8888);
  66. Canvas canvas = new Canvas(desBitmap);
  67. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  68. //着色器
  69. BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  70. //给着色器配置matrix
  71. bitmapShader.setLocalMatrix(matrix);
  72. paint.setShader(bitmapShader);
  73. //创建矩形区域并且预留出border
  74. RectF rect = new RectF(boarder, boarder, outWidth - boarder, outHeight - boarder);
  75. //把传入的bitmap绘制到圆角矩形区域内
  76. canvas.drawRoundRect(rect, radius, radius, paint);
  77. return desBitmap;
  78. }
  79.  
  80.  
  81.  
  82. }

效果图如下:

请添加图片描述

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

2.进行布局摆设

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

  1. <HorizontalScrollView
  2. xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:scrollbars="none"
  5. android:orientation="horizontal"
  6. >
  7. <LinearLayout
  8. android:layout_width="wrap_content"
  9. android:layout_height="match_parent"
  10. android:orientation="horizontal">
  11. <!-- 美化,并无其他作用-->
  12. <RelativeLayout
  13. android:layout_width="@dimen/jimeng_dp_16"
  14. android:layout_height="@dimen/jimeng_dp_135"/>
  15.  
  16. <RelativeLayout
  17. android:layout_width="@dimen/jimeng_dp_130"
  18. android:layout_height="@dimen/jimeng_dp_135"
  19. >
  20.  
  21. <TextView
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:layout_below="@id/like_icon2"
  25. android:layout_centerHorizontal="true"
  26. android:text="计蒙不吃鱼"
  27. android:maxLines="1"
  28. android:ellipsize="end"
  29. android:textColor="@color/jimeng_black"
  30. android:textSize="12.0dip" />
  31.  
  32. <com.shenzhen.jimeng.jmhnzsb.View.MellowImageView
  33. android:id="@+id/like_icon2"
  34. android:layout_width="120.0dip"
  35. android:layout_height="120.0dip"
  36. android:layout_centerHorizontal="true"
  37. android:scaleType="centerCrop"
  38. android:src="@drawable/yf1" />
  39.  
  40. </RelativeLayout>
  41. </LinearLayout>
  42.  
  43. </HorizontalScrollView >

3.图片切换动画效果

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

  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
  3. android:layout_height="wrap_content">
  4. <ViewFlipper
  5. android:id="@+id/viewFlipper"
  6. android:layout_width="120.0dip"
  7. android:layout_height="120.0dip"
  8. android:flipInterval="3000"
  9. android:inAnimation="@anim/anim_marquee_in"
  10. android:outAnimation="@anim/anim_marquee_out" />
  11. </RelativeLayout>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <set xmlns:android="http://schemas.android.com/apk/res/android">
  4. <translate
  5. android:duration="500"
  6. android:fromYDelta="120%p"
  7. android:toYDelta="0"/>
  8. <scale
  9. android:duration="500"
  10. android:fromXScale="0.8"
  11. android:fromYScale="0.8"
  12. android:toXScale="1"
  13. android:toYScale="1"
  14. android:pivotY="50%"
  15. android:pivotX="50%"/>
  16. </set>
  17.  

anim_marquee_out:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate
  4. android:duration="500"
  5. android:fromYDelta="0"
  6. android:toYDelta="-120%p"/>
  7. <scale
  8. android:duration="500"
  9. android:fromXScale="1"
  10. android:fromYScale="1"
  11. android:toXScale="0.8"
  12. android:toYScale="0.8"
  13. android:pivotY="50%"
  14. android:pivotX="50%">
  15.  
  16. </scale>
  17.  
  18. </set

在Java文件中为ViewFlipper添加view:

  1. private ViewFlipper viewFlipper;
  2. //---------------------------------
  3. viewFlipper.removeAllViews();
  4. View view = View.inflate(getContext(), R.layout.home_rebroadcast_item, null);
  5. MellowImageView carouselImageView=view.findViewById(R.id.carousel_item_iv);
  6. View view1 = View.inflate(getContext(), R.layout.home_rebroadcast_item1, null);
  7. MellowImageView carouselImageView1=view.findViewById(R.id.carousel_item_iv);
  8.  
  9. // 循环滚动图片的点击事件
  10. // iv.setOnClickListener(new ....);
  11. //添加view
  12. viewFlipper.addView(view);
  13. viewFlipper.addView(view1);

二、实现效果展示

请添加图片描述

三、总结

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

到此这篇关于Android实现网易云推荐歌单界面的文章就介绍到这了,更多相关Android网易云歌单界面内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号