Android音乐播放器 -- UI 代码构现

最新推荐文章于 2021-05-28 22:24:11 发布

saberhao

最新推荐文章于 2021-05-28 22:24:11 发布

阅读量1.4k

点赞数 1

分类专栏： Android开发文章标签： Fragment MediaPlayer Adapte

本文链接：https://blog.csdn.net/saberhao/article/details/46893379

版权

Android开发专栏收录该内容

37 篇文章 0 订阅

订阅专栏

Fragment是 android3.0之后出现的概念，目前广泛使用与各种App中，比如大家非常熟悉的微信，QQ等的切换，我使用了Fragment实现我的 / 歌手 / 专辑列表切换，下面是利用Fragment搭建UI的过程

MySongFragment.java

package com.saberhao.fragment;

import java.util.List;
import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.annotation.SuppressLint;

import com.saberhao.Adapter.MusicListAdapter;
import com.saberhao.support.MusicInfo;
import com.saberhao.mediaplayer.R;
import com.saberhao.musichandle.CursorHandle;

@SuppressLint("NewApi")
public class MySongFragment extends ListFragment{
	
	private static String TAG = "MySongFragment";
	MusicListAdapter listAdapter;
	private List<MusicInfo> musicInfolist = null;
	OnArticleSelectedListener mListener;
	
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		
		musicInfolist = CursorHandle.getMusicInfos(getActivity());
		listAdapter = new MusicListAdapter(getActivity(),musicInfolist);
		setListAdapter(listAdapter);
	}
		
	public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        View mysonglayout = inflater.inflate(R.layout.mysong_listview, container, false); 
        return mysonglayout; 
    }  
	
	@Override  
    public void onListItemClick(ListView l, View v, int position, long id) {  
        System.out.println("Click On List Item!!!"); 
        Log.e(TAG, "Click the music list!!!!!");
        super.onListItemClick(l, v, position, id); 
	}
		
}

关键有两点，一是需要在 onCreateView中，在通过inflate 获取view ，进行listview的装载，对应的mysong_listview.xml 如下

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"
     >  
  
    <ListView  
        android:id="@+id/android:list"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
         />  

</RelativeLayout>

二是，通过MusicListAdapt将数据和视图联系起来

listAdapter = new MusicListAdapter(getActivity(),musicInfolist);

MusicListAdapt.java

@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder viewHolder = null;
		if(convertView == null)
		{
			viewHolder = new ViewHolder();
			convertView = LayoutInflater.from(context).inflate(R.layout.mysong_layout, null);
			viewHolder.musicTitle = (TextView) convertView.findViewById(R.id.music_title_show);
			viewHolder.musicArtist = (TextView) convertView.findViewById(R.id.music_singer_show);
			viewHolder.musicDuration = (TextView) convertView.findViewById(R.id.music_time_show);
			convertView.setTag(viewHolder);			//表示给View添加一个格外的数据，
		} else {
			viewHolder = (ViewHolder)convertView.getTag();//通过getTag的方法将数据取出来
		}
		mp3Info = mp3Infos.get(position);
		viewHolder.musicTitle.setText(mp3Info.getTitle());			//显示标题
		viewHolder.musicArtist.setText(mp3Info.getArtist());		//显示艺术家
		viewHolder.musicDuration.setText(CursorHandle.formatTime(mp3Info.getDuration()));//显示时长
		
		return convertView;
	}
	
	
	public class ViewHolder {
		//所有控件对象引用
		//public ImageView albumImage;	//专辑图片
		public TextView musicTitle;		//音乐标题
		public TextView musicDuration;	//音乐时长
		public TextView musicArtist;	//音乐艺术家
	}
}

通过 LayoutInflater获取布局mysong_layout.xml，对于每个ListView, 我们使用了下面的mysong_layout.xml进行定义

