【android】音乐播放器之UI设计的点点滴滴

       学习Android有一个多月,看完了《第一行代码》以及mars老师的第一期视频通过音乐播放器小项目加深对知识点的理解。从本文开始,将详细的介绍简单仿多米音乐播放器的实现,以及网络解析数据获取百度音乐最新排行音乐以及下载功能。

        功能介绍如下:    

        1、获取本地歌曲列表,实现歌曲播放功能。 
        2、利用jsoup解析网页数据,从网络获取歌曲列表,同时实现歌曲和歌词下载到手机本地的功能。 
        3、通知栏提醒,实现仿QQ音乐播放器的通知栏功能. 
     

       涉及的技术有: 
       1、jsoup解析网络网页,从而获取需要的数据 
       2、android中访问网络,获取文件到本地的网络请求技术,以及下载文件到本地实现断点下载 
       3、线程池 
       4、图片缓存 
       5、service一直在后台运行 
       6、Activity与Fragment间的切换以及通信 
       7、notification通知栏设计 
       8、自定义广播 
       9、android系统文件管

     音乐播放器思路及源码下载见:【android】音乐播放器之设计思路

       Ui界面的最终显示效果如下:

【android】音乐播放器之UI设计的点点滴滴_第1张图片

【android】音乐播放器之UI设计的点点滴滴_第2张图片

    

       马上来看看UI界面是如何实现的,不过先得做些准备工作~~启动界面的设计。细心的朋友肯定注意到目前一些主流app登陆时候都有封面展示的效果,启动界面的制作就是为了实现这个效果:加载一个布局全屏展示一张封面,并2s跳转到主布局MainActivity.

public class SplashActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// no title
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		// 全屏
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.splash_layout);
		
		// 2s跳转到主界面
		new Handler().postDelayed(new Runnable() {
			@Override
			public void run() {
				startActivity(new Intent(SplashActivity.this, MainActivity.class));
				finish();
			}
		}, 2000);
	}
}

       有了上面的准备工作,可以设计主界面以及主界面中的5个Fragment(不是4个嘛!!!!~!~我这边直接将本地音乐列表这个Fragment直接放到MainActivity中)。目前,主流的app主界面实现由四种方式:

        (1)ViewPager实现

        (2)Fragment实现

        (3)FragmentPagerAdapter+ViewPager实现

        (4)ViewPagerIndicator+ViewPager实现

      就挑个最熟练的实现方式:Fragment实现。(哈哈,目前水平比较低。。。ViewPager后文有使用分析,其余还是想每一种都有机会去尝试用到代码中去。) 小编这边的都是使用动态Fragment

[html]  view plain copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.     <include layout="@layout/top" />  
  7.       
  8.     <FrameLayout   
  9.         android:id="@+id/id_content"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="0dp"  
  12.         android:layout_weight="1">  
  13.          
  14.     FrameLayout>  
  15.   
  16.     <include layout="@layout/bottom" />  
  17.   
  18. LinearLayout>  
         顶部和底部的布局就补贴出来了,到时直接看源码就明白了。在MainActivity中通过监听底部的按钮获取FragmentManager方式开启一个事务添加一个Fragment或者去隐藏一个Fragment。当然这边也可以直接调用事务的raplace方法替代原布局中的Fragment (~·~ 后文将介绍相关的Api以及总结Fragment和Activity的通信 ),主要代码段如下:

[html]  view plain copy
  1. public void setSelect(int i)  
  2.     {  
  3.         FragmentManager fm = getSupportFragmentManager();  
  4.         FragmentTransaction transaction = fm.beginTransaction();  
  5.         hideFragment(transaction);  
  6.         // 把图片设置为亮的  
  7.         // 设置内容区域  
  8.         switch (i)  
  9.         {  
  10.         case TAB_USER:  
  11.             if (mTab01 == null)  
  12.             {  
  13.                 mTab01 = new UserFragment();  
  14.                 transaction.add(R.id.id_content, mTab01);  
  15.             } else  
  16.             {  
  17.                 transaction.show(mTab01);  
  18.             }  
  19.             mImguser.setImageResource(R.drawable.icon_user_selected);  
  20.             mTitle.setText("我的音乐");  
  21.               
  22.             break;  
  23.         case TAB_CD:  
  24.             if (mTab02 == null)  
  25.             {  
  26.                 mTab02 = new CdFragment();  
  27.                 transaction.add(R.id.id_content, mTab02);  
  28.             } else  
  29.             {  
  30.                 transaction.show(mTab02);  
  31.                   
  32.             }  
  33.             mImgcd.setImageResource(R.drawable.icon_cd_selected);  
  34.             mTitle.setText("音乐架");  
  35.             break;  
  36.         case TAB_SEARCH:  
  37.             if (mTab03 == null)  
  38.             {  
  39.                 mTab03 = new SearchFragment();  
  40.                 transaction.add(R.id.id_content, mTab03);  
  41.             } else  
  42.             {  
  43.                 transaction.show(mTab03);  
  44.             }  
  45.             mImgsearch.setImageResource(R.drawable.icon_search_selected);  
  46.             mTitle.setText("搜索");  
  47.             break;  
  48.         case TAB_COMPASS:  
  49.             if (mTab04 == null)  
  50.             {  
  51.                 mTab04 = new CompassFragment();  
  52.                 transaction.add(R.id.id_content, mTab04);  
  53.             } else  
  54.             {  
  55.                 transaction.show(mTab04);  
  56.             }  
  57.             mImgcompass.setImageResource(R.drawable.icon_compass_selected);  
  58.             mTitle.setText("发现");  
  59.             break;  
  60.         case TAB_SONGLIST:  
  61.             if (mTab05 == null)  
  62.             {  
  63.                 mTab05 = new LocalFragment();  
  64.                 transaction.add(R.id.id_content, mTab05);  
  65.             } else  
  66.             {  
  67.                 transaction.show(mTab05);  
  68.             }  
  69.             resetImgs();  
  70.             setVisibility(TOP_MENU);  
  71.             mTitle.setText("本地音乐");  
  72.             break;  
  73.               
  74.         default:  
  75.             break;  
  76.         }  
  77.   
  78.         transaction.commit();  
  79.     }  

       

