Android-底部菜单实现（Fragment+ViewPage）

最新推荐文章于 2023-09-21 11:02:13 发布
最新推荐文章于 2023-09-21 11:02:13 发布
阅读量2.9k 收藏 7
点赞数
文章标签： Android 底部菜单 Fragment ViewPager tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lablenet/article/details/48542461
版权

1.回顾

  上篇已经了解过基本的思路 ，和推荐的使用Fragment+ViewPage实现 Android底部菜单tab

2.实现

  （1）业务实现

  （2）Adpater实现

  （3）布局实现

3.效果图


4. 布局实现

  4.1 top.xml 实现

<?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="50dp"
    android:orientation="vertical">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="无线"
        android:textColor="@android:color/white"
        android:textSize="20dp"
        android:gravity="center"
        android:background="@android:color/holo_blue_dark"/>



</LinearLayout>

  4.2 底部实现

     图片自己找 ，我就不分享了；

<?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="60dp"
    android:background="@android:color/background_light"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/linear_shouye"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <!-- 通过设置 ImageButton  android:clickable="false" 属性 ; 使其 没有点击的属性,不和 LinearLayout抢占点击事件 -->

        <ImageButton
            android:id="@+id/img_shouye"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_deal_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_xinxi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_xinxi"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_more_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="信息"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_gongju"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_gongju"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_user_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="工具"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linner_wo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_wo"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_poi_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

   4.3 主布局实现

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

   
    <include layout="@layout/top"/>
    
    
    <!-- 
    这里 使用 weight , 设置为 1 ,高度设置为 0dp后 就填充了 页面的剩余部分
     -->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_fragment_viewpage"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:background="#e9e9e9"
        android:layout_weight="1"
        >
        
        
    </android.support.v4.view.ViewPager>
    
    
    <include layout="@layout/buttom"/>
</LinearLayout>

  4.4 子页面 布局实现

     子页面通过 Fragment 进行加载实现；

<?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:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_four"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:text="ViewPager FourPage"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_fourpage"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="点击测试" />

</LinearLayout>


5.Fragment实现

   四个页面对应四个Fragment；

package com.example.framement;

import com.example.tabsdemo.R;

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

public class PageFourFragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View view=inflater.inflate(R.layout.vp_fourpage,container, false);
		
		TextView tv_four=(TextView) view.findViewById(R.id.tv_four);
		tv_four.setText("PageFourFragment");
		
		return view;
	}
	
}


6.FragmentPageStateAdapter实现

   注意：要实现 FragmentManager的构造方法 ，同时 不要删除 super(fm);

             

package com.example.adapter;

import java.util.List;

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

public class FragmentViewPageAdapter extends FragmentPagerAdapter {

	private List<Fragment> fragments;

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

	@Override
	public Fragment getItem(int arg0) {
		return fragments.get(arg0);
	}

	@Override
	public int getCount() {
		return fragments.size();
	}

	/**
	 * 下面的 instantiteItem和destroyItem两个方法 创建不需要修改
	 * 
	 */

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		return super.instantiateItem(container, position);
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		super.destroyItem(container, position, object);
	}

}


7.主业务实现

   注意：Activity 继承于 FragmentActivity 

             

package com.example.tabsdemo;

import java.util.ArrayList;
import java.util.List;

