扣丁音乐（三）——UI框架的实现

本文出自：http://blog.csdn.net/dt235201314/article/details/51341057

一丶PagerSlidingTabStrp运用

扣丁音乐1.0前部分（gif图大小限制）演示：

视频教程中是直接将PagerSlidingTabStrp例子的主页面拿来做主页面，并对相应用到的地方做出修改

修改一：

activity_main.xml

保留如下，其余控件删除

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:background="@drawable/background_tabs" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tabs"
    tools:context=".MainActivity" />

修改二：

MainActivity.java

默认颜色

private int currentColor = 0xFFC74B46;

滑动项名字

private final String[] TITLES = { "我的音乐", "音乐馆" };

滑动Fragment相关加载（作者目前阶段的）

@Override
   public Fragment getItem(int position) {

      if(position==0){
         if(myMusicFragment==null){
            myMusicFragment = MyMusicFragment.newInstance();
         }
         return myMusicFragment;
      }else if(position==1){
         if(netMusicFragment==null){
            netMusicFragment = NetMusicFragment.newInstance();
         }
         return netMusicFragment;
      }
      return null;
   }

}

二丶MymusicFragment

由演示可以看到我的页面比视频上多一个跳转页，并没有在MymusicFragment实现歌曲加载而是通过点击跳转，其实也就多一个页面。

MymusicFragment.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:background="@drawable/skin2">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#10ffffff">

        <LinearLayout
            android:id="@+id/four_module"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/ll_local_songs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_local_songs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/local_songs"/>

                <TextView
                    android:id="@+id/tv_local_songs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/local_songs"
                    android:paddingTop="10dp"
                    android:textColor="@color/white"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/tv_songs_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="12"
                    android:paddingTop="5dp"
                    android:textColor="@color/white"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_already_download"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/iv_already_download"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/already_download"/>

                <TextView
                    android:id="@+id/tv_already_download"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/already_download"
                    android:paddingTop="10dp"
                    android:textColor="@color/white"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/download_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="15"
                    android:paddingTop="5dp"
                    android:textColor="@color/white"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_recent_played"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/iv_recent_played"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/recent_played"/>

                <TextView
                    android:id="@+id/tv_recent_played"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/recent_played"
                    android:paddingTop="10dp"
                    android:textColor="@color/white"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/tv_download_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="16"
                    android:paddingTop="5dp"
                    android:textColor="@color/white"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_settings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_settings"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/settings"/>

                <TextView
                    android:id="@+id/tv_settings"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/settings"
                    android:paddingTop="10dp"
                    android:textColor="@color/white"
                    android:textStyle="bold"/>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

MymusicFragment.java

public class MyMusicFragment extends Fragment implements View.OnClickListener{
    private LinearLayout layout_local_songs;
    private MainActivity mainActivity;
    /**
     * 初始化myMusicFragment,在MainActivity中调用
     * @return
     */
    public static MyMusicFragment newInstance(){
        MyMusicFragment myMusicFragment = new MyMusicFragment();
        return myMusicFragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.my_music_fragment,null);
        layout_local_songs = (LinearLayout)view.findViewById(R.id.ll_local_songs);
        layout_local_songs.setOnClickListener(this);
        return view;
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.ll_local_songs:
                Intent intent = new Intent(getActivity(),LocalSongsActivity.class);
                startActivity(intent);
                break;
        }
    }
}

这里由于目前功能只实现这么多，数据写的是虚拟的，也只完成对本地音乐列表的跳转