前言
在上一篇中，我們把播放器的基本播放功能實現(xiàn)了负拟，今天我們就把基本的界面實現(xiàn)以下吧抓歼。
目標
界面的話沒打算實現(xiàn)太復雜的钞螟，就做現(xiàn)在比較流行的 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.然后我們在創(chuàng)建一個 Fragment卤恳，現(xiàn)在用 Android studio 創(chuàng)建出來的都帶 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.我們接著實現(xiàn)這個 tab 的指示器，這個 tab 的實現(xiàn)我用了一個開源庫 SmartTabLayout蓝牲，輪子雖然好用趟脂，但是大家有時間還是去看一直人家內(nèi)部是怎么實現(xiàn)的。
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啦咬最，用開源庫實現(xiàn)翎嫡，就是這么簡單，就是這么炫酷永乌。
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
總結
界面非常簡單绩脆，下一節(jié)做讀取網(wǎng)絡數(shù)據(jù)的。
https://github.com/MASAILA/Oink/tree/eb5d6c3e280ab0dbcdb9f018272446a632477877
今天的代碼在這~~
