首页 > 系统 > Android > 正文

Android仿网易云音乐播放界面

2019-10-22 18:17:35
字体:
来源:转载
供稿:网友

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

Android,网易,云音乐播放界面,Android音乐播放界面,Android播放界面

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

<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); //监听方法 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);     }   };    //状态标志:   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类型,分别为播放、暂停、播放状态与转动角度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表