Android仿網(wǎng)易云音樂播放界面
現(xià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);
//加載光盤view
musicPlayDiscView = new MusicPlayDiscView(this);
playDisc.addView(musicPlayDiscView);
playMusic = (ImageView) findViewById(R.id.music_paly_pause);
//監(jiān)聽方法
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;
}
}
});
}
}
光盤界面是自定義的view。MusicPlayDiscView,代碼如下:
public class MusicPlayDiscView extends View {
Paint paint;
private Handler handler;
// 光盤圖片
Bitmap bitmapDisc = BitmapFactory.decodeResource(getResources(),
R.drawable.play_disc);
// 專輯圖片
Bitmap bitmapImage = BitmapFactory.decodeResource(getResources(),
R.drawable.music_play_people);
Bitmap bitmapCircularAblum, bitmapDiscCircular;
// 光盤指針圖片
Bitmap bitmapNeedle = BitmapFactory.decodeResource(getResources(),
R.drawable.play_needle);
public MusicPlayDiscView(Context context) {
super(context);
//分別獲得光盤和專輯的圓形圖片
bitmapCircularAblum = getCircularBitmap(bitmapImage, 400);
bitmapDiscCircular = getCircularBitmap(bitmapDisc,
bitmapDisc.getWidth());
paint = new Paint();
handler = new Handler();
handler.post(runnable);
}
/**
* 利用線程不斷更新界面
*/
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);
/**
* 先畫光盤與專輯圖片
*/
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();
}
/**
* 再畫光盤指針圖片,三張圖不能同時(shí)畫
*/
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為常量類,定義了四個(gè)常量。都是int類型,分別為播放、暫停、播放狀態(tài)與轉(zhuǎn)動(dòng)角度。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android項(xiàng)目實(shí)戰(zhàn)教程之高仿網(wǎng)易云音樂啟動(dòng)頁實(shí)例代碼
- Android實(shí)現(xiàn)網(wǎng)易云推薦歌單界面
- Android實(shí)現(xiàn)網(wǎng)易云音樂的旋轉(zhuǎn)專輯View
- Android5.0以上實(shí)現(xiàn)全透明的狀態(tài)欄方法(仿網(wǎng)易云界面)
- 漂亮的Android音樂歌詞控件 仿網(wǎng)易云音樂滑動(dòng)效果
- Android控件RecyclerView實(shí)現(xiàn)混排效果仿網(wǎng)易云音樂
- Android實(shí)現(xiàn)網(wǎng)易云音樂高仿版流程
相關(guān)文章
Android移動(dòng)開發(fā)recycleView的頁面點(diǎn)擊跳轉(zhuǎn)設(shè)計(jì)實(shí)現(xiàn)
這篇文章主要介紹了Android移動(dòng)開發(fā)recycleView的頁面點(diǎn)擊跳轉(zhuǎn)設(shè)計(jì)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
Android編程之Application設(shè)置全局變量及傳值用法實(shí)例分析
這篇文章主要介紹了Android編程之Application設(shè)置全局變量及傳值用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了全局變量及傳值的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Android編程設(shè)計(jì)模式之Builder模式實(shí)例詳解
這篇文章主要介紹了Android編程設(shè)計(jì)模式之Builder模式,結(jié)合實(shí)例形式詳細(xì)分析了Android設(shè)計(jì)模式之Builder模式概念、功能、使用場(chǎng)景、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12
Android開發(fā)之EditText框輸入清理工具類示例
這篇文章主要介紹了Android開發(fā)之EditText框輸入清理工具類,涉及Android事件監(jiān)聽及輸入框清理相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
Android控件之AnalogClock與DigitalClock用法實(shí)例分析
這篇文章主要介紹了Android控件之AnalogClock與DigitalClock用法,以實(shí)例形式分析了Android時(shí)鐘控件AnalogClock和DigitalClock用于顯示時(shí)間的具體使用技巧,需要的朋友可以參考下2015-09-09
Android實(shí)現(xiàn)下載進(jìn)度條效果
vivo商店在下載應(yīng)用的時(shí)候,底部有一個(gè)圓角矩形的下載進(jìn)度條,中間有一個(gè)進(jìn)度文字,而且進(jìn)度和文字交匯的時(shí)候,交匯部分的文字會(huì)從藍(lán)色邊為白色,會(huì)有一種一半白色字,一半藍(lán)色字的效果。本文將仿照該樣式實(shí)現(xiàn)一個(gè)2021-06-06
android ContentResolver獲取手機(jī)電話號(hào)碼和短信內(nèi)容
這篇文章主要為大家詳細(xì)介紹了android ContentResolver獲取手機(jī)電話號(hào)碼、短信內(nèi)容,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07