[html]  view plain copy
  1. private void hideFragment(FragmentTransaction transaction)  
  2.     {  
  3.         setVisibility(TOP_JUMP);  
  4.         if (mTab01 != null)  
  5.         {  
  6.             transaction.hide(mTab01);  
  7.         }  
  8.         if (mTab02 != null)  
  9.         {  
  10.             transaction.hide(mTab02);  
  11.         }  
  12.         if (mTab03 != null)  
  13.         {  
  14.             transaction.hide(mTab03);  
  15.         }  
  16.         if (mTab04 != null)  
  17.         {  
  18.             transaction.hide(mTab04);  
  19.         }  
  20.         if (mTab05 != null)  
  21.         {  
  22.             transaction.hide(mTab05);  
  23.               
  24.         }  
  25.     }  

        

         每个Fragment中的控件也都是最最常用的控件,这边就不一一介绍。。。其余除Ui之外更详细的分析可以看看小编其他相关的博客。其中,应该注意的是:在本地音乐这个Fragment中通过短点击ListView歌曲Items跳转启动PlayAcyivity加载播放界面。也终于到了讲ViewPager这块了!!!~!~
       ViewPager添加一个VIew或者删除一个View是通过我们自定义的PagerAdapter控制的,于是我们可以在View中维系一个ArrayList。然后滑动的时候通过get(position)取出对应的view:

       ViewPager添加一个VIew或者删除一个View是通过我们自定义的PagerAdapter控制的,于是我们可以在View中维系一个ArrayList。然后滑动的时候通过get(position)取出对应的view:

[html]  view plain copy
  1. /**  
  2.      * 初始化viewpager的内容  
  3.      */  
  4.     private void initViewPagerContent() {  
  5.         View cd = View.inflate(this, R.layout.play_pager_item_1, null);  
  6.         mCdView = (CDView) cd.findViewById(R.id.play_cdview);  
  7.         mTextArtistTitle = (TextView) cd.findViewById(R.id.play_singer);  
  8.         mLrcViewOnFirstPage = (LrcView) cd.findViewById(R.id.play_first_lrc);  
  9.           
  10.         View lrcView = View.inflate(this, R.layout.play_pager_item_2, null);  
  11.         mLrcViewOnSecondPage = (LrcView) lrcView.findViewById(R.id.play_first_lrc_2);  
  12.           
  13.         mViewPagerContent.add(cd);  
  14.         mViewPagerContent.add(lrcView);  
  15.     }  
[html]  view plain copy
  1. private PagerAdapter mPagerAdapter = new PagerAdapter() {  
  2.         @Override  
  3.         public int getCount() {  
  4.             return mViewPagerContent.size();  
  5.         }  
  6.   
  7.         @Override  
  8.         public boolean isViewFromObject(View view, Object obj) {  
  9.             return view == obj;  
  10.         }  
  11.           
  12.         @Override  
  13.         public Object instantiateItem(ViewGroup container, int position) {  
  14.             container.addView(mViewPagerContent.get(position));  
  15.             return mViewPagerContent.get(position);  
  16.         }  
  17.           
  18.         @Override  
  19.         public void destroyItem(ViewGroup container, int position, Object object) {  
  20.             ((ViewPager) container).removeView((View) object);  
  21.         }  
  22.     };  
         内容太多了,只能讲主要的Ui布局实现。其他细节可以参考我其他博文或者源代码。


         下面我想共享下下面的一些关于Fragment的小总结!

        Fragment家族常用的API

          Fragment常用的三个类:(1)android.app.Fragment 主要用于定义Fragment;(2)android.app.FragmentManager 主要用于在Activity中操作Fragment;(3)android.app.FragmentTransaction 保证一些列Fragment操作的原子性,熟悉事务这个词,一定能明白~

         a、获取FragmentManage的方式:getFragmentManager() // v4中,getSupportFragmentManager

         b、主要的操作都是FragmentTransaction的方法:1)FragmentTransaction transaction = fm.benginTransatcion();//开启一个事务;2)transaction.add() 往Activity中添加一个Fragment;3)transaction.remove()从Activity中移除一个Fragment,如果被移除的Fragment没有添加到回退栈(回退栈后面会详细说),这个Fragment实例将会被销毁;4)transaction.replace():使用另一个Fragment替换当前的,实际上就是remove()然后add()的合体~;5)transaction.hide():隐藏当前的Fragment,仅仅是设为不可见,并不会销毁;6)transaction.show():显示之前隐藏的Fragment

7)detach()会将view从UI中移除,和remove()不同,此时fragment的状态依然由FragmentManager维护;8)attach()重建view视图,附加到UI上并显示。

transatcion.commit()//提交一个事务

        注意:常用Fragment的哥们,可能会经常遇到这样Activity状态不一致:State loss这样的错误。主要是因为:commit方法一定要在Activity.onSaveInstance()之前调用。

         上述,基本是操作Fragment的所有的方式了,在一个事务开启到提交可以进行多个的添加、移除、替换等操作。值得注意的是:如果你喜欢使用Fragment,一定要清楚这些方法,哪个会销毁视图,哪个会销毁实例,哪个仅仅只是隐藏,这样才能更好的使用它们。


你可能感兴趣的:(Android,随笔,Android技术小酷)