Android高仿网易云音乐播放界面

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Gary__123456/article/details/47721711

现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面。先上两张图

第一张为播放前的界面,第二张为点击播放按钮的图片。布局文件如下:

<span style="font-size:18px;"><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></span>

MainActivity的代码如下:

<span style="font-size:18px;">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);
		//监听方法
		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;

				}

			}
		});
	}

}</span>
光盘界面是自定义的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);
		}
	};

	//状态标志:
	int before = 0;
	//角度标志
	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为屏幕的中间位置,手机是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();

		}

		/**
		 * 再画光盘指针图片,三张图不能同时画
		 */
		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);
			//获得指针旋转后的图片
			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为常量类,定义了四个常量。都是int类型,分别为播放、暂停、播放状态与转动角度。

阅读更多
换一批

没有更多推荐了,返回首页