Android -- FragmentTabHost实现微信底部切换
1,在商城类的项目中我们开始一个项目的时候经常出现这样的需求,如下图所示:
下面使用户可以切换的模块,上面是对应的模块的详细内容,实现这个效果有很多方式,可以使用radiobutton+fragment来实现,也可以用LinearLayout+fragment来实现,但是如何很快速的把我们的ui框架给搭建起来呢,今天就给大家介绍使用Fragment+FragmentTabHost来实现。
2,说一下FragmentTabHost实现的步骤吧:
①、Activity要继承FragmentActivity
②、调用FragmentTabHost的setup()方法
③、添加TabSpec
ok,那让我们一起来实现一下吧
首先,创建布局文件,可以看到,由于我们的fragment要放在FragmentTabHost的上面,所以创建了一个realtabcontent,但是官网给的给的FragmentTabHost的使用方法是必须在这个控件里面放一个fragment,那我们就来放一个假的fragment吧。布局代码如下:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="com.wangjitao.myfragmenttabhost.MainActivity">
- <FrameLayout
- android:id="@+id/realtabcontent"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1"
- android:background="@color/white"
- />
- <android.support.v4.app.FragmentTabHost
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:id="@+id/tabhost"
- android:background="@color/white"
- >
- <FrameLayout
- android:id="@android:id/tabhost"
- android:layout_width="0dp"
- android:layout_height="0dp"
- android:layout_weight="0"
- />
- </android.support.v4.app.FragmentTabHost>
- </LinearLayout>
然后我们要创建一个MainActivity,需要的是继承Fragment ,由于我们的AppCompatActivity是继承Fragment的(不知道的同学可以去看一下源码),所以我们直接去继承一下AppCompatActivity就行,这就实现了我们使用FragmentTabHost使用的第一个要求,然后找到我们的FragmentTabHost,调用其setup()方法
- mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
可以看到,第一个参数是上下文环境,第二个参数是我们的FragmentManager,第三个参数是要与我们FragmentTabHost切换的同步的Fragment,ok这样我们的第二个要求就写完成了。然后是我们的四三个要求,添加TabSpec,代码如下:
- mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
- mTabs.get(i).getFragment(), null);
首先我们要创建一个TabSpec,所以调用TabHost.newTabSpec(我们tab的title).setIndicator(对应的图标和文字的布局)
来看一下我们view的布局,很简单的,就是一个图标和一个textview
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center"
- android:gravity="center"
- android:orientation="vertical"
- android:paddingBottom="3dp"
- android:paddingTop="3dp"
- >
- <ImageView
- android:id="@+id/icon_tab"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <TextView
- android:id="@+id/txt_indicator"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="2dp"
- android:textColor="@color/selector_tab_text"
- />
- </LinearLayout>
ok,由于一个Tab对应的有一个title,一个icon,一个对应的fragment,所以我们可以把这个Tab抽出来,创建出来这个对象Tab.java
- package com.wangjitao.myfragmenttabhost.bean;
- /**
- * Created by jh on 2016/5/10.
- */
- public class Tab {
- private int title ;
- private int icon ;
- private Class fragment ;
- public Tab(int title, int icon, Class fragment) {
- this.title = title;
- this.icon = icon;
- this.fragment = fragment;
- }
- public int getTitle() {
- return title;
- }
- public void setTitle(int title) {
- this.title = title;
- }
- public int getIcon() {
- return icon;
- }
- public void setIcon(int icon) {
- this.icon = icon;
- }
- public Class getFragment() {
- return fragment;
- }
- public void setFragment(Class fragment) {
- this.fragment = fragment;
- }
- }
ok,这样的话加上我们的选择器和对应的fragment,代码基本上就ok了
就简单的贴一个例子选择器和fragment代码就行了
TabHome.java
- package com.wangjitao.myfragmenttabhost.fragment;
- 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.ViewGroup;
- import com.wangjitao.myfragmenttabhost.R;
- /**
- * Created by jh on 2016/5/10.
- */
- public class HomeFragment extends Fragment {
- @Nullable
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.tab_home, null);
- return view;
- }
- }
对应的图片的selector
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:drawable="@drawable/weixin_pressed" android:state_selected="true"/>
- <item android:drawable="@drawable/weixin_normal"/>
- </selector>
再加上对应的文字的selector
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:color="#0c760c" android:state_selected="true"/>
- <item android:color="#0c760c" android:state_active="true"/>
- <item android:color="#a9b7b7" android:state_selected="false"/>
- <item android:color="#a9b7b7" android:state_active="false"/>
- </selector>
MainActivity.java
- package com.wangjitao.myfragmenttabhost;
- import android.content.Context;
- import android.media.Image;
- import android.support.v4.app.FragmentTabHost;
- import android.support.v7.app.AppCompatActivity;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.widget.ImageView;
- import android.widget.LinearLayout;
- import android.widget.TextView;
- import com.wangjitao.myfragmenttabhost.bean.Tab;
- import com.wangjitao.myfragmenttabhost.fragment.AddressFragment;
- import com.wangjitao.myfragmenttabhost.fragment.FindFriendFragment;
- import com.wangjitao.myfragmenttabhost.fragment.HomeFragment;
- import com.wangjitao.myfragmenttabhost.fragment.SettingsFragment;
- import java.util.ArrayList;
- import java.util.List;
- public class MainActivity extends AppCompatActivity {
- private Context mContext = MainActivity.this ;
- private FragmentTabHost mTabHost ;
- private LayoutInflater mInflater ;
- private List<Tab> mTabs = new ArrayList<>();
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //1,activity 继承FragmentActivity AppCompatActivity本身就是继承的FragmentActivity
- //2,调用FragmentTabHost的setup方法
- // View view = mInflater.inflate(R.layout.tab_indicator,null) ;
- // ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
- // TextView tex = (TextView) view.findViewById(R.id.txt_indicator);
- //
- //
- // img.setImageResource(R.mipmap.tab_address_normal);
- // tex.setText("主页");
- //
- // mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(view), HomeFragment.class, null);
- initTab();
- }
- private void initTab() {
- mInflater = LayoutInflater.from(this);
- mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
- mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
- Tab tab_nome = new Tab(R.string.home,R.drawable.tab_weixin,HomeFragment.class) ;
- Tab tab_address = new Tab(R.string.address,R.drawable.tab_profile,AddressFragment.class) ;
- Tab tab_find_friend = new Tab(R.string.findfriend,R.drawable.tab_find,FindFriendFragment.class) ;
- Tab tab_setting = new Tab(R.string.setting,R.drawable.tab_contact_list,SettingsFragment.class) ;
- mTabs.add(tab_nome);
- mTabs.add(tab_address);
- mTabs.add(tab_find_friend);
- mTabs.add(tab_setting);
- for (int i = 0 ; i < mTabs.size() ;i++ ){
- View view = mInflater.inflate(R.layout.tab_indicator,null) ;
- ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
- TextView tex = (TextView) view.findViewById(R.id.txt_indicator);
- img.setImageResource(mTabs.get(i).getIcon());
- tex.setText(mTabs.get(i).getTitle());
- mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
- mTabs.get(i).getFragment(), null);
- }
- mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
- mTabHost.setCurrentTab(0);
- }
- }
ok ,这样就完全实现了,看一下效果图(丑哭了,找不到好的UI图 \流泪):
Android -- FragmentTabHost实现微信底部切换的更多相关文章
- Android:仿微信开场切换界面
这实例很多人仿做,好实例还是不容错过!最重要是素材容易拿~ 效果: 默认3页面的切换,最后一个页面带按钮,点击进入另外一个页面 思路: 1.准备5个布局页面,1个为主函数布局页面,3个为切换的页面(其 ...
- Android Fragment实现微信底部导航
1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
- [Android] Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单
Android 使用 FragmentTabHost + Fragment 实现 微信 底部菜单 利用FragmentTabHost实现底部菜单,在该底部菜单中,包括了4个TabSpec,每个TabS ...
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...
- <Android 基础(三十三)> TabHost ~ 仿微信底部菜单
简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...
- Android高仿qq及微信底部菜单的几种实现方式
最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...
- Android之fragment点击切换和滑动切换结合
学了一小段时间的Android,主要接触的是UI设计,打交道最多莫过于fragment了吧.在Android3.0引入了fragment的概念后,几乎在所以的Android的应用中都可以看见其身影,已 ...
- FragmentTabHostBottomDemo【FragmentTabHost + Fragment实现底部选项卡】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现底部选项卡效果. 备注:该Demo主要是演示FragmentTabHost的一些设置和部分功能 ...
- 用SQLite查看编辑android导出的微信聊天记录
上一篇我们已经能够完成文字版微信聊天记录导出android了,也即复制或剪切MicroMsg.db文件到电脑,以.db格式结尾的文件是数据库文件(database document),需要安装相关数据 ...
随机推荐
- cdecl和stdcall调用约定-汇编演示
. .model flat, stdcall .stack ExitProcess PROTO, dwExitCode:DWORD .data val2 sdword result dword ? . ...
- [Stanford 2011] Ordinary Calculator(By myself)
说明: 前面的RPN计算器是按照stanford课程做的,是后缀表达式的计算.现在这个计算器是自己做的.这个是一般的计算器,即中缀表达式的计算,而且把计算过程也显示在屏幕上, 设计方法: 在Model ...
- oracle 把一个用户的表结构导入到另一个用户下
create table AM_CONTENTS as select * from bizdata008.AM_CONTENTS where 1=2
- SQL Server 用SQL语句查找某个表的触发器
select * from sysobjects where xtype='TR' and parent_obj=object_id('表名') 再用sp_helptext ...
- Excel 的一些用法--行号赋给一列
1.鼠标选定要赋值的列 2.在 输入 =Row() 3. Ctrl+Enter
- 最近在用mvc3开发时遇到的一些小问题与解决方法....
问题一:控制器中的字符串如何显示在view的javascript中?例如ViewBag.str="1,2,3,4,5"; 解决办法:例如:<script type=" ...
- Redis实现分布式锁
http://redis.io/topics/distlock 在不同进程需要互斥地访问共享资源时,分布式锁是一种非常有用的技术手段. 有很多三方库和文章描述如何用Redis实现一个分布式锁管理器,但 ...
- php猴子称王或者约瑟夫难题
问题描述: 一群猴子排成一圈,按1,2,...,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去...,如此不停的进行下去,直到最后只剩下一只猴子为 ...
- 获取微信服务器IP地址
关键字:微信公众平台 微信服务器 IP地址 如果公众号基于安全等考虑,需要获知微信服务器的IP地址列表,以便进行相关限制,可以通过该接口获得微信服务器IP地址列表. 接口调用请求说明 http请求方式 ...
- WPF基础知识、界面布局及控件Binding
WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...