Android实现网易云推荐歌单界面
更新时间：2022年02月13日 16:12:53 作者：计蒙不吃鱼
大家好，本篇文章主要讲的是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);
二、实现效果展示
三、总结
效果其实比较好实现，但是很多地方需要设置一些判断。
到此这篇关于Android实现网易云推荐歌单界面的文章就介绍到这了,更多相关Android网易云歌单界面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Android实现使用流媒体播放远程mp3文件的方法,结合实例形式分析了Android远程播放音频文件的相关步骤与实现技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了Android简单实现圆盘抽奖界面的相关资料,需要的朋友可以参考下2016-01-01
本篇文章主要介绍了Android原生实现多线程断点下载实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在之前遇到有个需求是要改settings里面自动转屏的首选项，于是就学习了下Shared Preference。Shared Preference是一种简单的、轻量级的键/值对机制，用于保存原始应用程序数据，最常见的就是首选项2013-09-09
作为Android应用开发者，不得不面对一个尴尬的局面，就是自己辛辛苦苦开发的应用可以被别人很轻易的就反编译出来,天下痛苦之事莫过于此啊，本文会介绍一种防止apk程序被反编译的方法，感兴趣的朋友可以了解下哦2013-01-01
Android App使用RecyclerView实现上拉和下拉刷新的方法
RecyclerView一经推出便被认为是替代ListView的存在,那么ListView的上拉和下拉刷新我们同样可以使用RecyclerView来做到,这里我们就来看一下Android App使用RecyclerView实现上拉和下拉刷新的方法,首先先来点RecyclerView的小介绍:2016-06-06
这篇文章主要介绍了Android过滤emoji表情正则表达式，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
今天小编就为大家分享一篇关于Android三级缓存原理讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
Android性能优化之RecyclerView分页加载组件功能详解
这篇文章主要为大家介绍了Android性能优化之RecyclerView分页加载组件功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
今天小编就为大家分享一篇关于Android编程程序实现一键锁屏的方法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
最新评论