mysong_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp" 
    android:background="#3f000000">
    
    <RelativeLayout
	      android:id="@+id/music_about_layout"
	      android:layout_width="250dp"
	      android:layout_height="55dp"
	      android:layout_alignParentBottom="true" >
          
		  <TextView
               android:id="@+id/music_title_show"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentLeft="true"
               android:layout_marginLeft="7.0dp"
               android:layout_marginTop="7.0dp"
               android:textSize="15sp"
               android:singleLine="true"
               android:text="@string/song"
               android:textColor="@android:color/white" />

           <TextView
               android:id="@+id/music_singer_show"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentLeft="true"
               android:layout_below="@id/music_title_show"
               android:layout_marginBottom="1.0dp"
               android:layout_marginLeft="7.0dp"
               android:textSize="13sp"
               android:text="@string/singer"
               android:textColor="@android:color/white" />	      
	   </RelativeLayout>
	   
       <TextView
               android:id="@+id/music_time_show"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginLeft="5.0dp"
               android:layout_marginRight="12.0dp"
               android:layout_marginTop="5.0dp"
               android:layout_alignTop="@id/music_about_layout"
               android:layout_toRightOf="@id/music_about_layout"
               android:layout_alignParentRight="true"
               android:gravity="right"
               android:textSize="13sp"
               android:ellipsize="marquee"
               android:marqueeRepeatLimit="marquee_forever"
               android:singleLine="true"
               android:text="@string/time"
               android:textColor="@android:color/white" />

</RelativeLayout>

到这里 ”我的“ 列表相关的fragment 配置就完成了， ”歌手“ 还有 ”专辑“ 列表也是类似，这里就不详叙了

接下来要做的就是在主界面中装载对应的 fragment, 对应的主界面布局文件如下

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
	android:orientation="vertical"
	android:background="@drawable/wood_bg2"
    tools:context=".MainActivity" >
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#3f000000"
        >
        
        <Button
            android:id="@+id/mysong_btn"
            style ="?android:attr/buttonBarButtonStyle" 
            android:layout_width="0dp"
            android:layout_height="match_parent" 
            android:gravity="center"
            android:layout_weight="1"
            android:text="@string/mysong"
            android:textColor="#ceefff" />
       
       <Button
            android:id="@+id/singer_btn"
            style ="?android:attr/buttonBarButtonStyle" 
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/singer"
            android:textColor="#ceefff"
            />
       
       <Button
            android:id="@+id/album_btn"
            style ="?android:attr/buttonBarButtonStyle" 
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/album"
            android:textColor="#ceefff"
            />     
    </LinearLayout>
    
    <FrameLayout
        android:id="@+id/musiclist"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>
    

    <RelativeLayout 
	    android:layout_width="fill_parent"
	    android:layout_height="52dp"
	    android:background="#5f000000">
	
	     <ImageView
	         android:id="@+id/default_pic_bar"
	         android:layout_width="0dp"
	         android:layout_height="match_parent"
	         android:layout_alignParentLeft="true"
	         android:layout_alignParentBottom="true"
	         android:background="#0000"
	         android:src="@drawable/defaul_pic_2" 
	         />
	         
		  <RelativeLayout
		      android:id="@+id/music_about_layout"
		      android:layout_width="180dp"
		      android:layout_height="match_parent"
		      android:layout_alignParentBottom="true"
		      android:layout_alignTop="@id/default_pic_bar"
		      android:layout_toRightOf="@id/default_pic_bar" >
	          
			  <TextView
	               android:id="@+id/music_title"
	               android:layout_width="wrap_content"
	               android:layout_height="wrap_content"
	               android:layout_alignParentLeft="true"
	               android:layout_marginLeft="7.0dp"
	               android:layout_marginTop="5.0dp"
	               android:textSize="17sp"
	               android:ellipsize="marquee"
	               android:focusable="true"
	               android:focusableInTouchMode="true"
	               android:marqueeRepeatLimit="marquee_forever"
	               android:singleLine="true"
	               android:text="@string/song"
	               android:textColor="@android:color/white" />
	
	           <TextView
	               android:id="@+id/music_singer"
	               android:layout_width="wrap_content"
	               android:layout_height="wrap_content"
	               android:layout_alignParentLeft="true"
	               android:layout_below="@id/music_title"
	               android:layout_marginBottom="4.0dp"
	               android:layout_marginLeft="7.0dp"
	               android:textSize="12sp"
	               android:text="@string/singer"
	               android:textColor="@android:color/white" />	      
		   </RelativeLayout>
	      
	       <ImageButton
	          android:id="@+id/play_bar"
	          android:layout_width="50dp"
	          android:layout_height="fill_parent"
	          android:layout_marginRight="5dp"
	          android:background="#0000"
	          android:layout_toRightOf="@id/music_about_layout"
	          android:layout_alignTop="@id/music_about_layout"
	          android:src="@drawable/play" />
	      
	       <ImageButton
	             android:id="@+id/next_bar"
	             android:layout_width="50dp"
	             android:layout_height="fill_parent"
	             android:layout_alignParentRight="true"
	             android:background="#0000"
	             android:layout_marginRight="5dp"
	             android:layout_alignTop="@id/play_bar"
	             android:layout_toRightOf="@id/play_bar"
	             android:src="@drawable/next" />
	</RelativeLayout>
    
