FragmentTabHost实现底部导航栏和顶部滑动导航

一、实现底部导航栏效果《类似于RadioGroup》



①MainActivity的xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent" >

<RelativeLayout
android:id="@+id/rl_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/colorPrimary" >

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="文件管理"
android:textColor="@color/white"
android:textSize="18sp" />

</RelativeLayout>

<RelativeLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/tablayout"
android:layout_below="@+id/rl_title" />

<android.support.v4.app.FragmentTabHost
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/light_gray">

<FrameLayout
android:id="@+id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</RelativeLayout>②MainActivity的代码

import android.support.v4.app.ActivityCompat;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
import com.dcg.blueocean.R;

public class FileManageActivity extends FragmentActivity{

private FragmentTabHost tabLayout;
private LayoutInflater layoutInflater;
//导航栏需要关联的fragment
private Class fragmentArray[] = { NearestFragment.class, FileFragment.class, PhotoFragment.class };
//导航栏显示的文字
private String[] titles = { "最近", "文件", "照片" };
//导航栏显示的小图标，可用select样式实现选中效果
private int[] icons = { R.drawable.tab_lately, R.drawable.tab_file, R.drawable.tab_picture };
//标题栏
private TextView tv_title;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_file_manager);
initView();
initTab();
}

private void initView() {
tabLayout = (FragmentTabHost) findViewById(R.id.tablayout);
layoutInflater = LayoutInflater.from(this);
tv_title = (TextView) findViewById(R.id.tv_title);

}

private void initTab() {
tabLayout.setup(this, getSupportFragmentManager(), R.id.container);
for (int i = 0; i < titles.length; i++) {
// 为每一个Tab按钮设置图标、文字和内容
TabSpec tabSpec = tabLayout.newTabSpec(titles[i]).setIndicator(getTabItemView(i));
// 将Tab按钮添加进Tab选项卡中
tabLayout.addTab(tabSpec, fragmentArray[i], null);
}
}

/**
* 给Tab按钮设置图标和文字
*/
private View getTabItemView(int index) {
View view = layoutInflater.inflate(R.layout.tab_item, null);
ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
imageView.setImageResource(icons[index]);
TextView textView = (TextView) view.findViewById(R.id.tab_name);
textView.setText(titles[index]);
return view;
}

}
③tab_item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/tab_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/tab_ic_file" />

<TextView
android:id="@+id/tab_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="文件"
android:textColor="@color/tab_text"
android:textSize="12sp" />

</LinearLayout>④图片选择器的样式，这里示范其中一个
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_ic_recent_selected" android:state_selected="true" />
<item android:drawable="@drawable/tab_ic_recent" />
</selector>⑤展示下其中一个fragment的代码

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class NearestFragment extends Fragment {
// 缓存Fragment view,防止来回切换重复加载fragment，非必须写法
private View rootView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (rootView == null) {
rootView = inflater.inflate(
bfd5
R.layout.fragment_nearest, container, false);
}
// 缓存的viewiew需要判断是否已经被加过parent，如果有parent需要从parent删除，要不然会发生这个view已经有parent的错误。
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null) {
parent.removeView(rootView);
}
initView(rootView);
return rootView;
}

private void initView(View view) {
//初始化布局
}

//可防止fragment重叠，如果出现来回切换导航栏多个fragment重叠可如下重写该方法
@Override
public void setMenuVisibility(boolean menuVisible) {
super.setMenuVisibility(menuVisible);
if (this.getView() != null) {
this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
}
}

}

二、FragmentTabHost+viewpager实现顶部滑动导航



①、MainActivity的布局xml

<LinearLayout 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="match_parent"
android:background="@color/white"
android:orientation="vertical">

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/tab_widget_bg"/>

<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>

</LinearLayout>


②MainActivity的代码
public class MainActivity extends FragmentActivity implements OnTabChangeListener,OnPageChangeListener{
private LayoutInflater myInflater;
private FragmentTabHost tabLayout;
private ViewPager vp;
private FileAdapter adapter;
private static final String[] IDS = {"frag_1", "frag_2", "frag_3", "frag_4", "frag_5"};
private List<String> ids = Arrays.asList(IDS);
private String[] titles = {"全部", "文档", "图片", "视频", "音乐"};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
myInflater=inflater;
View view = inflater.inflate(R.layout.fragment_file, container, false);
uid=SharePreferencesOperate.getInstance().ReadStringFromPreferences(getActivity(), "uid");
initView(view);
return view;
}

private void initView(View view) {
List<Fragment> list = new ArrayList<Fragment>(IDS.length);
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的文件").concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的图片").concat(File.separator)));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的视频")));
list.add(DetailFragment.newInstance(Constant.PID.concat(uid).concat(File.separator).concat("我的音乐").concat(File.separator)));

tabLayout = (FragmentTabHost) view.findViewById(android.R.id.tabhost);
tabLayout.setup(MainActivity.this, getChildFragmentManager(),android.R.id.tabcontent);

for (int i = 0; i < IDS.length; i++) {
tabLayout.addTab(tabLayout.newTabSpec(IDS[i]).setIndicator(createTabView(titles[i])),Fragment.class, null);
}
tabLayout.setOnTabChangedListener(this);

vp = (ViewPager) view.findViewById(R.id.main_viewpager);
adapter = new FileAdapter(list, getSupportFragmentManager());
vp.setAdapter(adapter);
vp.setOnPageChangeListener(this);
}

/**
* 创建tab View
*/
private View createTabView(String text) {
View tabView = myInflater.inflate(R.layout.file_tab, null);
TextView textView = (TextView) tabView.findViewById(R.id.tab_text);
textView.setText(text);
return tabView;
}

@Override
public void onTabChanged(String tabId) {
int position = ids.indexOf(tabId);
vp.setCurrentItem(position);
}

@Override
public void onPageScrollStateChanged(int arg0) {

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {
tabLayout.setCurrentTab(arg0);
}
}③file_tab布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/state_tabs_bg" >

<TextView
android:id="@+id/tab_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="@color/tab_widget_text"/>

</LinearLayout>④state_tabs_bg

<?xml version="1.0" encoding="utf-8"?>

<!-- tab每个标签背景 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true" android:drawable="@drawable/tabs_selected_bg" />

<item android:drawable="@drawable/tabs_normal_bg"></item>

</selector>

⑤tabs_selected_bg和tabs_normal_bg
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<shape>
<solid android:color="#1b58b1" />
</shape>
</item>
<item android:bottom="3dp">
<shape>
<solid android:color="#eeeeee" />
</shape>
</item>

</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<shape>
<solid android:color="#00000000" />
</shape>
</item>
<item android:bottom="1dp">
<shape>
<solid android:color="#eeeeee" />
</shape>
</item>

</layer-list>

⑥tab_widget_text

<?xml version="1.0" encoding="utf-8"?>

<!-- 标签页tab 文字切换颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true" android:color="#1b58b1"/>

<item android:color="#9d9d9d"/>

</selector>

⑦FileAdapter
package com.dcg.blueocean.ui.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
* Created by Gu on 2017/8/14.
*/

public class FileAdapter extends FragmentPagerAdapter {

private List<Fragment> fragmentList;

public FileAdapter(List<Fragment> fragmentList, FragmentManager fm) {
super(fm);
this.fragmentList = fragmentList;
}

@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}

@Override
public int getCount() {
return fragmentList != null ? fragmentList.size() : 0;
}

}


代码是从项目里面摘出来的，可能有些凌乱，谅解谅解。