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

目录

• 前言
• 一、实现
• 1.自定义一个圆角图片控件（也可直接使用第三方框架）
• 2.进行布局摆设
• 3.图片切换动画效果
• 二、实现效果展示
• 三、总结

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



}

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

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

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

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

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