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图 \流泪）：
