码迷,mamicode.com
首页 > 移动开发 > 详细

Android 手机影音 学习过程记录(六)

时间:2015-07-12 09:40:05      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:android   手机影音   项目开发   

前一篇已经将音乐播放及切换的相关逻辑弄好了,今天主要理一下剩余的部分,包括:
1. 自定义通知栏的布局及逻辑处理
2. 滚动歌词的绘制
3. 歌词解析

效果图

技术分享 技术分享

通知栏

  1. 自定义布局:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/layout_notification"
        android:padding="10dp" >
    
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@mipmap/ic_launcher" />
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:orientation="vertical" >
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="标题"
                android:id="@+id/tv_notification_title"
                android:textColor="@color/white"
                android:textSize="17sp" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="艺术家"
                android:id="@+id/tv_notification_content"
                android:textColor="@color/gray_white"
                android:textSize="14sp" />
        </LinearLayout>
    
        <LinearLayout android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_height="40dp">
    
            <ImageView android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginRight="20dp"
                android:id="@+id/btn_notification_pre"
                android:background="@mipmap/icon_notification_pre"/>
    
            <ImageView android:layout_width="30dp"
                android:layout_height="30dp"
                android:id="@+id/btn_notification_next"
                android:background="@mipmap/icon_notification_next"/>
    
        </LinearLayout>
    
    </LinearLayout>
  2. 通知栏的相关逻辑:

    1. 下一首
    2. 上一首
    3. 进入播放页
        /**
         * 发送自定义布局的通知
         */
        private void sendNotification() {
            Notification.Builder builder = new Notification.Builder(AudioPlayerService.this);
            builder.setOngoing(true)
                    .setSmallIcon(R.mipmap.notification_music_playing)
                    .setTicker("正在播放:" + StringUtil.formatAudioName(audioList.get(currentPosition).getTitle()))
                    .setWhen(System.currentTimeMillis())
                    .setContent(getRemoteViews());
    
            startForeground(1, builder.build());
        }
    
        private RemoteViews getRemoteViews() {
            RemoteViews remoteViews = new RemoteViews(getPackageName(),
                    R.layout.layout_music_notification);
            remoteViews.setTextViewText(R.id.tv_notification_title, StringUtil.formatAudioName(audioList.get(currentPosition).getTitle()));
            remoteViews.setTextViewText(R.id.tv_notification_content, audioList.get(currentPosition).getArtist());
    
            remoteViews.setOnClickPendingIntent(R.id.btn_notification_pre, getPrePendingIntent());
            remoteViews.setOnClickPendingIntent(R.id.btn_notification_next, getNextPendingIntent());
            remoteViews.setOnClickPendingIntent(R.id.layout_notification, getContentPendingIntent());
    
            return remoteViews;
        }
    
        private PendingIntent getPrePendingIntent() {
            Intent intent = new Intent(AudioPlayerService.this, AudioPlayerService.class);
            intent.putExtra("viewAction", ACTION_NOTIFICATION_PRE);
            intent.putExtra("isFromNotification", true);
            PendingIntent pendingIntent = PendingIntent.getService(AudioPlayerService.this, 1, intent, PendingIntent.FLAG_UPDATE_CURRENT);
            return pendingIntent;
        }
    
        private PendingIntent getNextPendingIntent() {
            Intent intent = new Intent(AudioPlayerService.this, AudioPlayerService.class);
            intent.putExtra("viewAction", ACTION_NOTIFICATION_NEXT);
            intent.putExtra("isFromNotification", true);
            PendingIntent pendingIntent = PendingIntent.getService(AudioPlayerService.this, 2, intent, PendingIntent.FLAG_UPDATE_CURRENT);
            return pendingIntent;
        }
    
        private PendingIntent getContentPendingIntent() {
            Intent intent = new Intent(AudioPlayerService.this, AudioPlayerActivity.class);
            Bundle bundle = new Bundle();
            bundle.putInt("viewAction", ACTION_NOTIFICATION_LAYOUT);
            bundle.putBoolean("isFromNotification", true);
            intent.putExtras(bundle);
            PendingIntent pendingIntent = PendingIntent.getActivity(AudioPlayerService.this, 3, intent, PendingIntent.FLAG_UPDATE_CURRENT);
            return pendingIntent;
        }
    
    
    /*发送通知的方法应该在音乐准备完成和开始播放的时候调用*/
    
        private OnPreparedListener onPreparedListener = new OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mediaPlayer.start();
                notifyPrepared();
                sendNotification();
            }
        };
        public void start() {
            if (mediaPlayer != null) {
                mediaPlayer.start();
            }
            sendNotification();
        }
    
        //音乐准备暂停时移除通知
        public void pause() {
            if (mediaPlayer != null) {
                mediaPlayer.pause();
            }
            stopForeground(true);//移除通知
        }
    

