打造 Android 网络音乐播放器 [2]

打造 Android 网络音乐播放器 [1]

前言

在上一篇中，我们把播放器的基本播放功能实现了，今天我们就把基本的界面实现以下吧。

目标

界面的话没打算实现太复杂的，就做现在比较流行的 Drawer+Tab+ViewPager 这种界面。下面给看效果。

目标效果

开码

Viewpager 部分

1.首先我们在 MainActivtiy 的布局里面添加一个 ViewPager

2.然后我们要继承 FragmentPagerAdapter 写一个 adapter

class MyPagerAdapter extends FragmentPagerAdapter {
    private Fragment[] fragments = new Fragment[]{
            TopListFragment.newInstance(),
            TopListFragment.newInstance(),
            TopListFragment.newInstance(),
            TopListFragment.newInstance()
    };

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "";
    }
    
    @Override
    public Fragment getItem(int position) {
        return fragments[position];
    }

    @Override
    public int getCount() {
        return fragments.length;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
    }
}

3.然后我们在创建一个 Fragment，现在用 Android studio 创建出来的都带 newInstance 了，真是贴心哈哈。Fragment 还不用写代码，就不贴了。
4.最后我们在 MainActivity 中把 adapter 设置到 viewpager 上就ok啦，在这里我用了 ButterKnife 完成了最控件的初始化，省写了findviewbyid。

https://github.com/JakeWharton/butterknife
ButterKnife，专门为Android View设计的绑定注解。

public class MainActivity extends BaseActivity {

    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.viewPager)
    ViewPager mViewPager;

    private MyPagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);
        setupViewPager();
    }

    private void setupViewPager() {
        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        ...
    }

}

ViewPager

Tab部分

1.我们接着实现这个 tab 的指示器，这个 tab 的实现我用了一个开源库 SmartTabLayout，轮子虽然好用，但是大家有时间还是去看一直人家内部是怎么实现的。

https://github.com/ogaclejapan/SmartTabLayout

2.首先还是在布局里面添加个 SmartTabLayout，这里我们就放在 AppBarLayout 里面。

3.然后我们回到 MainActivity，声明下 tab，然后在 setupViewPager() 里面机上两句设置的代码，就ok啦，用开源库实现，就是这么简单，就是这么炫酷。

public class MainActivity extends BaseActivity {
    ...
    @BindView(R.id.tab)
    SmartTabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        setupViewPager();
    }

    private void setupViewPager() {
        mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        mTabLayout.setCustomTabView(new SmartTabLayout.TabProvider() {
            final LayoutInflater inflater = LayoutInflater.from(mTabLayout.getContext());

            @Override
            public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {
                ImageView imageView = (ImageView) inflater.inflate(R.layout.tab_main_icon, container,
                        false);
                switch (position) {
                    case 0:
                        imageView.setImageResource(R.drawable.home_fill);
                        break;
                    case 1:
                        imageView.setImageResource(R.drawable.discover);
                        break;
                    case 2:
                        imageView.setImageResource(R.drawable.rank_fill);
                        break;
                    case 3:
                        imageView.setImageResource(R.drawable.people_fill);
                        break;
                }
                return imageView;
            }
        });
        mViewPager.setAdapter(mPagerAdapter);
        mTabLayout.setViewPager(mViewPager);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {
        ...
    }
}

Tab

Drawer

1.Drawer我这里也用的是开源库，MaterialDrawer，五千多个star，简单强大好用。

https://github.com/mikepenz/MaterialDrawer

2.我们这里先放两个上去，还没想好drawer里面要做什么。

 class MainActivity extends BaseActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        initDrawer();
    }

    private void initDrawer() {
        PrimaryDrawerItem item1 = new PrimaryDrawerItem().withName(R.string.app_name);
        SecondaryDrawerItem item2 = (SecondaryDrawerItem) new SecondaryDrawerItem().withName(R.string.app_name);

        new DrawerBuilder()
                .withActivity(this)
                .withToolbar(toolbar)
                .addDrawerItems(
                        item1,
                        new DividerDrawerItem(),
                        item2,
                        new SecondaryDrawerItem().withName(R.string.app_name)
                )
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                        // do something with the clicked item :D
                        return false;
                    }
                })
                .build();
    }

    ...

}

Drawer

总结

界面非常简单，下一节做读取网络数据的。

https://github.com/MASAILA/Oink/tree/eb5d6c3e280ab0dbcdb9f018272446a632477877
今天的代码在这~~