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

最新推荐文章于 2021-05-26 15:27:39 发布
最新推荐文章于 2021-05-26 15:27:39 发布
阅读量1.8k 收藏 3
点赞数 2
文章标签： Android FragmentTabHost ViewPager 导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g_ying_jie/article/details/78349734
版权

一、实现底部导航栏效果《类似于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(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;
    }

}

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


顾_小白
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
底部导航栏+ViewPager滑动翻页
07-03
1、这个Demo主要利用Fragment和ViewPager实现底部导航栏+ViewPager滑动翻页的效果。 2、相应的博文地址：https://blog.csdn.net/lpcrazyboy/article/details/80895607
Android使用RadioGroup实现底部导航栏
01-05
RadioGroup实现底部导航栏效果，如图:：   实现可最基本的导航栏功能，不能左右滑动，只能点击 1.内嵌的fragment的布局： <?xml version=1.0 encoding=utf-8?> android:orientation=vertical android:...
教你如何使用ViewPager+Fragment一步步打造顶部导航界面滑动效果
热门推荐
IT_ZJYANG的博客
06-04 1万+
最近在整理以前的知识点，重新碰到了以前项目中的一个滑动分页的效果，就打算写这么一篇文章分享一下ViewPager的经典使用 在许多应用中，我们常常用到这么一个效果： 可以看到，由于现在的应用数据经常需要涉及到多个模块，所以常常需要使用滑动标签在多个页面之间跳转，实现这样的效果有很多种方式（比如系统自带的tabhost控件），但android-support-v4包中还为我们
Android ViewPager和Fragment实现顶部导航界面滑动效果
xyjikl
05-28 1238
在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释，如图： 具体意思如下： Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑
使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
chenxiaoye5的博客
07-04 344
使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
Android ：ViewPager+Fragment 实现顶部导航滑动效果
katherine_qj的专栏
04-27 5481
我还不会gif 所以连图表动态 可以滑动的 仔细看底下有滑动条的这是寒假做的一个APP的基本框架 将真啊 虽然效果都做出来了可是学长给了源码啊 所以最近做第二遍！！希望每一个控件都可以实现啊 下面是viewpager+fragment的效果 同样我们先写布局文件 思路就是一个Viewpager适配了五个fragment 底下的选择框是RadioGroup 里面有五个radiobutto
android tabhost底部导航栏,FragmentTabHost FrameLayout实现底部导航栏
weixin_30975237的博客
05-26 218
app经常用到底部导航栏，早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现，现在基本使用FragmentTabHost+FrameLayout来实现，因为使用起来简单易用。下面写一个小例子简要地总结一下这个组合。首先，看一下例子的最终运行效果图这5个图标的效果其实都是一样的，只要做出来一个，以此类推就可以写出其他几个第一步，Fragment...
Android实现简单底部导航栏 Android仿微信滑动切换效果
08-29
主要为大家详细介绍了Android实现简单底部导航栏，Android仿微信滑动切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序顶部导航栏可滑动并选中放大
10-15
主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript实现滑动导航栏效果
10-19
主要为大家详细介绍了JavaScript实现滑动导航栏效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Fragment实现的顶部TabHost效果
09-28
使用Fragment实现的TabHost效果，挺简单的，可参考学习。
Android代码，TabHost+Fragment实现多标签页，可滑动切换
01-23
TabHostActivity在API 13之后就不能用了。 写了个Demo，用FragmentActivity + Tabhost实现多标签页，并添加滑动手势。 API=19，可运行
使用RadioGroup、Tablayout、反射和FragmentTabHost四种方式实现底部导航
05-26
详细总结了以上四种方式实现底部导航以及使用Tablayout实现顶部导航，也即是双导航
FragmentTabHost+Fragment实现底部导航栏，仿淘宝
09-09
此为示例代码，详细讲解请参考博文： http://blog.csdn.net/qq347198688/article/details/52475994 如对资源内容有疑问，请到博客中留言。
TabHost实现顶部菜单栏
12-26
使用tabhost实现顶部菜单栏，点击每个按钮对应不同的内容界面。
Android的FragmentTabHost使用总结(顶部或底部菜单栏)
drinkingcode
09-24 4498
前言： 我们经常看到一些app的自带一些标签，并且可以来回进行切换， 本章我们就通过FragmentTabHost来学习一下其如何实现，效果图如下： 步骤一： 编写布局文件 <android.support.v4.app.FragmentTabHost android:layout_width="match_parent" androi
Android两级导航菜单栏-FragmentTabHost和PagerSlidingTabStrip+ViewPager实现
03-29
Android两级导航菜单栏-FragmentTabHost和PagerSlidingTabStrip+ViewPager实现。主导航菜单栏使用FragmentTabHost，二级导航菜单栏使用PagerSlidingTabStrip+ViewPager实现。http://blog.csdn.net/yalinfendou博客中有详细介绍……
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
最新发布
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
view pager2怎么实现顶部导航栏的左右滑动
03-23
View Pager2 可以通过使用 TabLayout 实现顶部导航栏的左右滑动。具体实现方式如下： 1. 在 XML 布局文件中添加 TabLayout 和 ViewPager2： ``` android:id="@+id/tab_layout" android:layout_width="match_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值