import com.example.adapter.FragmentViewPageAdapter;
import com.example.framement.PageFourFragment;
import com.example.framement.PageOneFragment;
import com.example.framement.PageThreeFragment;
import com.example.framement.PageTwoFragment;
import com.example.tabsdemo.PagerViewTagsActivity.vp_tabsOnChangeListener;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class FragmentAndViewpageActivity extends FragmentActivity implements OnClickListener {

	private ViewPager vp_fragment_viewpage;
	private LinearLayout linear_shouye, linear_xinxi, linear_wo, linear_gongju;

	private ImageButton img_shouye, img_xinxi, img_wo, img_gongju;

	private View one_page, two_page, three_page, four_page;

	private List<Fragment> fragments;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_fragment_and_viewpage);
		fragments = new ArrayList<Fragment>();
		InitView();
	}

	// 初始化工作
	private void InitView() {

		// 初始化 tabs
		vp_fragment_viewpage = (ViewPager) findViewById(R.id.vp_fragment_viewpage);
		linear_shouye = (LinearLayout) findViewById(R.id.linear_shouye);
		linear_gongju = (LinearLayout) findViewById(R.id.linear_gongju);
		linear_wo = (LinearLayout) findViewById(R.id.linner_wo);
		linear_xinxi = (LinearLayout) findViewById(R.id.linear_xinxi);

		img_gongju = (ImageButton) findViewById(R.id.img_gongju);
		img_shouye = (ImageButton) findViewById(R.id.img_shouye);
		img_wo = (ImageButton) findViewById(R.id.img_wo);
		img_xinxi = (ImageButton) findViewById(R.id.img_xinxi);

		// 初始化fragment 数据
		PageOneFragment pageOneFragment = new PageOneFragment();
		fragments.add(pageOneFragment);
		PageTwoFragment pageTwoFragment = new PageTwoFragment();
		fragments.add(pageTwoFragment);
		PageThreeFragment pageThreeFragment = new PageThreeFragment();
		fragments.add(pageThreeFragment);
		PageFourFragment fourFragment = new PageFourFragment();
		fragments.add(fourFragment);

		/**
		 * 这里Activity 只有继承 FragmentActivity 的时候 ，才会 getSupportFragmentManager()
		 */

		// 设置适配器
		FragmentViewPageAdapter fragmentViewPageAdapter = new FragmentViewPageAdapter(
				getSupportFragmentManager(), fragments);
		vp_fragment_viewpage.setAdapter(fragmentViewPageAdapter);
		
		
        //给tabs 设置点击监听事件
        linear_gongju.setOnClickListener(this);
        linear_shouye.setOnClickListener(this);
        linear_wo.setOnClickListener(this);
        linear_xinxi.setOnClickListener(this);
		
        
        //设置ViewPage 切换效果
        vp_fragment_viewpage.setOnPageChangeListener(new vpOnChangeListener());
        
	}

	@Override
	public void onClick(View v) {
		ResetTabsImg();
		switch (v.getId()) {
		case R.id.linear_shouye:
			SetTabsSelectedImg(0);
			break;
		case R.id.linear_gongju:
			SetTabsSelectedImg(2);
			break;
		case R.id.linner_wo:
			SetTabsSelectedImg(3);
			break;
		case R.id.linear_xinxi:
			SetTabsSelectedImg(1);
			break;
		}
		
	}
	
	/**
	 * (1)实现选中后的 tabs的img
	 * (2)切换 viewpager item
	 * @param i
	 */
	private void SetTabsSelectedImg(int i) {

		switch (i) {
		case 0:
			img_shouye.setImageResource(R.drawable.ic_menu_deal_on);
			break;
		case 1:
			img_xinxi.setImageResource(R.drawable.ic_menu_more_on);
			break;
		case 2:
			img_gongju.setImageResource(R.drawable.ic_menu_user_on);
			break;
		case 3:
			img_wo.setImageResource(R.drawable.ic_menu_poi_on);
			break;
		}
		
		//切换 viewpage item
		vp_fragment_viewpage.setCurrentItem(i);

	}
	
	/**
	 * 将 tabs 的 图片设置 默认颜色
	 */
	private void ResetTabsImg() {
		// 重置tab 图片
		img_gongju.setImageResource(R.drawable.ic_menu_user_off);
		img_shouye.setImageResource(R.drawable.ic_menu_deal_off);
		img_wo.setImageResource(R.drawable.ic_menu_poi_off);
		img_xinxi.setImageResource(R.drawable.ic_menu_more_off);
	}
	
	
	/**
	 * 实现滑动 切换 tabs
	 * @author yuan
	 */
	class vpOnChangeListener extends SimpleOnPageChangeListener{

		@Override
		public void onPageSelected(int position) {
			//设置 tab 背景
			ResetTabsImg();
			SetTabsSelectedImg(position);
		}
	}
	
	
}

8.demo 免积分下载

http://download.csdn.net/detail/lablenet/9116507



