1,在商城类的项目中我们开始一个项目的时候经常出现这样的需求,如下图所示:

下面使用户可以切换的模块,上面是对应的模块的详细内容,实现这个效果有很多方式,可以使用radiobutton+fragment来实现,也可以用LinearLayout+fragment来实现,但是如何很快速的把我们的ui框架给搭建起来呢,今天就给大家介绍使用Fragment+FragmentTabHost来实现。

2,说一下FragmentTabHost实现的步骤吧:

①、Activity要继承FragmentActivity

②、调用FragmentTabHost的setup()方法

③、添加TabSpec

ok,那让我们一起来实现一下吧

首先,创建布局文件,可以看到,由于我们的fragment要放在FragmentTabHost的上面,所以创建了一个realtabcontent,但是官网给的给的FragmentTabHost的使用方法是必须在这个控件里面放一个fragment,那我们就来放一个假的fragment吧。布局代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:orientation="vertical"
  8. tools:context="com.wangjitao.myfragmenttabhost.MainActivity">
  9.  
  10. <FrameLayout
  11. android:id="@+id/realtabcontent"
  12. android:layout_width="match_parent"
  13. android:layout_height="0dp"
  14. android:layout_weight="1"
  15. android:background="@color/white"
  16. />
  17. <android.support.v4.app.FragmentTabHost
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:id="@+id/tabhost"
  21. android:background="@color/white"
  22. >
  23. <FrameLayout
  24. android:id="@android:id/tabhost"
  25. android:layout_width="0dp"
  26. android:layout_height="0dp"
  27. android:layout_weight="0"
  28. />
  29. </android.support.v4.app.FragmentTabHost>
  30.  
  31. </LinearLayout>

然后我们要创建一个MainActivity,需要的是继承Fragment ,由于我们的AppCompatActivity是继承Fragment的(不知道的同学可以去看一下源码),所以我们直接去继承一下AppCompatActivity就行,这就实现了我们使用FragmentTabHost使用的第一个要求,然后找到我们的FragmentTabHost,调用其setup()方法

  1. mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

可以看到,第一个参数是上下文环境,第二个参数是我们的FragmentManager,第三个参数是要与我们FragmentTabHost切换的同步的Fragment,ok这样我们的第二个要求就写完成了。然后是我们的四三个要求,添加TabSpec,代码如下:

  1. mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
  2. mTabs.get(i).getFragment(), null);

首先我们要创建一个TabSpec,所以调用TabHost.newTabSpec(我们tab的title).setIndicator(对应的图标和文字的布局)

来看一下我们view的布局,很简单的,就是一个图标和一个textview

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:layout_gravity="center"
  6. android:gravity="center"
  7. android:orientation="vertical"
  8. android:paddingBottom="3dp"
  9. android:paddingTop="3dp"
  10. >
  11.  
  12. <ImageView
  13. android:id="@+id/icon_tab"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. />
  17.  
  18. <TextView
  19. android:id="@+id/txt_indicator"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_marginTop="2dp"
  23. android:textColor="@color/selector_tab_text"
  24. />
  25. </LinearLayout>

ok,由于一个Tab对应的有一个title,一个icon,一个对应的fragment,所以我们可以把这个Tab抽出来,创建出来这个对象Tab.java

  1. package com.wangjitao.myfragmenttabhost.bean;
  2.  
  3. /**
  4. * Created by jh on 2016/5/10.
  5. */
  6. public class Tab {
  7. private int title ;
  8. private int icon ;
  9. private Class fragment ;
  10.  
  11. public Tab(int title, int icon, Class fragment) {
  12. this.title = title;
  13. this.icon = icon;
  14. this.fragment = fragment;
  15. }
  16.  
  17. public int getTitle() {
  18. return title;
  19. }
  20.  
  21. public void setTitle(int title) {
  22. this.title = title;
  23. }
  24.  
  25. public int getIcon() {
  26. return icon;
  27. }
  28.  
  29. public void setIcon(int icon) {
  30. this.icon = icon;
  31. }
  32.  
  33. public Class getFragment() {
  34. return fragment;
  35. }
  36.  
  37. public void setFragment(Class fragment) {
  38. this.fragment = fragment;
  39. }
  40. }

