当前位置: 首页 > 编程笔记 >

android FragmentTabhost实现导航分页

弘靖琪
2023-03-14
本文向大家介绍android FragmentTabhost实现导航分页,包括了android FragmentTabhost实现导航分页的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了android FragmentTabhost导航分页展示的具体代码,供大家参考,具体内容如下

基本模板

public class MainActivity extends FragmentActivity {
  
  private FragmentTabHost mTabHost;
  private LayoutInflater mLayoutInflater;

  private Class mFragmentArray[] = { Fragment1.class, Fragment2.class,
      Fragment3.class, Fragment4.class, Fragment5.class };

  private int mImageArray[] = { R.drawable.tab_home_btn,
      R.drawable.tab_message_btn, R.drawable.tab_selfinfo_btn,
      R.drawable.tab_square_btn, R.drawable.tab_more_btn };

  private String mTextArray[] = { "首页", "消息", "好友", "搜索", "更多" };

  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
  }

  private void initView() {

    mLayoutInflater = LayoutInflater.from(this);

    // 找到TabHost
    mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
     mTabHost.getTabWidget().setDividerDrawable(null);//去除分割线
    // 得到fragment的个数
    for (int i = 0; i < mFragmentArray.length; i++) {
      // 给每个Tab按钮设置图标、文字和内容
      TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i])
          .setIndicator(getTabItemView(i));
      // 将Tab按钮添加进Tab选项卡中
      mTabHost.addTab(tabSpec, mFragmentArray[i], null);
      // 设置Tab按钮的背景
      mTabHost.getTabWidget().getChildAt(i)
          .setBackgroundResource(R.drawable.selector_tab_background);
    }
  }

  //给每个Tab按钮设置图标和文字
  private View getTabItemView(int index) {
    View view = mLayoutInflater.inflate(R.layout.tab_item_view, null);
    ImageView imageView = view.findViewById(R.id.imageview);
    //设置图片选择器,选中的tab改变图标
    switch (index){
      case 0:imageView.setImageResource(R.drawable.main_bottom_image_selector);break;
      case 1:imageView.setImageResource(R.drawable.main_bottom_image_selector2);break;
      case 2:imageView.setImageResource(R.drawable.main_bottom_image_selector3);break;
      case 3:imageView.setImageResource(R.drawable.main_bottom_image_selector4);break;
      case 4:imageView.setImageResource(R.drawable.main_bottom_image_selector5);break;
    }
    TextView textView = view.findViewById(R.id.textview);
    textView.setText(mTextArray[index]);
    //设置文本选择器,选中的tab文字高亮
    textView.setTextColor(R.drawable.main_bottom_text_selector);
    return view;
  }

}

acitivity_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" >

 <FrameLayout
  android:id="@+id/realtabcontent"
  android:layout_width="fill_parent"
  android:layout_height="0dip"
  android:layout_weight="1" />

 <android.support.v4.app.FragmentTabHost
  android:id="@android:id/tabhost" //必须使用提供的id
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" 
  android:background="@drawable/bg_tabhost_bg">

  <FrameLayout
   android:id="@android:id/tabcontent" //必须使用提供的id
   android:layout_width="0dp"
   android:layout_height="0dp"
   android:layout_weight="0" />      
 </android.support.v4.app.FragmentTabHost>

</LinearLayout>

tab_item_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="vertical">
  <ImageView
    android:id="@+id/imageview"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_margin="3dp"
    />
  <TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="1dp"
    android:textSize="12sp"
    android:layout_marginBottom="2dp"/>
</LinearLayout>

main_bottom_image_selector图片选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="false" android:drawable="@drawable/ic_launcher" />
  <item android:state_selected="true" android:drawable="@drawable/ic_launcher_round" />
</selector>

 注:模板有5个tab,需要5个图片选择器,还需要5个文本选择器,还需要创建5个fragment。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍javascript实现导航栏分页效果,包括了javascript实现导航栏分页效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现导航栏分页效果的具体代码,供大家参考,具体内容如下 1、结构搭建HTML代码 2、页面修饰的css样式代码 3、js代码 4、效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 7.2 导航实现 本节内容主要介绍导航的完整性实现,旨在掌握机器人导航的基本流程,该章涉及的主要内容如下: SLAM建图(选用较为常见的gmapping) 地图服务(可以保存和重现地图) 机器人定位 路径规划 上述流程介绍完毕,还会对功能进一步集成实现探索式的SLAM建图。 准备工作 请先安装相关的ROS功能包: 安装 gmapping 包(用于构建地图):sudo apt install ros

  • 本文向大家介绍Flutter实现底部导航,包括了Flutter实现底部导航的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Flutter实现底部导航的具体代码,供大家参考,具体内容如下 BottomNavigationBar使用 底部导航栏 主文件 main.dart (注意导入文件路径) 底部包含三个导航按钮,分别对应三个界面: firstPage.dart secondPage.

  • 本文向大家介绍Fullpage.js固定导航栏-实现定位导航栏,包括了Fullpage.js固定导航栏-实现定位导航栏的使用技巧和注意事项,需要的朋友参考一下 FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站)。除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸,包括平板电脑和移动设备。 开始制作自己的个人简历啦,决

  • 对于搜索引擎或电子商务网站,常常将信息分页显示,这样可以减少页面大小,进而提高页面的加载速度。分页显示后,就需要通过分页导航来告诉用户要浏览的信息量,方便用户快速跳过一些不想看的信息,也便于定位和查找。因此,分页导航也是很常见的、很重要的一种导航。 实际上,分页导航的制作方法也很简单。分页导航一般包括上一页、页码、下一页三部分。首先,创建一个容器,来包裹分页导航的链接。如: <div class

  • 本文向大家介绍jquery实现网页定位导航,包括了jquery实现网页定位导航的使用技巧和注意事项,需要的朋友参考一下 不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示。今天我就来讲讲这样的效果是如何实现的。  先贴上显示效果:  实现:  这

  • 本文向大家介绍bootstrap导航条实现代码,包括了bootstrap导航条实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了bootstrap导航条的具体代码,供大家参考,具体内容如下 效果: 导航条的其他样式: 效果: 如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题: Bootstrap学习教程 Bootstrap实战教程 Bootstrap Tab

  • 本文向大家介绍Flutter实现底部导航栏,包括了Flutter实现底部导航栏的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Flutter实现底部导航栏的具体代码,供大家参考,具体内容如下 效果 实现 先将自动生成的main.dart里面的代码删除, 创建app.dart作为首页的页面文件 创建today.dart、kb.dart、playground.dart三个页面文件作为ta