</LinearLayout>

activity 动态转载 fragment

MainActivity.java

package com.saberhao.mediaplayer;

import java.util.List;
import com.saberhao.fragment.MyLoveFragment;
import com.saberhao.fragment.MySongFragment;
import com.saberhao.fragment.ArtistFragment;
import com.saberhao.fragment.AlbumFragment;
import com.saberhao.musichandle.CursorHandle;


public class MainActivity extends Activity implements MySongFragment.OnArticleSelectedListener{
	
	private static String TAG = "MainActivity";
	private static int INVALID = -1;
	
	private MySongFragment mysongFragment;
	private MyLoveFragment myloveFragment;
	private ArtistFragment singerFragment;
	private AlbumFragment albumFragment;
	private FragmentManager fragmentManager; 
	
	private Button mysongBtn;
	//private Button myloveBtn;
	private Button singerBtn;
	private Button albumBtn;
	
	private ImageButton playBtn;
	private ImageButton nextBtn;
	private View musicAboutLayout;
	private TextView musicSinger;
	private TextView musicTitle;
	private String url;         // 歌曲路径
	private String titleName;
	private int type = Common.PlayerType.TYPE_ALL;
	private int type0;

	private List<MusicInfo> MusicInfos = null;
	private boolean isPlaying = false; // 正在播放
	private int listposition = 0;


	
	private MainBroadcastReceiver MainBroadcastReceiver;
	public static final String ACTION_UPDATE_INFO = "android.intent.action.ACTION_UPDATE_INFO";
	
	

