Android-实现顶部底部双导航界面功能(DOC)

1、Android-实现顶部+底部双导航界面功能最近想弄一个双导航功能，查看了许多资料，总算是实现了功能，这边就算是给自己几个笔 记吧！先来看看效果头1S斥乐 悻 U 曲泾 魁卓 料疲 皿片 汽ft O冃 to. fc ta_那么就开始实现了！底部导航栏我选择用FragmentTabHost+Fragment 来实现，这个方法我觉得挺好用的，代码量也不多首先是开始的 activity_main .xmljava view pla in copy print?vRelativeLayout xml ns:a ndroid=http:/ ndroidxml ns:tools=http:/ droid:

2、layout_width=match_pare ntan droid:layout_height=match_pare nttools:co ntext=$relativePackage.$activityClass vFrameLayoutan droid:id=+id/main_viewan droid:layout_width=match_pare ntandroid:layout_height=match_parent android:layout_above=+id/main_tabandroid:layout_alignParentLeft=true android:layout_

3、alignParentTop=true 其中我是直接拉的 view 所以是形成的 FragmentTabHost 也可以直接在 xml 文件里面写 这xml 文件就一个 view 加一个 tab view 用来显示碎片， tab 用来放置底部按钮的数量 再来是tab_foot.xmljava view plain copy print?这是每个底部按钮的布局设置的xml 文件I(IMyNavigationft显示效果。再来是 Main Activity 的代码java view pla in copy print?package com.gj n.myn avigatio n;import a

4、n droid.os.B un dle;import an droid.support.v4.app.Fragme ntActivity;import an droid.support.v4.app.Fragme ntTabHost;import an droid.view.LayoutI nflater;import an droid.view.View;import an droid.view.Wi ndow;import an droid.widget.ImageView;import an droid.widget.TabWidget;import an droid.widget.Te

5、xtView;import an droid.widget.TabHost. On TabCha ngeListe ner;import an droid.widget.TabHost.TabSpec;public class Mai nActivity exte nds Fragme ntActivity impleme nts On TabCha ngeListe ner private Fragme ntTabHost mTabHost;Overrideprotected void on Create(B un dle savedI nsta nceState) super.o nCre

6、ate(savedl nsta nceState);requestWi ndowFeature(Wi ndow.FEATURE_NO_TITLE);setC onten tView(R.layout.activity_mai n);初始化 FragmentTabHostini tHost();初始化底部导航栏in itTab();/默认选中 mTabHost.onTabChanged(TabDb.getTabsTxt()0);private void initTab() String tabs = TabDb.getTabsTxt();for (int i = 0; i tabs.length

7、; i+) / 新建 TabSpecTabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()i); / 设置 viewView view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, null); (TextView)view.findViewById(R.id.foot_tv).setText(TabDb.getTabsTxt()i); (ImageView)view.findViewById(R.id.foot_iv).setImageResource(TabDb.ge

8、tTabsImg()i);tabSpec.setIndicator(view);/ 加入 TabSpec mTabHost.addTab(tabSpec,TabDb.getFramgent()i,null);/* 初始化 Host*/private void initHost() mTabHost = (FragmentTabHost) findViewById(R.id.main_tab); /调用setup 方法 设置 view mTabHost.setup(this,getSupportFragmentManager(),R.id.main_view); /去除分割线mTabHost.g