ok,这样的话加上我们的选择器和对应的fragment,代码基本上就ok了

就简单的贴一个例子选择器和fragment代码就行了  

TabHome.java

  1. package com.wangjitao.myfragmenttabhost.fragment;
  2.  
  3. import android.os.Bundle;
  4. import android.support.annotation.Nullable;
  5. import android.support.v4.app.Fragment;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9.  
  10. import com.wangjitao.myfragmenttabhost.R;
  11.  
  12. /**
  13. * Created by jh on 2016/5/10.
  14. */
  15. public class HomeFragment extends Fragment {
  16. @Nullable
  17. @Override
  18. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  19. View view = inflater.inflate(R.layout.tab_home, null);
  20. return view;
  21. }
  22. }  

 对应的图片的selector

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.  
  4. <item android:drawable="@drawable/weixin_pressed" android:state_selected="true"/>
  5. <item android:drawable="@drawable/weixin_normal"/>
  6.  
  7. </selector>

再加上对应的文字的selector

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:color="#0c760c" android:state_selected="true"/>
  4. <item android:color="#0c760c" android:state_active="true"/>
  5. <item android:color="#a9b7b7" android:state_selected="false"/>
  6. <item android:color="#a9b7b7" android:state_active="false"/>
  7. </selector>

MainActivity.java

  1. package com.wangjitao.myfragmenttabhost;
  2.  
  3. import android.content.Context;
  4. import android.media.Image;
  5. import android.support.v4.app.FragmentTabHost;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.os.Bundle;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.widget.ImageView;
  11. import android.widget.LinearLayout;
  12. import android.widget.TextView;
  13.  
  14. import com.wangjitao.myfragmenttabhost.bean.Tab;
  15. import com.wangjitao.myfragmenttabhost.fragment.AddressFragment;
  16. import com.wangjitao.myfragmenttabhost.fragment.FindFriendFragment;
  17. import com.wangjitao.myfragmenttabhost.fragment.HomeFragment;
  18. import com.wangjitao.myfragmenttabhost.fragment.SettingsFragment;
  19.  
  20. import java.util.ArrayList;
  21. import java.util.List;
  22.  
  23. public class MainActivity extends AppCompatActivity {
  24.  
  25. private Context mContext = MainActivity.this ;
  26. private FragmentTabHost mTabHost ;
  27. private LayoutInflater mInflater ;
  28. private List<Tab> mTabs = new ArrayList<>();
  29. @Override
  30. protected void onCreate(Bundle savedInstanceState) {
  31. super.onCreate(savedInstanceState);
  32. setContentView(R.layout.activity_main);
  33.  
  34. //1,activity 继承FragmentActivity AppCompatActivity本身就是继承的FragmentActivity
  35.  
  36. //2,调用FragmentTabHost的setup方法
  37.  
  38. // View view = mInflater.inflate(R.layout.tab_indicator,null) ;
  39. // ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
  40. // TextView tex = (TextView) view.findViewById(R.id.txt_indicator);
  41. //
  42. //
  43. // img.setImageResource(R.mipmap.tab_address_normal);
  44. // tex.setText("主页");
  45. //
  46. // mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(view), HomeFragment.class, null);
  47.  
  48. initTab();
  49. }
  50.  
  51. private void initTab() {
  52. mInflater = LayoutInflater.from(this);
  53.  
  54. mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
  55. mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
  56.  
  57. Tab tab_nome = new Tab(R.string.home,R.drawable.tab_weixin,HomeFragment.class) ;
  58. Tab tab_address = new Tab(R.string.address,R.drawable.tab_profile,AddressFragment.class) ;
  59. Tab tab_find_friend = new Tab(R.string.findfriend,R.drawable.tab_find,FindFriendFragment.class) ;
  60. Tab tab_setting = new Tab(R.string.setting,R.drawable.tab_contact_list,SettingsFragment.class) ;
  61.  
  62. mTabs.add(tab_nome);
  63. mTabs.add(tab_address);
  64. mTabs.add(tab_find_friend);
  65. mTabs.add(tab_setting);
  66.  
  67. for (int i = 0 ; i < mTabs.size() ;i++ ){
  68. View view = mInflater.inflate(R.layout.tab_indicator,null) ;
  69. ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
  70. TextView tex = (TextView) view.findViewById(R.id.txt_indicator);
  71.  
  72. img.setImageResource(mTabs.get(i).getIcon());
  73. tex.setText(mTabs.get(i).getTitle());
  74.  
  75. mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
  76. mTabs.get(i).getFragment(), null);
  77. }
  78.  
  79. mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
  80. mTabHost.setCurrentTab(0);
  81. }
  82. }

 ok ,这样就完全实现了,看一下效果图(丑哭了,找不到好的UI图 \流泪):

 

  

  

 

  

 

  

