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網易雲歌單界面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Android自定義有限制區域圖例角度自識別塗鴉工具類中篇
- android viewflipper實現左右滑動切換顯示圖片
- Android使用ViewFlipper實現圖片上下自動輪播的示例代碼
- Android Canvas和Bitmap結合繪圖詳解流程
- Android實現濾鏡效果ColorMatrix