Android实现顶部 底部双导航界面功能讲解Word文档下载推荐.docx
- 文档编号:20404745
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:18
- 大小:37.58KB
Android实现顶部 底部双导航界面功能讲解Word文档下载推荐.docx
《Android实现顶部 底部双导航界面功能讲解Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《Android实现顶部 底部双导航界面功能讲解Word文档下载推荐.docx(18页珍藏版)》请在冰豆网上搜索。
true"
layout_alignParentTop="
/FrameLayout>
view
50dp"
layout_alignParentBottom="
class="
android.support.v4.app.FragmentTabHost"
/>
/RelativeLayout>
其中我是直接拉的view所以是形成的FragmentTabHost
也可以直接在xml文件里面写
android.support.v4.view.FragmentTabHost>
/android.support.v4.view.FragmentTabHost>
这xml文件就一个view加一个tabview用来显示碎片,tab用来放置底部按钮的数量
再来是tab_foot.xml
?
xmlversion="
1.0"
encoding="
utf-8"
>
LinearLayoutxmlns:
background="
#F6F6F6"
gravity="
center"
orientation="
vertical"
ImageView
@+id/foot_iv"
wrap_content"
src="
@drawable/home1"
TextView
@+id/foot_tv"
layout_marginTop="
3dp"
text="
首页"
textColor="
@color/tab_color"
/LinearLayout>
这是每个底部按钮的布局设置的xml文件
显示效果。
再来是MainActivity的代码
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<
tabs.length;
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);
publicvoidonTabChanged(Stringarg0){
//从分割线中获得多少个切换界面
TabWidgettabw=mTabHost.getTabWidget();
tabw.getChildCount();
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类
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};
到此,底部导航栏就算是完全实现了。
--------------------------------------------------------------------------------------------------------------------------
现在来实现顶部导航栏,看了许多最后使用了RadioGroup+ViewPager来实现
首先是为第一个碎片设计一个xml布局
fm_one.xml
HorizontalScrollView
@+id/one_hv"
scrollbars="
none"
RadioGroup
@+id/one_rg"
horizontal"
/RadioGroup>
/HorizontalScrollView>
@+id/one_view"
0dp"
layout_weight="
1"
android.support.v4.view.ViewPager"
设置顶部导航栏和显示view
之后吧导航栏的每个项的布局
tab_rb.xml
RadioButtonxmlns:
@drawable/tab_rb_selector"
button="
@null"
paddingBottom="
10dp"
paddingLeft="
15dp"
paddingRight="
paddingTop="
今日"
/RadioButton>
其中设置selector文件来控制点击和未点击的状态
tab_rb_selector.xml
selectorxmlns:
!
--点击-->
itemandroid:
state_checked="
layer-list>
item>
shapeandroid:
shape="
rectangle"
strokeandroid:
width="
5dp"
color="
@color/tab_light_color"
/>
/shape>
/item>
bottom="
solidandroid:
#fff"
/layer-list>
--默认-->
shape>
#fafafa"
/selector>
设置了点击和默认的时候的显示状态
最后来实现OneFm类
importjava.util.ArrayList;
importjava.util.List;
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.ViewGroup;
importandroid.widget.HorizontalScrollView;
importandroid.widget.RadioButton;
importandroid.widget.RadioGroup;
importandroid.widget.RadioGroup.LayoutParams;
importandroid.widget.RadioGroup.OnCheckedChangeListener;
publicclassOneFmextendsFragmentimplementsOnPageChangeListener{
privateViewview;
privateRadioGrouprg_;
privateViewPagervp_;
privateHorizontalScrollViewhv_;
privateList<
Fragment>
newsList=newArrayList<
();
privateOneFmAdapteradapter;
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(){
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<
HTab>
hTabs=HTabDb.getSelected();
hTabs.size();
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_
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Android实现顶部 底部双导航界面功能讲解 Android 实现 顶部 底部 导航 界面 功能 讲解