歌词绘制

思路:自定义LyricView继承TextView,覆盖onSizeChanged(),onDraw()方法。

  1. 绘制一行居中文本

    /**
     * 绘制水平居中的歌词文本
     *
     * @param canvas  画布
     * @param text    文本
     * @param y       竖直方向的y坐标
     * @param isLight 是否高亮
     */
    private void drawCenterHorizontalText(Canvas canvas, String text, float y, boolean isLight) {
        paint.setColor(isLight ? LYRCI_HIGHLIGHT_COLOR : LYRIC_DEFAULT_COLOR);
        paint.setTextSize(isLight ?
                getResources().getDimension(R.dimen.lyric_highlight_textsize)
                : getResources().getDimension(R.dimen.lyric_default_textsize));
        float x = width / 2 - paint.measureText(text) / 2;
        canvas.drawText(text, x, y, paint);
    }
    
  2. 绘制多行歌词

        /**
     * 绘制所有的歌词
     *
     * @param canvas 画布
     */
    private void drawLyricList(Canvas canvas) {
        Lyric lightLyric = lyricList.get(lightLyricIndex);
    
        //1.首先将高亮行的歌词绘制出来,作为一个参照物
        float lightLyricY = height / 2 + getTextHeight(lightLyric.getContent()) / 2;
        drawCenterHorizontalText(canvas, lightLyric.getContent(), lightLyricY, true);
        //2.遍历高亮行之前的歌词,并绘制出来
        for (int pre = 0; pre < lightLyricIndex; pre++) {
            Lyric lyric = lyricList.get(pre);
            float y = lightLyricY - (lightLyricIndex - pre) * LYRIC_ROW_HEIGHT;
            drawCenterHorizontalText(canvas, lyric.getContent(), y, false);
        }
        //3.遍历高亮行之后的歌词,并绘制出来
        for (int next = lightLyricIndex + 1; next < lyricList.size(); next++) {
            Lyric lyric = lyricList.get(next);
            float y = lightLyricY + (next - lightLyricIndex) * LYRIC_ROW_HEIGHT;
            drawCenterHorizontalText(canvas, lyric.getContent(), y, false);
        }
    
    }
    
    /**
     * 获取文本的高度
     *
     * @param text 文本
     * @return 文本的高度
     */
    private float getTextHeight(String text) {
        Rect bounds = new Rect();
        paint.getTextBounds(text, 0, text.length(), bounds);
        return bounds.height();
    }
  3. 滚动歌词

    /**
     * 滚动歌词
     */
    public void roll(long currentPosition,long audioDuration){
        this.currentPosition = currentPosition;
        this.audioDuration = audioDuration;
        //1. 根据歌词播放的position,计算出高亮行的索引lightLyricIndex
        if(lyricList.size() != 0){
            //1.根据当前歌曲播放的位置去计算lightLyricIndex
            caculateLightLyricIndex();
        }
    
        //2. 拿到新的lightLyricIndex之后,更新view
        invalidate();
    }
    /**
     * 计算高亮歌词的索引值
     * 只要当前音乐的position大于当前行的startPoint,
     * 并且小于下一行的startPoint,就是高亮行
     */
    private void caculateLightLyricIndex() {
        for (int i = 0; i < lyricList.size(); i++) {
            long startPoint = lyricList.get(i).getStartPoint();
            if(i == lyricList.size() - 1){//最后一行
                if(currentPosition > startPoint){
                    lightLyricIndex = i;
                }
            }else{//不是最后一行
                Lyric next = lyricList.get(i + 1);
                if(currentPosition > startPoint && currentPosition < next.getStartPoint()){
                    lightLyricIndex = i;
                }
            }
    
        }
    }
  4. 平滑滚动歌词

    /**
     * 绘制所有的歌词
     *
     * @param canvas 画布
     */
    private void drawLyricList(Canvas canvas) {
        Lyric lightLyric = lyricList.get(lightLyricIndex);
        //平滑移动歌词
        //1. 算出歌词的总的播放时间 即 下一行的startPoint - 当前的startPoint
        int totalDuration;
        if(lightLyricIndex==(lyricList.size()-1)){
            //如果最后一行是高亮行,则拿歌曲总时间减去当前的startPoint
            totalDuration = (int) (audioDuration - lightLyric.getStartPoint());
        }else {
            totalDuration = (int) (lyricList.get(lightLyricIndex+1).getStartPoint()-lightLyric.getStartPoint());
        }
        //2. 算出当前已经播放的秒数占总时间的百分比 currentAudioPosition - startPoint
        float offsetPosition = (int) (currentPosition - lightLyric.getStartPoint());
        float percent = offsetPosition/totalDuration;
        //3. 根据百分比算出应该移动的距离 percent * LYRIC_ROW_HEIGHT
        float dy = LYRIC_ROW_HEIGHT * percent;
        canvas.translate(0, -dy);
    
    
        //1.首先将高亮行的歌词绘制出来,作为一个参照物
        float lightLyricY = height / 2 + getTextHeight(lightLyric.getContent()) / 2;
        drawCenterHorizontalText(canvas, lightLyric.getContent(), lightLyricY, true);
        //2.遍历高亮行之前的歌词,并绘制出来
        for (int pre = 0; pre < lightLyricIndex; pre++) {
            Lyric lyric = lyricList.get(pre);
            float y = lightLyricY - (lightLyricIndex - pre) * LYRIC_ROW_HEIGHT;
            drawCenterHorizontalText(canvas, lyric.getContent(), y, false);
        }
        //3.遍历高亮行之后的歌词,并绘制出来
        for (int next = lightLyricIndex + 1; next < lyricList.size(); next++) {
            Lyric lyric = lyricList.get(next);
            float y = lightLyricY + (next - lightLyricIndex) * LYRIC_ROW_HEIGHT;
            drawCenterHorizontalText(canvas, lyric.getContent(), y, false);
        }
    
    }
  5. 提供设置歌词的方法

        public void setLyricList(ArrayList<Lyric> lyricList){
            this.lyricList = lyricList;
            if(this.lyricList==null){
                hasNoLyric = true;
            }
        }

