【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界面的最终显示效果如下：

    

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

public class SplashActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// no titlerequestWindowFeature(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() {@Overridepublic 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 plaincopy

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 plaincopy

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 plaincopy

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<view>。然后滑动的时候通过get(position)取出对应的view：

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

[html] view plaincopy

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 plaincopy

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，一定要清楚这些方法，哪个会销毁视图，哪个会销毁实例，哪个仅仅只是隐藏，这样才能更好的使用它们。