android 底部导航总结

实现android 底部导航的方式有好几种如：fragment:、TabActivity、ViewGroup、viewPager等，

这里介绍使用viewPager实现底部导航。

先说说使用viewPager实现的原因

1、fragment

a  我们需要使用fragment的话，我们只能用v4包里面的fragment，因为我们需要向下兼容。

b  当我们用V4包里面的fragment的时候，系统会自动添加一个节点。

c  fragment不允许嵌套fragmentd  这个谷歌是在4.2里面才解决的。假如我的SDK的版本不进行更新的话，是找不到这个方法的。

android.support.v4.app的Fragment中找不到getChildFragmentManager()方法

2、viewPager:

a  因为使用起来方便。

3、TabActivity:

a TabActivity  过时，直接使用fragment 即可

b Activity是android里面的四大组件。是重量级的组件，fragment是android里面的片段，是特殊的view，他具备生命周期。

4、ViewGroup :

a ：属于低级组件。比较麻烦。

首先自定义懒加载的viewpager，目的是 ：不需要让viewpage默认加载下一页。

查看ViewPager的源码发现有这么一个变量DEFAULT_OFFSCREEN_PAGES   控制加载页面的个数

private static final int DEFAULT_OFFSCREEN_PAGES = 1;//默认加载page的大小

private int mOffscreenPageLimit = DEFAULT_OFFSCREEN_PAGES;

final int pageLimit = mOffscreenPageLimit;

final int startPos = Math.max(0, mCurItem - pageLimit);

final int N = mAdapter.getCount();

final int endPos = Math.min(N-1, mCurItem + pageLimit);

当DEFAULT_OFFSCREEN_PAGES＝1时  选择第一个pager时，即mCurItem ＝0时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝0

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝1

当DEFAULT_OFFSCREEN_PAGES＝1时  选择第二个pager时，即mCurItem ＝1时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝1

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝2

当DEFAULT_OFFSCREEN_PAGES＝1时  选择第三个pager时，即mCurItem ＝2时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝2

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝2

故若想实现不需要让viewpage默认加载下一页，只需更改变量值为0即可。

private static final int DEFAULT_OFFSCREEN_PAGES = 0;//默认的加载页面,ViewPager是1个,所以会加载两个Fragment

当DEFAULT_OFFSCREEN_PAGES＝0时  选择第一个pager时，即mCurItem ＝0时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝0

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝0

当DEFAULT_OFFSCREEN_PAGES＝0时  选择第二个pager时，即mCurItem ＝1时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝1

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝1

当DEFAULT_OFFSCREEN_PAGES＝0时  选择第三个pager时，即mCurItem ＝2时  假如说一共有3个页面 N＝3

startPos = Math.max(0, mCurItem - pageLimit);    startPos＝2

endPos = Math.min(N-1, mCurItem + pageLimit);  endPos＝2

解决了ViewPager预加载的问题，下面解决禁止ViewPager滑动

重写两个方法就可以禁止ViewPager滑动了，如果想实现可以滑动 将变量setTouchMode改为true即可。

<span style="white-space:pre">	</span>private boolean setTouchMode = false;
<span style="white-space:pre">	</span>@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		if (setTouchMode)
			return super.onInterceptTouchEvent(ev);
		else
			return false;
	}

<span style="white-space:pre">	</span>@Override
	public boolean onTouchEvent(MotionEvent ev) {
		if(setTouchMode)
		   return super.onTouchEvent(ev);
		else
			return false;
	}

下面是主页面的布局代码activity_main.xml

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

    <view
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1.0"
        class="com.yuweiguo.bottomnavibyviewpager.view.MyViewPager" />

    <RadioGroup
        android:id="@+id/main_radio"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        android:background="#133575"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingTop="2dp" >

        <RadioButton
            android:id="@+id/rb_navi"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/tab_selector1" />

        <RadioButton
            android:id="@+id/rb_routeplan"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/tab_selector2" />

        <RadioButton
            android:id="@+id/rb_location"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/tab_selector3" />

        <RadioButton
            android:id="@+id/rb_setting"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/tab_selector4" />
    </RadioGroup>

</LinearLayout>

MainActivity.java 源代码

package com.yuweiguo.bottomnavibyviewpager;

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

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;

import com.yuweiguo.bottomnavibyviewpager.base.BasePager;
import com.yuweiguo.bottomnavibyviewpager.pager.MessagePager;
import com.yuweiguo.bottomnavibyviewpager.pager.NaviPager;
import com.yuweiguo.bottomnavibyviewpager.pager.RouteplanPager;
import com.yuweiguo.bottomnavibyviewpager.pager.SearchPager;
import com.yuweiguo.bottomnavibyviewpager.view.LazyViewPager.OnPageChangeListener;
import com.yuweiguo.bottomnavibyviewpager.view.MyViewPager;