歌词解析

  1. 读取每一行歌词文本
  2. 解析每一行歌词
  3. 对歌词集合进行排序

    /**
     * 歌词解析的工具类
     */
    public class LyricParser {
        public static ArrayList<Lyric> parseLyricFromFile(File lyricFile){
            if(lyricFile==null || !lyricFile.exists())return null;
            ArrayList<Lyric> list = new ArrayList<Lyric>();
    
            try {
                //1.读取每一行歌词文本
                BufferedReader reader = new BufferedReader(new InputStreamReader
                        (new FileInputStream(lyricFile),"utf-8"));
                String line;
                while((line=reader.readLine())!=null){
                    //2.解析每一行歌词
                    //[00:04.05][00:24.05][01:24.05]北京北京   -> split("\\]")
                    //[00:04.05   [00:24.05   [01:24.05       北京北京
                    String[] arr = line.split("\\]");
                    for (int i = 0; i < arr.length-1; i++) {
                        Lyric lyric = new Lyric();
                        lyric.setContent(arr[arr.length-1]);//设置歌词内容
                        lyric.setStartPoint(formatStartPoint(arr[i]));
    
                        list.add(lyric);
                    }
                }
                //3.对歌词集合进行排序
                Collections.sort(list);//从小到大
            } catch (Exception e) {
                e.printStackTrace();
            }
    
            return list;
        }
    
        /**
         * 将[00:04.05转long类型的时间
         * @param str
         * @return
         */
        private static long formatStartPoint(String str){
            str = str.substring(1);//00:04.05
            //1.先以冒号分割
            String[] arr1 = str.split("~i");//00    04.05
            String[] arr2 = arr1[1].split("\\.");//04    05
            int minute = Integer.parseInt(arr1[0]);//得到多少分钟
            int second = Integer.parseInt(arr2[0]);//得到多少秒
            int mills = Integer.parseInt(arr2[1]);//得到多少10毫秒
            return mills*10 + second*1000 + minute*60*1000;
        }
    
    }
    
    /**模拟歌词加载模块
     * TODO:拿歌曲id去服务器请求对应的歌词文件
     */
    public class LyricLoader {
    //    private static final String LYRIC_DIR = Environment.getExternalStorageDirectory()+"/MIUI/music/lyric";
        private static final String LYRIC_DIR = Environment.getExternalStorageDirectory()+"/test/audio";
        public static File loadLyricFileByName(String audioName){
            File file = new File(LYRIC_DIR,StringUtil.formatAudioName(audioName)+".lrc");
            LogUtils.i(LYRIC_DIR);
            if(!file.exists()){
                file = new File(LYRIC_DIR,StringUtil.formatAudioName(audioName)+".txt");
            }
            return file;
        }
    }
    

好了,手机影音项目的整理就到这里。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 手机影音 学习过程记录(六)

标签:android   手机影音   项目开发   

原文地址:http://blog.csdn.net/sinat_20645961/article/details/46847957

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!