深夜独影
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
viewpage_fragment_多页面滑动效果.rar
09-28
viewpage_fragment_多页面滑动效果.rar
ViewPage的使用与介绍
yaojiangyu的博客
03-03 5886
介绍 1.Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包，越来越方便了。 2.Viewpager使用起来就是我们通过创建adapter给它填充多...
ViewPage的基本使用以及动画效果的添加
zccon的博客
03-31 7818
viewpage效果： 项目结构： layout1，layout2，layout3,是三个view视图的布局 代码实现： 1.activity_main.xml代码： 加入viewpage控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.and...
翻页类视图 ViewPager
威威的博客
11-04 1227
翻页类视图 ViewPager 用法解析
Android基础：ViewPage
在路上
03-07 3375
ViewPager
ViewPage+Fragment的使用，一个简单页面交互实现
qq_52678218的博客
05-21 2256
这是一个简单的主界面框架。主界面是 MainActivity。其中 11 底部包含了“首页”、“消息”、“笔记”和“我的”四个按钮，分别指向四个 Fragment 界面模块。 已知该项目使用了 ViewPage+Fragment 方式构建，其中“首页”、“消息”、 “笔记”和“我的”都是 Fragment。 一、ViewPage的使用 1.在XLML文件中(activity_main.xml)添加ViewPager，如下方法： <androidx.viewpager.widge
Android Fragment＋ViewPager 组合使用
行知致简的专栏
03-02 9739
Android Fragment＋ViewPager 组合，一些你不可不知的注意事项 2016年12月26日 09:26:30亦枫Blog阅读数：2069 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wenbitianxiafeng/article/details/53883587 前面两篇文章中，对 Fragment 的基本使用、...
android-Tab+Viewpage+Fragment实现导航源码
09-21
android-Tab+Viewpage+Fragment实现导航源码，0分下载
Tab+Viewpage+Fragment实现导航
10-20
Tab+Viewpage+Fragment实现导航源代码，是一个很不错的Android源码，有兴趣的伙伴们抽时间可以看一下把
Fragment+FragmentTabHost实现仿新浪微博底部菜单栏效果（源码）
06-03
Fragment+FragmentTabHost实现仿新浪微博底部菜单栏效果（源码）
纯代码实现android底部菜单栏fragment+button
06-23
一个纯代码实现的android底部菜单栏，动态加载，简单实用
fragment+viewpage实现Android界面设计
08-19
fragment+viewpage实现Android界面设计，底部菜单栏实现导航，界面可以活动切换，还是比较实用的。
【Android Framework系列】第15章 Fragment+ViewPager与Viewpager2相关原理
Yvan
09-21 787
ViewPager只能横向滚动，对应不同的Adapter效果不一样。范围外fragments会保存在内存中(detach)，但是fragment对应的View会被销毁，fragments对应的SavedState会保存，内存较大但页面切换更友好，适用于Fragment数量少的情况使用，范围外fragments不会保存在内存中(remove)，View也会被销毁。只保存范围内fragments对应的SavedState。这个SavedState在Fragment的生命周期回调中供外部传参数。
[kotlin]今天我们来说说Fragment简单用法和搭配ViewPage用法，希望对你有帮助！
qq_42467528的博客
03-03 1149
Fragment的简单使用
安卓基础之Fragment与ViewPager
wygsqsj的博客
09-02 2086
viewPager与Fragment的组合方式是可以说是当前App开发的标配，所以放在一篇博客中进行描述。 Fragment Fragment是Acttivity界面一个组成部分，基本上目前使用到多个页面的情况下都会用到，其实Fragment最大的作用是分担Activity的代码压力，为了后期维护方便，不把所有的代码罗列到一个Activity中。 构建Fragment 1.Activity布局文件...
Android 中的 ViewPager+ Fragment
来啊 快活啊
07-05 2312
android的Viewpager 的各种经常的用法，朋友问我要过，所以就稍微总结一下，ViewPager + Fragment 经常用到 代码是从 actionbarsherlock 中提取出来的，这个效果都知道是 滑动来切换的。直接上代码了在这里简单说明一下 FragmentStatePagerAdapter 和 FragmentPagerAdapter2个adapter 第一种 frag
Android中的Fragment与ViewPager的搭配使用，有没有问题重叠问题，怎么解决
QYgujingjing的专栏
07-22 870
Android中的Fragment与ViewPager的搭配使用，有没有问题重叠问题，怎么解决
Fragment和ViewPager的介绍和使用
qfzhangxu的博客
06-30 952
一、Fragment的介绍 在之前的学习和介绍中，已经介绍过Android中存在的碎片化的问题，并提出了一系列的适配方法和方案。为了解决碎片化的问题，在Android中提出了Fragement的概念，用于灵活适配不同的尺寸屏幕。 Fragment的英文单词的本意即是碎片、碎块、片段的意思，非常吻合Android中的碎片化概念。 具体来说，Fragment是Activity界面中的一部分，可理解为模块化的Activity。 特点 同Activity一样，依然来看一下Fragment有哪些特点： F
大学物理册答案上下都有
最新发布
04-26
大学物理册答案上下都有
fragment+viewpage实现页面切换
06-08
使用Fragment和ViewPager实现页面切换的步骤如下： 1. 创建Fragment：创建需要显示的Fragment，并实现Fragment的布局和逻辑。 2. 创建ViewPager：在主界面布局中添加ViewPager，并创建一个PagerAdapter（适配器）...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值