要实现以下效果:
先上mainActivity:
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener, TabHost.OnTabChangeListener, View.OnTouchListener {
// @InjectView(android.R.id.tabhost)
// public MyFragmentTabHost mTabHost;
// @InjectView(R.id.quick_option_iv)
// View mAddBt;
//建两个全局变量，等下用它们获取layout里面的两个控件
private ViewPager vp;
private PagerSlidingTabStrip pst;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
initFramentHost();
View mAddBt = (View)findViewById(R.id.quick_option_iv);
// 中间按键图片触发,并且触发按键图片的selector资源
mAddBt.setOnClickListener(this);
mAddBt.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
return true;
}
});
//
}
private void initFramentHost() {
MyFragmentTabHost mTabHost = (MyFragmentTabHost) findViewById(android.R.id.tabhost);
// 初始化底部FragmentTabHost
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.setCurrentTab(0);
mTabHost.setOnTabChangedListener(this);
MainTab[] tabs = MainTab.values();
final int size = tabs.length;
for (int i = 0; i < size; i++) {
// 找到每一个枚举的Fragment对象
MainTab mainTab = tabs[i];
// 1. 创建一个新的选项卡
TabHost.TabSpec tab = mTabHost.newTabSpec(getString(mainTab.getResName()));
// ------------------------------------------------- 自定义选项卡 ↓
View indicator = LayoutInflater.from(getApplicationContext())
.inflate(R.layout.tab_indicator, null);
TextView title = (TextView) indicator.findViewById(R.id.tab_title);
Drawable drawable = this.getResources().getDrawable(
mainTab.getResIcon());
title.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null,
null);
if (i == 2) {
indicator.setVisibility(View.INVISIBLE);
mTabHost.setNoTabChangedTag(getString(mainTab.getResName()));
}
title.setText(getString(mainTab.getResName()));
tab.setIndicator(indicator);
Bundle bundle = new Bundle();
bundle.putString("key", "content: " + getString(mainTab.getResName()));
// 2. 把新的选项卡添加到TabHost中
mTabHost.addTab(tab, mainTab.getClz(), bundle);
mTabHost.getTabWidget().getChildAt(i).setOnTouchListener(this);
}
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
ToastUtil.showToast(this,"settings");
}
if(id == R.id.action_share){
ToastUtil.showToast(this,"share");
}
if(id == R.id.search){
ToastUtil.showToast(this,"search");
}
return super.onOptionsItemSelected(item);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
@Override
public void onClick(View view) {
}
@Override
public void onTabChanged(String s) {
}
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
return false;
}
}
mainActivity文件主要实现了自定义选项卡以及加载DrawerArrowDrawable，而加载FragmentTabHost 是在MainTab里面实现的：
/**
* 这里负责加载tabhost以及fragment
*/
public enum MainTab {
NEWS(0, R.string.main_tab_name_news, R.drawable.tab_icon_new,
NewsPagerFragment.class),//第三个参数是fragment代码
TWEET(1, R.string.main_tab_name_tweet, R.drawable.tab_icon_tweet,
TweetPagerFragment.class),
QUICK(2, R.string.main_tab_name_quick, R.drawable.tab_icon_new,
null),
EXPLORE(3, R.string.main_tab_name_explore, R.drawable.tab_icon_explore,
ExplorePagerFragment.class),
ME(4, R.string.main_tab_name_my, R.drawable.tab_icon_me,
DefaultFragment.class);
private int idx;
private int resName;
private int resIcon;
private Class<?> clz;
private MainTab(int idx, int resName, int resIcon, Class<?> clz) {
this.idx = idx;
this.resName = resName;
this.resIcon = resIcon;
this.clz = clz;
}
public int getIdx() {
return idx;
}
public void setIdx(int idx) {
this.idx = idx;
}
public int getResName() {
return resName;
}
public void setResName(int resName) {
this.resName = resName;
}
public int getResIcon() {
return resIcon;
}
public void setResIcon(int resIcon) {
this.resIcon = resIcon;
}
public Class<?> getClz() {
return clz;
}
public void setClz(Class<?> clz) {
this.clz = clz;
}
}
这样就实现了一个带有FragmentTabHost 和DrawerArrowDrawable的一个基本界面了。然后我们要给每一个Frament添加一个Viewpagerfragment,由于有三个Fragment我们没可能每次都写一次，所以就写一个基类：
package com.example.administrator.oschina.base;
//**
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.astuetz.PagerSlidingTabStrip;
import com.example.administrator.oschina.R;
import com.example.administrator.oschina.adapter.ViewPagerFragmentAdapter;
//*带有导航条的基类
// *
// *
// *
// */
public abstract class BaseViewPagerFragment extends Fragment {
private PagerSlidingTabStrip mTabStrip;
// private ViewPagerFragmentAdapter mTabsAdapter;
private ViewPager mViewPager;//展示内容用的滚动布局ViewPager
protected ViewPagerFragmentAdapter mTabsAdapter; // 封装了数据集合的ViewPager适配器
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// 填充并返回一个公共的包含导航条和ViewPager的界面
View view = inflater.inflate(R.layout.base_viewpage_fragment, null);
mTabStrip = (PagerSlidingTabStrip)view.findViewById(R.id.pager_tabstrip);
mViewPager = (ViewPager)view.findViewById(R.id.pager);
Toolbar toolbar = (Toolbar)view.findViewById(R.id.toolbar);
((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
// 1.封装adapter, 注意这里是继承的FragmentPagerAdapter,
// 并且传入的是getChildFragmentManager()
mTabsAdapter = new ViewPagerFragmentAdapter(getActivity(),getChildFragmentManager());
//2.添加page页
addPageToAdapter(mTabsAdapter);
//3.设置adapter
mViewPager.setAdapter(mTabsAdapter);
//4.绑定viewPager到Indicator
mTabStrip.setViewPager(mViewPager);
setScreenPageLimit(mViewPager);
}
/**
* 设置ViewPager能够缓存的页数
*/
protected void setScreenPageLimit(ViewPager mViewPager) {
mViewPager.setOffscreenPageLimit(mViewPager.getAdapter().getCount()-1);
}
/**
* 往Adapter中添加page
*
* @param fragmentAdapter
*/
protected abstract void addPageToAdapter(
ViewPagerFragmentAdapter fragmentAdapter);
}
写了一个基类之后想要为”综合“添加一个ViewpagerFragment就简单得多了:
public class NewsPagerFragment extends BaseViewPagerFragment {
@Override
protected void addPageToAdapter(ViewPagerFragmentAdapter fragmentAdapter) {
String[] titles = getActivity().getResources().getStringArray(
R.array.news_viewpage_arrays);//获取新闻tablayout的四个viewpager
//添加page,并给fragment传入对应的bundle参数，在请求接口的时候用
fragmentAdapter.addPage(titles[0], DefaultFragment.class, getBundle(NewsList.CATALOG_ALL));
fragmentAdapter.addPage(titles[1], DefaultFragment.class, getBundle(NewsList.CATALOG_WEEK));
fragmentAdapter.addPage(titles[2], DefaultFragment.class, getBundle(BlogList.CATALOG_LATEST));
fragmentAdapter.addPage(titles[3], DefaultFragment.class, getBundle(BlogList.CATALOG_RECOMMEND));
}
private Bundle getBundle(int newType) {//通过适配器得到要传输的值
Bundle bundle = new Bundle();
bundle.putInt(BaseListFragment.BUNDLE_KEY_CATALOG, newType);
bundle.putString("key", "我是综合里的: " + newType);
return bundle;
}
/**
* 基类会根据不同的catalog展示相应的数据
*
* @param catalog
* 要显示的数据类别
* @return
*/
private Bundle getBundle(String catalog) {
Bundle bundle = new Bundle();
// bundle.putString(BlogFragment.BUNDLE_BLOG_TYPE, catalog);
bundle.putString("key", "我是综合里的: " + catalog);
return bundle;
}
}同理可以把另外两个fragment的Viewpager也弄出来，其中由于笔者选择的是PagerSlidingTabSrip这个开源插件所以要在baseViewpagerfragment的xml文件上面加上pagerSlidingTabStrip:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:pstsTabPaddingLeftRight="http://schemas.android.com/tools"
android:orientation="vertical">
<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
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/pager_tabstrip"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@drawable/sliding_tab_strip_background"
app:pstsShouldExpand="true"
app:pstsIndicatorColor="@color/actionbar_background"
>
</com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
style="@style/fill_fill"
android:layout_below="@id/pager_tabstrip" >
</android.support.v4.view.ViewPager>
</LinearLayout>至此项目效果就差不多实现了，要想更详细的代码可以在以下地址查看:
https://github.com/600849155/OsChina