android音乐播放器简书,打造 Android 网络音乐播放器 [2]

前言

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

目标

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

目标效果

开码

Viewpager 部分

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

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".ui.activites.MainActivity">

....

....

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

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。

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，轮子虽然好用，但是大家有时间还是去看一直人家内部是怎么实现的。

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

...

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

...

android:id="@+id/tab"

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="40dp"

app:stl_distributeEvenly="true"

app:stl_dividerColor="@color/transparent"

app:stl_dividerThickness="0dp"

app:stl_indicatorColor="@color/transparent"

app:stl_indicatorThickness="0dp"

app:stl_underlineColor="@color/transparent"

app:stl_underlineThickness="0dp"

/>

...

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，简单强大好用。

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

总结

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