Android仿網(wǎng)易云音樂(lè)播放界面
現(xiàn)在很多的播放器的播放界面都是采用光盤(pán)的轉(zhuǎn)動(dòng),下面是我仿造網(wǎng)易的播放界面。先上兩張圖:
第一張為播放前的界面,第二張為點(diǎn)擊播放按鈕的圖片。布局文件如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="48dp" android:background="#222222" > <ImageView android:id="@+id/back_main_activity" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="5dp" android:background="@drawable/back_main_view" /> <TextView android:id="@+id/play_music_name" android:layout_width="wrap_content" android:layout_height="40dp" android:layout_centerInParent="true" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/back_main_activity" android:paddingTop="5dp" android:text="music" android:textColor="#ffffff" android:textSize="20dp" /> </RelativeLayout> <RelativeLayout android:id="@+id/play_disc" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center|center_vertical" > </RelativeLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="80dp" android:layout_below="@+id/seekbarLayout" android:background="#222222" android:gravity="center_horizontal" android:orientation="horizontal" android:layout_alignParentBottom="true" > <ImageView android:id="@+id/music_paly_pause" android:layout_width="80dp" android:layout_height="fill_parent" android:background="@drawable/play_btn_play" /> </LinearLayout> </RelativeLayout>
MainActivity的代碼如下:
public class MainActivity extends Activity { private RelativeLayout playDisc; private MusicPlayDiscView musicPlayDiscView; //播放按鈕 private ImageView playMusic; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); playDisc = (RelativeLayout) findViewById(R.id.play_disc); //加載光盤(pán)view musicPlayDiscView = new MusicPlayDiscView(this); playDisc.addView(musicPlayDiscView); playMusic = (ImageView) findViewById(R.id.music_paly_pause); //監(jiān)聽(tīng)方法 playMusic.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { switch (Constant.CurrentState) { case Constant.Pause: Constant.CurrentState = Constant.Play; playMusic.setBackgroundResource(R.drawable.play_btn_pause); break; case Constant.Play: Constant.CurrentState = Constant.Pause; playMusic.setBackgroundResource(R.drawable.play_btn_play); break; } } }); } }
光盤(pán)界面是自定義的view。MusicPlayDiscView,代碼如下:
public class MusicPlayDiscView extends View { Paint paint; private Handler handler; // 光盤(pán)圖片 Bitmap bitmapDisc = BitmapFactory.decodeResource(getResources(), R.drawable.play_disc); // 專(zhuān)輯圖片 Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(), R.drawable.music_play_people); Bitmap bitmapCircularAblum, bitmapDiscCircular; // 光盤(pán)指針圖片 Bitmap bitmapNeedle = BitmapFactory.decodeResource(getResources(), R.drawable.play_needle); public MusicPlayDiscView(Context context) { super(context); //分別獲得光盤(pán)和專(zhuān)輯的圓形圖片 bitmapCircularAblum = getCircularBitmap(bitmapImage, 400); bitmapDiscCircular = getCircularBitmap(bitmapDisc, bitmapDisc.getWidth()); paint = new Paint(); handler = new Handler(); handler.post(runnable); } /** * 利用線(xiàn)程不斷更新界面 */ private Runnable runnable = new Runnable() { public void run() { postInvalidate(); handler.postDelayed(runnable, 50); } }; //狀態(tài)標(biāo)志: int before = 0; //角度標(biāo)志 private int degreeFlag = 0; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 先畫(huà)光盤(pán)與專(zhuān)輯圖片 */ if (Constant.CurrentState == Constant.Play) { Constant.Degree++; if (Constant.Degree > 360) Constant.Degree = 0; degreeFlag = Constant.Degree; canvas.save(); //360為屏幕的中間位置,手機(jī)是720的寬度 canvas.rotate(Constant.Degree, 360, 170 + bitmapDiscCircular.getHeight() / 2); canvas.drawBitmap(bitmapCircularAblum, 360 - bitmapCircularAblum.getWidth() / 2, 200, paint); canvas.drawBitmap(bitmapDisc, 360 - bitmapDiscCircular.getWidth() / 2, 170, paint); canvas.restore(); } else { //before = 0; canvas.save(); canvas.rotate(degreeFlag, 360, 170 + bitmapDiscCircular.getHeight() / 2); canvas.drawBitmap(bitmapCircularAblum, 360 - bitmapCircularAblum.getWidth() / 2, 200, paint); canvas.drawBitmap(bitmapDisc, 360 - bitmapDiscCircular.getWidth() / 2, 170, paint); canvas.restore(); } /** * 再畫(huà)光盤(pán)指針圖片,三張圖不能同時(shí)畫(huà) */ if (Constant.CurrentState == Constant.Play ) { canvas.drawBitmap(bitmapNeedle, 360 - bitmapNeedle.getWidth() / 2, 0, paint); } else { canvas.save(); Matrix matrix = new Matrix(); matrix.postRotate(-45); paint.setAntiAlias(true); //獲得指針旋轉(zhuǎn)后的圖片 Bitmap bm = Bitmap.createBitmap(bitmapNeedle, 0, 0, bitmapNeedle.getWidth(), bitmapNeedle.getHeight(), matrix, true); canvas.drawBitmap(bm, 360 - bitmapNeedle.getWidth() / 2 + 5, -60, paint); canvas.restore(); } } /** * 獲得圓形圖片的方法 * */ private Bitmap getCircularBitmap(Bitmap bitmap, int radius) { Bitmap sbmp = Bitmap.createScaledBitmap(bitmap, radius, radius, false); Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); Paint paint = new Paint(); Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight()); paint.setAntiAlias(true); paint.setFilterBitmap(true); paint.setDither(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(Color.BLACK); canvas.drawCircle(sbmp.getWidth() / 2, sbmp.getHeight() / 2, sbmp.getWidth() / 2, paint); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(sbmp, rect, rect, paint); return output; } }
Constant為常量類(lèi),定義了四個(gè)常量。都是int類(lèi)型,分別為播放、暫停、播放狀態(tài)與轉(zhuǎn)動(dòng)角度。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android項(xiàng)目實(shí)戰(zhàn)教程之高仿網(wǎng)易云音樂(lè)啟動(dòng)頁(yè)實(shí)例代碼
- Android實(shí)現(xiàn)網(wǎng)易云推薦歌單界面
- Android實(shí)現(xiàn)網(wǎng)易云音樂(lè)的旋轉(zhuǎn)專(zhuān)輯View
- Android5.0以上實(shí)現(xiàn)全透明的狀態(tài)欄方法(仿網(wǎng)易云界面)
- 漂亮的Android音樂(lè)歌詞控件 仿網(wǎng)易云音樂(lè)滑動(dòng)效果
- Android控件RecyclerView實(shí)現(xiàn)混排效果仿網(wǎng)易云音樂(lè)
- Android實(shí)現(xiàn)網(wǎng)易云音樂(lè)高仿版流程
相關(guān)文章
Android中實(shí)現(xiàn)下載和解壓zip文件功能代碼分享
這篇文章主要介紹了Android中實(shí)現(xiàn)下載和解壓zip文件功能代碼分享,本文直接給出了實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03android教程之把自己的應(yīng)用加入到系統(tǒng)分享中
在A(yíng)ndroid系統(tǒng)中打開(kāi)相冊(cè)中的某張圖片, 點(diǎn)擊右上角的分享按鈕會(huì)彈出分享列表, 把自己的應(yīng)用加入到里面來(lái),下面是設(shè)置方法2014-02-02Android Service類(lèi)與生命周期詳細(xì)介紹
這篇文章主要介紹了Android Service類(lèi)與生命周期詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-03-03Android應(yīng)用中仿今日頭條App制作ViewPager指示器
這篇文章主要介紹了Android應(yīng)用中仿今日頭條App制作ViewPager指示器的例子,一般就是導(dǎo)航條在翻頁(yè)時(shí)的動(dòng)態(tài)字體變色效果,需要的朋友可以參考下2016-04-04Android通知欄增加快捷開(kāi)關(guān)的功能實(shí)現(xiàn)教程
對(duì)于A(yíng)ndroid來(lái)說(shuō)其中一項(xiàng)很方便的操作便是下拉菜單,下拉菜單欄可以快捷打開(kāi)某項(xiàng)設(shè)置,這篇文章主要給大家介紹了關(guān)于A(yíng)ndroid通知欄增加快捷開(kāi)關(guān)的功能實(shí)現(xiàn),需要的朋友可以參考下2023-01-01Android實(shí)現(xiàn)仿iOS菊花加載圈動(dòng)畫(huà)效果
iOS上有一個(gè)UIActivityIndicator的控件,就是俗稱(chēng)轉(zhuǎn)菊花的控件,一般UI設(shè)計(jì)師會(huì)按照iOS的風(fēng)格來(lái)出設(shè)計(jì)稿,也要求使用這種Loading效果,本文將具體的講述如何實(shí)現(xiàn)這種效果,感興趣的朋友可以參考下2021-05-05android ListView結(jié)合x(chóng)utils3仿微信實(shí)現(xiàn)下拉加載更多
本篇文章主要介紹了android ListView結(jié)合x(chóng)utils3仿微信實(shí)現(xiàn)下拉加載更多,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11flutter開(kāi)發(fā)的app項(xiàng)目?打包成web
如果你的Flutter版本低于2.0,請(qǐng)先升級(jí)Flutter版本,創(chuàng)建一個(gè)web文件夾來(lái)存放web相關(guān)的資源,使用HTML渲染器打包,該渲染器提供的打開(kāi)速度最快,并且具有良好的瀏覽器兼容性,使用默認(rèn)設(shè)置進(jìn)行打包,提供的打開(kāi)速度為一般,但依然保持良好的瀏覽器兼容性2024-08-08