9、etTabWidget().setDividerDrawable(null);/监听事件 mTabHost.setOnTabChangedListener(this);Overridepublic void onTabChanged(String arg0) /从分割线中获得多少个切换界面 TabWidget tabw =mTabHost.getTabWidget();for (int i = 0; i tabw.getChildCount(); i+) View v = tabw.getChildAt(i);TextView tv = (TextView) v.findViewById(R.

10、id.foot_tv); ImageView iv = (ImageView)v.findViewById(R.id.foot_iv); /修改当前的界面按钮颜色图片 if (i =mTabHost.getCurrentTab() tv.setTextColor(getResources().getColor(R.color.tab_light_color);iv.setImageResource(TabDb.getTabsImgLight()i);elsetv.setTextColor(getResources().getColor(R.color.tab_color);iv.setImag

11、eResource(TabDb.getTabsImg()i);其中 TabDb 类是用来设置导航栏的数据和图片切换时候的资源以下是 TabDb 类java view plain copy print?package com.gjn.mynavigation;public class TabDb /* 获得底部所有项*/public static String getTabsTxt() String tabs = 首页,交易,地点,我的 ; return tabs;/* 获得所有碎片*/public static Class getFramgent()Class cls = OneFm.clas

12、s,TwoFm.class,ThreeFm.class,FourFm.class; return cls ;现在来实现顶部导航栏，看了许多最后使用了 RadioGroup+ViewPager 来实现 首先是为第一个碎片设计一个 xml 布局fm_one.xmljava view plain copy print?设置顶部导航栏和显示 view 之后吧导航栏的每个项的布局 tab_rb.xmljava view plain copy print?其中设置 selector 文件来控制点击和未点击的状态 tab_rb_selector.xmljava view plain copy print?

13、设置了点击和默认的时候的显示状态 最后来实现 OneFm 类 java view plain copyprint?package com.gjn.mynavigation;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.su

14、pport.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.HorizontalScrollView;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widge

15、t.RadioGroup.LayoutParams;import android.widget.RadioGroup.OnCheckedChangeListener;public class OneFm extends Fragment implements OnPageChangeListener private View view;private RadioGroup rg_;private ViewPager vp_;private HorizontalScrollView hv_;private List newsList = new ArrayList();private OneFm

16、Adapter adapter;Overridepublic View onCreateView(LayoutInflater inflater,Nullable ViewGroup container, Nullable Bundle savedInstanceState) if (view= null) / 初始化 viewview = inflater.inflate(R.layout.fm_one, container,false);rg_ = (RadioGroup) view.findViewById(R.id.one_rg);vp_ = (ViewPager) view.find

17、ViewById(R.id.one_view);hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv);/ 设置 RadioGroup 点击事件rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() Overridepublic void onCheckedChanged(RadioGroup group, int id) vp_.setCurrentItem(id););/初始化顶部导航栏initTab(inflater);/ 初始化 viewpagerinitV

18、iew();/* 底部导航栏切换后 由于没有销毁顶部设置导致如果没有重新设置view* 导致底部切换后切回顶部页面数据会消失等 bug* 以下设置每次重新创建 view 即可*/ViewGroup parent = (ViewGroup) view.getParent(); if (parent != null) parent.removeView(view);return view;/* 初始化 viewpager*/private void initView() List hTabs = HTabDb.getSelected();for (int i = 0; i hTabs.size()

19、; i+) OneFm1 fm1 = new OneFm1();Bundle bundle = new Bundle(); bundle.putString(name, hTabs.get(i).getName();fm1.setArguments(bundle);newsList.add(fm1);/设置 viewpager 适配器adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);vp_.setAdapter(adapter);/两个 viewpager 切换不重新加载 vp_.set

20、OffscreenPageLimit(2);/设置默认vp_.setCurrentItem(0);/设置 viewpager 监听事件 vp_.setOnPageChangeListener(this);/* 初始化头部导航栏* param inflater*/private void initTab(LayoutInflater inflater) List hTabs = HTabDb.getSelected();for (int i = 0; i hTabs.size(); i+) /设置头部项布局初始化数据RadioButton rbButton = (RadioButton) inf

21、later.inflate(R.layout.tab_rb, null);rbButton.setId(i); rbButton.setText(hTabs.get(i).getName();LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);/ 加入 RadioGroup rg_.addView(rbButton,params);/默认点击rg_.check(0);Overridepublic void onPageScrollStateChanged(int

22、arg0) Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) Overridepublic void onPageSelected(int id) setTab(id);/* 页面跳转切换头部偏移设置* param id*/private void setTab(int id) RadioButton rbButton = (RadioButton) rg_.getChildAt(id); /设置标题被点击rbButton.setChecked(true);/偏移设置int left = rbButton.ge

23、tLeft();int width = rbButton.getMeasuredWidth();DisplayMetrics metrics = new DisplayMetrics();getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics); intscreenWidth = metrics.widthPixels;/移动距离 = 左边的位置 + button 宽度的一半 - 屏幕宽度的一半 int len = left + width/ 2 - screenWidth / 2;/移动 hv_.smoo

24、thScrollTo(len, 0);其中有两个数据类和一个碎片类 数据类HTab.javajava view plain copy print?package com.gjn.mynavigation;* 头部 Tab 属性*/public class HTab private String name;public HTab(String name) super(); this.setName(name);public String getName() return name;public void setName(String name) = name;HTabDb.j

25、avajava view plain copy print?package com.gjn.mynavigation;import java.util.ArrayList;import java.util.List;public class HTabDb private static final List Selected = new ArrayList(); staticSelected.add(new HTab( 今日 );Selected.add(new HTab( 头条 );Selected.add(new HTab( 娱乐 );Selected.add(new HTab( 财经 );

26、Selected.add(new HTab( 军事 );Selected.add(new HTab( 科技 );Selected.add(new HTab( 时尚 );Selected.add(new HTab( 体育 );/* 获得头部 tab 的所有项 */public static List getSelected() return Selected;碎片类OneFm1.javajava view plain copy print?package com.gjn.mynavigation;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.Vi