效果如下:
首先,我们分为两层解决第一层是底部导航栏和fragment的一层,第二个我们把fragment里面加上fragment,viewpager,tablayout.
第一层的 MainActivit的布局如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
tools:context="com.example.oschina21.ui.activity.MainActivity">
<!--主界面 -->
<FrameLayout
android:id="@+id/fl_main_show_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<!--底部-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<android.support.v4.app.FragmentTabHost
android:id="@+id/ftab_main_bottom_layout"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<!--中间的按钮-->
<ImageView
android:layout_width="45dp"
android:id="@+id/iv_main_click"
android:layout_gravity="center"
android:src="@drawable/tab_icon_selector"
android:layout_height="45dp"/>
</FrameLayout>
</LinearLayout>
2.用一个帧布局封装数据
package com.shsany.oschinademo;
import com.shsany.oschinademo.ui.NewsFragment;
/**
* Created by ${WU} on 2018/1/22.
*/
public enum MainTabs {
//上面是数据
NEWS("NEWS", R.drawable.tab_icon_new, "综合", NewsFragment.class),
TWEET("TWEET", R.drawable.tab_icon_tweet, "动弹", TweetFragment.class),
SELECT("SELECT", R.drawable.tab_icon_selector, "弹一弹", NewsFragment.class),
FIND("FIND", R.drawable.tab_icon_explore, "发现", NewsFragment.class),
ME("ME", R.drawable.tab_icon_me, "我的", NewsFragment.class);
//构造的定义
public String mTag;
//图片
public int mIv;
//文字
public String mText;
//显示的class
public Class mClass;
MainTabs(String tag, int iv, String text, Class clss){
this.mTag = tag;
this.mIv = iv;
this.mText = text;
this.mClass = clss;
}
3.MainACtivity的代码如下
package com.example.oschina21.ui.activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
import com.example.oschina21.R;
import com.example.oschina21.bean.MainTabs;
import com.example.oschina21.utils.ToastUtil;
import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;
public class MainActivity extends BaseActivity {
@Bind(R.id.fl_main_show_layout)
FrameLayout mFlMainShowLayout;
@Bind(R.id.ftab_main_bottom_layout)
FragmentTabHost mFtabMainBottomLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
init();
}
//初始化而已
private void init() {
//与我们的fragemntLayout与fragmenttabhost进行绑定
mFtabMainBottomLayout.setup(this, getSupportFragmentManager(), R.id.fl_main_show_layout);
//添加页签
MainTabs[] mainTabses = MainTabs.values();
for (int i = 0; i < mainTabses.length; i++) {
addShowTab(mainTabses[i], i);
}
}
//添加一个条目
private void addShowTab(MainTabs mainTabse, int i) {
//给个指示器
TabHost.TabSpec tabSpce = mFtabMainBottomLayout.newTabSpec(mainTabse.mTag);//复用
//页签的内容
View view = View.inflate(this, R.layout.tab_indicator, null);
TextView title = (TextView) view.findViewById(R.id.tab_title);
ImageView icon = (ImageView) view.findViewById(R.id.iv_icon);
title.setText(mainTabse.mText);
icon.setImageResource(mainTabse.mIv);
//如果是中间的位置,那么我们进行隐藏
if (i == 2) {
view.setVisibility(View.INVISIBLE);
}
tabSpce.setIndicator(view);
Class<? extends Fragment> clss = mainTabse.mClass;
mFtabMainBottomLayout.addTab(tabSpce, clss, null);
//去掉分隔线
mFtabMainBottomLayout.getTabWidget().setDividerDrawable(null);
}
@OnClick(R.id.iv_main_click)
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.iv_main_click:
ToastUtil.showToast("中间被弹了");
break;
default:
break;
}
}
二.第二层的是fragment中加入fragment
1.封装好相关的信息
public class FragmentInfo {
//展示的fragment
public Fragment mFragment;
//显示的标题
public String title;
public FragmentInfo(Fragment fragment, String title) {
mFragment = fragment;
this.title = title;
}
}
2.建立一个基类,之后的所有展出的fragemnt都可以继承他
public abstract class BaseFragment extends Fragment {
//使用ui框架进行切换
private LoaderPager mLoaderPager;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//复用的问题,listview数据会重复添加的问题
if (mLoaderPager == null) {
mLoaderPager = new LoaderPager(getContext()) {
@Override
protected Object getNetData() {
return rquestData();//不能跟系统名或者已有的方法名重了
}
@Override
protected View createSuccessView() {
return getSuccessView();
}
};
}
return mLoaderPager;
}
//得到一个成功的view
protected abstract View getSuccessView();
//这个请求数据的方法,带了线程了
protected abstract Object rquestData();
//提取一个刷新数据的方法
public void refresh() {
mLoaderPager.loadData();
}
//开启fragment
public void startFragment(Class<? extends Fragment> fragmentClass, Bundle bundle, boolean isShowActionbar, String title, boolean isArrow, int titleLayout) {
Intent intent = new Intent(getContext(), ShowActivity.class);
intent.putExtra("classname", fragmentClass);
intent.putExtra("bundle", bundle);
intent.putExtra("isShowActionbar", isShowActionbar);
intent.putExtra("title", title);
intent.putExtra("isArrow", isArrow);
intent.putExtra("view", titleLayout);
startActivity(intent);
}
public void startFragment(Class<? extends Fragment> fragmentClass) {
startFragment(fragmentClass, new Bundle(), false, "", false,0);
}
public void startFragment(Class<? extends Fragment> fragmentClass,String title) {
startFragment(fragmentClass, new Bundle(), true, title, false,0);
}
public void startFragment(Class<? extends Fragment> fragmentClass,String title,Bundle bundle) {
startFragment(fragmentClass, bundle, true, title, false,0);
}
3.创建一个基类的tabLaout的基类,使导航栏切换时,都可以展示不同的tablaout
public abstract class BaseTablayoutFragment extends BaseFragment {
@Bind(R.id.tab_news_title_layout)
TabLayout mTabNewsTitleLayout;
@Bind(R.id.vp_news_show_layout)
ViewPager mVpNewsShowLayout;
private List mShowItems = new ArrayList<>();
@Override
protected View getSuccessView() {
View view = View.inflate(getContext(), R.layout.fragment_news, null);
ButterKnife.bind(this, view);
init();
return view;
}
private void init() {
//初始化标签
/* FragmentInfo fragmetinfo = new FragmentInfo();
fragmetinfo.mFragment = new BaseRecyclerViewFragment();
fragmetinfo.title = titles[0];
mShowItems.add(fragmetinfo);
FragmentInfo fragmetinfo1 = new FragmentInfo();
fragmetinfo1.mFragment = new BaseRecyclerViewFragment();
fragmetinfo1.title = titles[1];
mShowItems.add(fragmetinfo1);
FragmentInfo fragmetinfo2 = new FragmentInfo();
fragmetinfo2.mFragment = new BaseRecyclerViewFragment();
fragmetinfo2.title = titles[2];
mShowItems.add(fragmetinfo2);
FragmentInfo fragmetinfo3 = new FragmentInfo();
fragmetinfo3.mFragment = new BaseRecyclerViewFragment();
fragmetinfo3.title = titles[3];
mShowItems.add(fragmetinfo3);*/
mShowItems.addAll(getFragmentInfo());
//初始化viewpager
//fragment中的fragment使用getChildFragmentManager
mVpNewsShowLayout.setAdapter(new NewsTitleList(getChildFragmentManager(),mShowItems));
//让我们的tablayout与viewpager进行绑定
mTabNewsTitleLayout.setupWithViewPager(mVpNewsShowLayout);
//设置颜色
int selectColor = Color.parseColor("#0DB22E");
mTabNewsTitleLayout.setSelectedTabIndicatorColor(selectColor);
int norColor = Color.parseColor("#9E9E9E");
//文字的颜色
mTabNewsTitleLayout.setTabTextColors(norColor,selectColor);
//设置模式
// 滚动模式
// mTabNewsTitleLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// 均分模式,默认的
mTabNewsTitleLayout.setTabMode(TabLayout.MODE_FIXED);
//这个需要根据情况而定
//1. 如果是固定的小于等于4个,使用均分
//2. 如果大于4个使用滚动
//3. 如果后期可以动态添加的,那么4个以上就使用滚动
}
public abstract List<FragmentInfo> getFragmentInfo() ;
@Override
protected Object rquestData() {
return "";
}
3.在相应的导航图标的fragment添加fragment和title就可以实现相关主界面了
public class NewsFragment extends BaseTablayoutFragment {
@Override
public List<FragmentInfo> getFragmentInfo() {
List<FragmentInfo> fragmentInfos = new ArrayList<>();
String[] titles = Utils.getStringArray(R.array.general_viewpage_arrays);
fragmentInfos.add(new FragmentInfo(new NewFragment(), titles[0]));
fragmentInfos.add(new FragmentInfo(new BlogFragment(), titles[1]));
fragmentInfos.add(new FragmentInfo(new BlogFragment(), titles[2]));
fragmentInfos.add(new FragmentInfo(new ActiveFragment(), titles[3]));
return fragmentInfos;
}
}