Android -- FragmentTabHost实现微信底部切换的更多相关文章

  1. Android:仿微信开场切换界面

    这实例很多人仿做,好实例还是不容错过!最重要是素材容易拿~ 效果: 默认3页面的切换,最后一个页面带按钮,点击进入另外一个页面 思路: 1.准备5个布局页面,1个为主函数布局页面,3个为切换的页面(其 ...

  2. Android Fragment实现微信底部导航

    1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  3. [Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单

    Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单 利用FragmentTabHost实现底部菜单,在该底部菜单中,包括了4个TabSpec,每个TabS ...

  4. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  5. <Android 基础(三十三)> TabHost ~ 仿微信底部菜单

    简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...

  6. Android高仿qq及微信底部菜单的几种实现方式

    最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...

  7. Android之fragment点击切换和滑动切换结合

    学了一小段时间的Android,主要接触的是UI设计,打交道最多莫过于fragment了吧.在Android3.0引入了fragment的概念后,几乎在所以的Android的应用中都可以看见其身影,已 ...

  8. FragmentTabHostBottomDemo【FragmentTabHost + Fragment实现底部选项卡】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现底部选项卡效果. 备注:该Demo主要是演示FragmentTabHost的一些设置和部分功能 ...

  9. 用SQLite查看编辑android导出的微信聊天记录

    上一篇我们已经能够完成文字版微信聊天记录导出android了,也即复制或剪切MicroMsg.db文件到电脑,以.db格式结尾的文件是数据库文件(database document),需要安装相关数据 ...

随机推荐

  1. cdecl和stdcall调用约定-汇编演示

    . .model flat, stdcall .stack ExitProcess PROTO, dwExitCode:DWORD .data val2 sdword result dword ? . ...

  2. [Stanford 2011] Ordinary Calculator(By myself)

    说明: 前面的RPN计算器是按照stanford课程做的,是后缀表达式的计算.现在这个计算器是自己做的.这个是一般的计算器,即中缀表达式的计算,而且把计算过程也显示在屏幕上, 设计方法: 在Model ...

  3. oracle 把一个用户的表结构导入到另一个用户下

    create table AM_CONTENTS as select * from bizdata008.AM_CONTENTS where 1=2

  4. SQL Server 用SQL语句查找某个表的触发器

    select   *   from   sysobjects   where   xtype='TR'   and   parent_obj=object_id('表名') 再用sp_helptext ...

  5. Excel 的一些用法--行号赋给一列

    1.鼠标选定要赋值的列 2.在 输入 =Row() 3. Ctrl+Enter

  6. 最近在用mvc3开发时遇到的一些小问题与解决方法....

    问题一:控制器中的字符串如何显示在view的javascript中?例如ViewBag.str="1,2,3,4,5"; 解决办法:例如:<script type=" ...

  7. Redis实现分布式锁

    http://redis.io/topics/distlock 在不同进程需要互斥地访问共享资源时,分布式锁是一种非常有用的技术手段. 有很多三方库和文章描述如何用Redis实现一个分布式锁管理器,但 ...

  8. php猴子称王或者约瑟夫难题

    问题描述: 一群猴子排成一圈,按1,2,...,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去...,如此不停的进行下去,直到最后只剩下一只猴子为 ...

  9. 获取微信服务器IP地址

    关键字:微信公众平台 微信服务器 IP地址 如果公众号基于安全等考虑,需要获知微信服务器的IP地址列表,以便进行相关限制,可以通过该接口获得微信服务器IP地址列表. 接口调用请求说明 http请求方式 ...

  10. WPF基础知识、界面布局及控件Binding

    WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...