前言
在上一篇中，我们把播放器的基本播放功能实现了，今天我们就把基本的界面实现以下吧。
目标
界面的话没打算实现太复杂的，就做现在比较流行的 Drawer+Tab+ViewPager 这种界面。下面给看效果。
目标效果
开码
Viewpager 部分
1.首先我们在 MainActivtiy 的布局里面添加一个 ViewPager
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
....
<android.support.v7.widget.Toolbar
....
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
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，轮子虽然好用，但是大家有时间还是去看一直人家内部是怎么实现的。
2.首先还是在布局里面添加个 SmartTabLayout，这里我们就放在 AppBarLayout 里面。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
...
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
...
<com.ogaclejapan.smarttablayout.SmartTabLayout
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"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
...
</android.support.design.widget.CoordinatorLayout>
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
总结
界面非常简单，下一节做读取网络数据的。
https://github.com/MASAILA/Oink/tree/eb5d6c3e280ab0dbcdb9f018272446a632477877
今天的代码在这~~
