Android实现顶部+底部双导航界面功能.docx
- 文档编号:9703917
- 上传时间:2023-05-20
- 格式:DOCX
- 页数:21
- 大小:37.49KB
Android实现顶部+底部双导航界面功能.docx
《Android实现顶部+底部双导航界面功能.docx》由会员分享,可在线阅读,更多相关《Android实现顶部+底部双导航界面功能.docx(21页珍藏版)》请在冰点文库上搜索。
Android实现顶部+底部双导航界面功能
Android-实现顶部+底部双导航界面功能
最近想弄一个双导航功能,查看了许多资料,总算是实现了功能,这边就算是给自己几个笔记吧!
先来看看效果
那么就开始实现了!
底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法我觉得挺好用的,代码量也不多
首先是开始的activity_main.xml
[java]viewplaincopyprint?
android=" xmlns: tools=" android: layout_width="match_parent" android: layout_height="match_parent" tools: context="${relativePackage}.${activityClass}"> android: id="@+id/main_view" android: layout_width="match_parent" android: layout_height="match_parent" android: layout_above="@+id/main_tab" android: layout_alignParentLeft="true" android: layout_alignParentTop="true"> android: id="@+id/main_tab" android: layout_width="match_parent" android: layout_height="50dp" android: layout_alignParentBottom="true" android: layout_alignParentLeft="true" class="android.support.v4.app.FragmentTabHost"/> 其中我是直接拉的view所以是形成的FragmentTabHost 也可以直接在xml文件里面写 这xml文件就一个view加一个tabview用来显示碎片,tab用来放置底部按钮的数量 再来是tab_foot.xml [java]viewplaincopyprint? xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="match_parent" android: layout_height="match_parent" android: background="#F6F6F6" android: gravity="center" android: orientation="vertical"> android: id="@+id/foot_iv" android: layout_width="wrap_content" android: layout_height="wrap_content" android: src="@drawable/home1"/> android: id="@+id/foot_tv" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_marginTop="3dp" android: text="首页" android: textColor="@color/tab_color"/> 这是每个底部按钮的布局设置的xml文件 显示效果。 再来是MainActivity的代码 [java]viewplaincopyprint? packagecom.gjn.mynavigation; importandroid.os.Bundle; importandroid.support.v4.app.FragmentActivity; importandroid.support.v4.app.FragmentTabHost; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.Window; importandroid.widget.ImageView; importandroid.widget.TabWidget; importandroid.widget.TextView; importandroid.widget.TabHost.OnTabChangeListener; importandroid.widget.TabHost.TabSpec; publicclassMainActivityextendsFragmentActivityimplementsOnTabChangeListener{ privateFragmentTabHostmTabHost; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); //初始化FragmentTabHost initHost(); //初始化底部导航栏 initTab(); //默认选中 mTabHost.onTabChanged(TabDb.getTabsTxt()[0]); } privatevoidinitTab(){ String[]tabs=TabDb.getTabsTxt(); for(inti=0;i //新建TabSpec TabSpectabSpec=mTabHost.newTabSpec(TabDb.getTabsTxt()[i]); //设置view Viewview=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.getTabsImg()[i]); tabSpec.setIndicator(view); //加入TabSpec mTabHost.addTab(tabSpec,TabDb.getFramgent()[i],null); } } /*** *初始化Host */ privatevoidinitHost(){ mTabHost=(FragmentTabHost)findViewById(R.id.main_tab); //调用setup方法设置view mTabHost.setup(this,getSupportFragmentManager(),R.id.main_view); //去除分割线 mTabHost.getTabWidget().setDividerDrawable(null); //监听事件 mTabHost.setOnTabChangedListener(this); } @Override publicvoidonTabChanged(Stringarg0){ //从分割线中获得多少个切换界面 TabWidgettabw=mTabHost.getTabWidget(); for(inti=0;i Viewv=tabw.getChildAt(i); TextViewtv=(TextView)v.findViewById(R.id.foot_tv); ImageViewiv=(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]); }else{ tv.setTextColor(getResources().getColor(R.color.tab_color)); iv.setImageResource(TabDb.getTabsImg()[i]); } } } } 其中TabDb类是用来设置导航栏的数据和图片切换时候的资源 以下是TabDb类 [java]viewplaincopyprint? packagecom.gjn.mynavigation; publicclassTabDb{ /*** *获得底部所有项 */ publicstaticString[]getTabsTxt(){ String[]tabs={"首页","交易","地点","我的"}; returntabs; } /*** *获得所有碎片 */ publicstaticClass[]getFramgent(){ Class[]cls={OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class}; returncls; } /*** *获得所有点击前的图片 */ publicstaticint[]getTabsImg(){ int[]img={R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1}; returnimg; } /*** *获得所有点击后的图片 */ publicstaticint[]getTabsImgLight(){ int[]img={R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2}; returnimg; } } 到此,底部导航栏就算是完全实现了。 -------------------------------------------------------------------------------------------------------------------------- 现在来实现顶部导航栏,看了许多最后使用了RadioGroup+ViewPager来实现 首先是为第一个碎片设计一个xml布局 fm_one.xml [java]viewplaincopyprint? xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical"> android: id="@+id/one_hv" android: layout_width="match_parent" android: layout_height="wrap_content" android: scrollbars="none"> android: id="@+id/one_rg" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="horizontal"> android: id="@+id/one_view" android: layout_width="match_parent" android: layout_height="0dp" android: layout_weight="1" class="android.support.v4.view.ViewPager"/> 设置顶部导航栏和显示view 之后吧导航栏的每个项的布局 tab_rb.xml [java]viewplaincopyprint? xmlversion="1.0"encoding="utf-8"? > android=" android: layout_width="wrap_content" android: layout_height="wrap_content" android: background="@drawable/tab_rb_selector" android: button="@null" android: paddingBottom="10dp" android: paddingLeft="15dp" android: paddingRight="15dp" android: paddingTop="10dp" android: text="今日"> 其中设置selector文件来控制点击和未点击的状态 tab_rb_selector.xml [java]viewplaincopyprint? xmlversion="1.0"encoding="utf-8"? > android="> --点击--> state_checked="true"> shape="rectangle"> width="5dp"android: color="@color/tab_light_color"/> bottom="5dp"> shape="rectangle"> color="#fff"/> --默认--> color="#fafafa"/> 设置了点击和默认的时候的显示状态 最后来实现OneFm类 [java]viewplaincopyprint? packagecom.gjn.mynavigation; importjava.util.ArrayList; importjava.util.List; importandroid.os.Bundle; importandroid.support.annotation.Nullable; importandroid.support.v4.app.Fragment; importandroid.support.v4.view.ViewPager; importandroid.support.v4.view.ViewPager.OnPageChangeListener; importandroid.util.DisplayMetrics; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.HorizontalScrollView; importandroid.widget.RadioButton; importandroid.widget.RadioGroup; importandroid.widget.RadioGroup.LayoutParams; importandroid.widget.RadioGroup.OnCheckedChangeListener; publicclassOneFmextendsFragmentimplementsOnPageChangeListener{ privateViewview; privateRadioGrouprg_; privateViewPagervp_; privateHorizontalScrollViewhv_; privateList privateOneFmAdapteradapter; @Override publicViewonCreateView(LayoutInflaterinflater, @NullableViewGroupcontainer,@NullableBundlesavedInstanceState){ if(view==null){ //初始化view view=inflater.inflate(R.layout.fm_one,container,false); rg_=(RadioGroup)view.findViewById(R.id.one_rg); vp_=(ViewPager)view.findViewById(R.id.one_view); hv_=(HorizontalScrollView)view.findViewById(R.id.one_hv); //设置RadioGroup点击事件 rg_.setOnCheckedChangeListener(newOnCheckedChangeListener(){ @Override publicvoidonCheckedChanged(RadioGroupgroup,intid){ vp_.setCurrentItem(id); } }); //初始化顶部导航栏 initTab(inflater); //初始化viewpager initView(); } /* *底部导航栏切换后由于没有销毁顶部设置导致如果没有重新设置view *导致底部切换后切回顶部页面数据会消失等bug *以下设置每次重新创建view即可 */ ViewGroupparent=(ViewGroup)view.getParent(); if(parent! =null){ parent.removeView(view); } returnview; } /*** *初始化viewpager */ privatevoidinitView(){ List for(inti=0;i OneFm1fm1=newOneFm1(); Bundlebundle=newBundle(); bundle.putString("name",hTabs.get(i).getName()); fm1.setArguments(bundle); newsList.add(fm1); } //设置viewpager适配器 adapter=newOneFmAdapter(getActivity().getSupportFragmentManager(),newsList); vp_.setAdapter(adapter); //两个viewpager切换不重新加载 vp_.setOffscreenPageLimit (2); //设置默认 vp_.s
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Android 实现 顶部 底部 导航 界面 功能