广告位联系
返回顶部
分享到

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

Android 来源:互联网 作者:秩名 发布时间:2022-02-13 21:11:16 人浏览
摘要

先来看看网易云APP的效果: 前言 关于网易云音乐推荐歌单界面的实现 一、实现 1.自定义一个圆角图片控件(也可直接使用第三方框架) 由于是一些简单的绘制,就不一一介绍了,直接

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

请添加图片描述

前言

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

一、实现

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

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为例。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<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代码如下

1

2

3

4

5

6

7

8

9

10

11

<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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?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:

1

2

3

4

5

6

7

8

9

10

11

12

13

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

二、实现效果展示

请添加图片描述


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/qq_42761395/article/details/122885290
相关文章
  • Kotlin的Collection与Sequence操作异同点介绍

    Kotlin的Collection与Sequence操作异同点介绍
    在Android开发中,集合是我们必备的容器,Kotlin的标准库中提供了很多处理集合的方法,而且还提供了两种基于容器的工作方式:Collection 和
  • 实现一个Kotlin函数类型方法

    实现一个Kotlin函数类型方法
    接口与函数类型 业务开发中,经常会有实现一个函数式接口(即接口只有一个方法需要实现)的场景,大家应该都会不假思索的写出如下代
  • Android10 App启动Activity源码分析
    ActivityThread的main方法 让我们把目光聚焦到ActivityThread的main方法上。 ActivityThread的源码路径为/frameworks/base/core/java/android/app/ActivityThread。 1 2
  • Android10客户端事务管理ClientLifecycleManager源码解析

    Android10客户端事务管理ClientLifecycleManager源码解析
    在Android 10 App启动分析之Activity启动篇(二)一文中,简单地介绍了Activity的生命周期管理器是如何调度Activity进入onCreate生命周期的流程。这
  • Kotlin对象的懒加载方式by lazy与lateinit异同介绍

    Kotlin对象的懒加载方式by lazy与lateinit异同介绍
    属性或对象的延时加载是我们相当常用的,一般我们都是使用 lateinit 和 by lazy 来实现。 他们两者都是延时初始化,那么在使用时那么他们两
  • Android类加载流程分析

    Android类加载流程分析
    本文分析的代码基于Android8.1.0源码。 流程分析 从loadClass开始,我们来看下Android中类加载的流程 /libcore/ojluni/src/main/java/java/lang/ClassLoader.ja
  • Android实现读写USB串口数据的代码

    Android实现读写USB串口数据的代码
    最近在研究USB方面的内容;先后做了关于Android读写HID、串口设备的DEMO。本文比较简单,主要介绍的是Android实现读取串口数据的功能 废话不
  • Epoxy - 在RecyclerView中构建复杂界面
    Diffing 对于复杂数据结构支持的多个视图类型展示在屏幕上, Epoxy此时是尤其有用的. 在这些场景中, 数据可能会被网络请求, 异步 Observable, 用
  • Android性能优化的详细介绍

    Android性能优化的详细介绍
    性能优化是一个app很重要的一部分,一个性能优良的app从被下载到启动到使用都能给用户到来很好的体验。自然我们做性能优化也是从被下
  • Android进阶宝典-插件化2(Hook启动插件中四大组件

    Android进阶宝典-插件化2(Hook启动插件中四大组件
    在上一节,我们主要介绍了如果通过反射来加载插件中的类,调用类中的方法;既然插件是一个apk,其实最重要的是启动插件中的Activity、
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计