	@SuppressLint("NewApi")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE); 
		setContentView(R.layout.activity_main);
		MusicInfos = CursorHandle.getMusicInfos(MainActivity.this);
		//注册广播接收器
		registerReceiver();
		//初始化布局
		initView();
		//获取FragmentManager 以便对Fragment进行管理
		fragmentManager = getFragmentManager();
		setTabSeletion(0);
		//发送intent更新音乐播放进度	
		
	}

	/** 
     * 将所有的Fragment都置为隐藏状态。 
     *  
     * @param transaction 
     * 用于对Fragment执行操作的事务 ，
     * Fragment只是被隐藏起来，这样可以节省不断new fragment的内存消耗
     */  
	private void hideFragments(FragmentTransaction transaction) {
		// TODO Auto-generated method stub
		if(null != mysongFragment)
			transaction.hide(mysongFragment);
		
		if(null != myloveFragment)
			transaction.hide(myloveFragment);
		
		if(null != singerFragment)
			transaction.hide(singerFragment);
		
		if(null != albumFragment)
			transaction.hide(albumFragment);
	}

	/** 
     * 清除掉所有的选中状态。 
     */  
	private void initView() {
		// TODO Auto-generated method stub
		mysongBtn =  (Button)findViewById(R.id.mysong_btn);
		//myloveBtn =  (Button)findViewById(R.id.mylove_btn);
		singerBtn =  (Button)findViewById(R.id.singer_btn);
		albumBtn =  (Button)findViewById(R.id.album_btn);
		playBtn = (ImageButton)findViewById(R.id.play_bar);
		nextBtn = (ImageButton)findViewById(R.id.next_bar);
		musicAboutLayout = findViewById(R.id.music_about_layout);
		musicSinger = (TextView)findViewById(R.id.music_singer);
		musicTitle = (TextView)findViewById(R.id.music_title);
		//设置播放bar显示
		MusicInfo musicInfo = MusicInfos.get(listposition);
		musicTitle.setText(musicInfo.getTitle()); // 显示歌曲标题
		musicSinger.setText(musicInfo.getArtist()); //显示歌手名字
		//设置监听
		ViewOnClickListener viewOnClickListener = new ViewOnClickListener();
		mysongBtn.setOnClickListener(viewOnClickListener);
		//myloveBtn.setOnClickListener(viewOnClickListener);
		singerBtn.setOnClickListener(viewOnClickListener);
		albumBtn.setOnClickListener(viewOnClickListener);
		PlayBarOnClickListener playBarOnClickListener = new PlayBarOnClickListener();
		playBtn.setOnClickListener(playBarOnClickListener);
		nextBtn.setOnClickListener(playBarOnClickListener);
		musicAboutLayout.setOnClickListener(playBarOnClickListener);
		
			
	}
	
	private void clearSelection() {
		// TODO Auto-generated method stub
		//淡化字体颜色 选中时设置为  颜色加深 #ceefff
		mysongBtn.setTextColor(Color.parseColor("#a6bff2"));
		//myloveBtn.setTextColor(Color.parseColor("#a6bff2"));
		singerBtn.setTextColor(Color.parseColor("#a6bff2"));
		albumBtn.setTextColor(Color.parseColor("#a6bff2"));
		//提高透明度     前两位为透明度 00代表全透明， ff代表不透明   选中时用   #3f000000
		mysongBtn.setBackgroundColor(Color.parseColor("#3f000000"));
		//myloveBtn.setBackgroundColor(Color.parseColor("#3f000000"));
		singerBtn.setBackgroundColor(Color.parseColor("#3f000000"));
		albumBtn.setBackgroundColor(Color.parseColor("#3f000000"));
	}
	
	 /** 
     * 根据传入的index参数来设置选中的tab页。 
     *  
     * @param index 
     * 每个tab页对应的下标。0表示 "我的"，1表示"最爱"，2表示"歌手"，3表示"专辑"。 
     */  
	private void setTabSeletion(int index) {
		// TODO Auto-generated method stub
		// 1. 清除当前状态
		clearSelection();
		// 2. 开启Fragment事务
		FragmentTransaction transaction = fragmentManager.beginTransaction();
		// 3. 隐藏所有Fragment,以防止多个fragment显示
		hideFragments(transaction); 
		switch(index){
		case 0:
			// 点击"我的"按钮， UI变化
			mysongBtn.setTextColor(Color.parseColor("#ceefff"));
			mysongBtn.setBackgroundColor(Color.parseColor("#5f000000"));
			if(null == mysongFragment){
				mysongFragment = new MySongFragment();
				transaction.add(R.id.musiclist, mysongFragment);
			}else {
				transaction.show(mysongFragment);
			}
			break;
			
		case 2:	
			// 点击"歌手"按钮， UI变化
			singerBtn.setTextColor(Color.parseColor("#ceefff"));
			singerBtn.setBackgroundColor(Color.parseColor("#5f000000"));
			if(null == singerFragment){
				singerFragment = new ArtistFragment();
				transaction.add(R.id.musiclist, singerFragment);
			}else {
				transaction.show(singerFragment);
			}
			break;
			
		case 3:
			// 点击"专辑"按钮， UI变化
			albumBtn.setTextColor(Color.parseColor("#ceefff"));
			albumBtn.setBackgroundColor(Color.parseColor("#5f000000"));
			if(null == albumFragment){
				albumFragment = new AlbumFragment();
				transaction.add(R.id.musiclist, albumFragment);
			}else {
				transaction.show(albumFragment);
			}
			break;
			
		default: 
			break;
		}
		//事务提交
		transaction.commit();
	}

	//监听tab点击动作，选择对应的fragment动态加载
	private class ViewOnClickListener implements OnClickListener {
		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			switch(arg0.getId()) {
			case R.id.mysong_btn:
				setTabSeletion(0);
				break;
			case R.id.singer_btn:
				setTabSeletion(2);
				break;
			case R.id.album_btn:
				setTabSeletion(3);
				break;
			default:  
	            break;
			}
		}
		
		
	}
}

最后的效果如下图

过程中遇到了个问题和大家分享下，就是旋转屏幕之后，会有重影，度娘了下，大概有3中解决办法

1. 讲背景颜色设置为不透明

android:background="#ffffffff"

这个方法虽好，但是没有根本上解决问题，这是让上图层完全遮住了下面图层，同时存在两个图层，只是下面的图层被挡住了，没有采用

2. 使用 transaction.replace 代替 transaction.add

transaction.replace(R.id.musiclist, mysongFragment);

这种方法就是将原有图层销毁，然后在新建一个图层，可以解决问题，但是，fragment的优势就是可以隐藏而不重绘，可以节省系统资源，显然这个方法和fragment的原意有点不搭，所以我还是坚持使用add 方法

3. 旋转屏幕为什么会出现重影？其实旋转屏幕会重现调用onCreat方法进行重绘，由于原来fragment没有销毁，所以产生了重影的现象，解决的办法，旋转不onCreate！

在Androidmanifest.xml 的 MainActivity声明中添加

android:configChanges="orientation|screenSize"

即可解决

重要的事情，源码请猛戳这里下载

下篇文章 Android音乐播放器 -- 实现框架将介绍MediaPlayer的基本框架，敬请期待~

saberhao

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录