public class MainActivity extends Activity {
	private MyViewPager viewpager;
	private RadioGroup main_radio;
	private List<BasePager> pages = new ArrayList<BasePager>();
	private ViewPageAdapter viewPageAdapter;
	private int currentItem = R.id.rb_navi;
	private int oldPosition = 2;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewpager = (MyViewPager) findViewById(R.id.viewpager);
		main_radio = (RadioGroup) findViewById(R.id.main_radio);
		pages.clear();
		pages.add(new NaviPager(this));
		pages.add(new RouteplanPager(this));
		pages.add(new SearchPager(this));
		pages.add(new MessagePager(this));
		viewPageAdapter = new ViewPageAdapter(pages);
		viewpager.setAdapter(viewPageAdapter);
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				BasePager pager = pages.get(position);
				pager.onResume();
				pager.initData();
			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {

			}

			@Override
			public void onPageScrollStateChanged(int state) {

			}
		});
		main_radio.setOnCheckedChangeListener(new OnCheckedChangeListener() {

			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch (checkedId) {
				case R.id.rb_navi:
					if (oldPosition != 0) {
						pages.get(oldPosition).onPause();
						oldPosition = 0;
					}
					viewpager.setCurrentItem(0, false);
					break;
				case R.id.rb_routeplan:
					if (oldPosition != 1) {
						pages.get(oldPosition).onPause();
						oldPosition = 1;
					}
					viewpager.setCurrentItem(1, false);
					break;
				case R.id.rb_location:
					if (oldPosition != 2) {
						pages.get(oldPosition).onPause();
						oldPosition = 2;
					}
					viewpager.setCurrentItem(2, false);
					break;
				case R.id.rb_setting:
					if (oldPosition != 3) {
						pages.get(oldPosition).onPause();
						oldPosition = 3;
					}
					viewpager.setCurrentItem(3, false);
					break;
				}
				currentItem = checkedId;
			}
		});
		main_radio.check(currentItem);

	}

	@Override
	protected void onResume() {
		super.onResume();
		pages.get(oldPosition).onResume();
	}

	@Override
	protected void onPause() {
		super.onPause();
		pages.get(oldPosition).onPause();
	}

	public class ViewPageAdapter extends PagerAdapter {
		private List<BasePager> list;

		public ViewPageAdapter(List<BasePager> pages) {
			this.list = pages;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			((MyViewPager) container).removeView(list.get(position)
					.getRootView());
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			((MyViewPager) container).addView(list.get(position).getRootView(),
					0);
			return list.get(position).getRootView();
		}

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

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
	}

	@Override
	protected void onDestroy() {
		if (pages != null) {
			for (BasePager pager : pages) {
				pager.onDestroy();
			}
		}
		super.onDestroy();
	}

}

最后上效果图

最后  献上免费源码http://download.csdn.net/detail/gfbgl/8196027

时间： 2024-08-26 16:23:06

android 底部导航总结的相关文章

Android底部导航BottomNavigationBar

项目地址: https://github.com/Ashok-Varma/BottomNavigation 参考 1.http://www.jianshu.com/p/0550500f8f56 2.http://blog.csdn.net/qq_16131393/article/details/51419901 1.样式 底部导航的action通常是3-5个,小于3个推荐使用tab,大于三个推荐使用navigation drawer 在切换的时候,使用cross-fade动画,避免视图间的横向移

Android底部导航栏

Android UI-仿微信底部导航栏布局 Android基础入门教程——5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

Android 底部导航 UI框架

此版本在"一个不错的UI框架"基础上修改了首次启动底部导航没有选中Tab的情况 运行效果图如下: 1.TabView.java 这里修改的是mState=-1 /******************************************************************************* * * Copyright (c) Weaver Info Tech Co. Ltd * * TabView * * app.ui.widget.TabView.jav

Android 底部导航栏的使用 fragment

一.初始化各项组件 private void initViews() { viewPager = (ViewPager) findViewById(R.id.view_pager); imgDynamic = (ImageView) findViewById(R.id.tab_dynamic_get); imgMsg = (ImageView) findViewById(R.id.tab_msg_get); imgExam = (ImageView) findViewById(R.id.tab_

Android 底部导航菜单

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="65.32999dip" android:layout

Android底部导航中间突起

看到很多应用下面都有一些特别突出的导航菜单,中间凸起的那种,自己分享一个项目里的吧!如下图: 源码如下: 点击打开链接 版权声明:本文为博主原创文章,未经博主允许不得转载.

Android 底部导航栏的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" xmlns:tools="http://schemas.android

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码:

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码: &