备注:今天有空研究了一下fragmentTabHost实现底部菜单栏效果,点击和滑动的效果均已经实现,demo中注释掉的是仅仅点击情况下的效果,如果你点击和滑动两种情况都需要,那么请源码照搬,如果仅仅需要点击切换页面,那么可以把文中注释掉的demo释放,再将相关的viewPager方法注释掉就行。本文中实现的是类似于微信那样既可以点击,也可以滑动~~~
1.布局
1.1底部菜单每一个Tab的布局:tab_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:paddingTop="4dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:src="@drawable/tab_conversations"//是一个布局选择器,点击时展示自己需要的图片或背景
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/title"
android:text="首页"
android:gravity="center"
android:textSize="14sp"
android:textColor="@drawable/tab_title_color"//也是一个布局选择器
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
1.2 简单写一个背景选择器selector(其他类似):tab_conversations.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/ic_chat_01"></item>
<item android:drawable="@drawable/ic_chat_02"></item>
</selector>
1.3 activity的布局:activity_main.xml:(注:文中注释掉的是单纯的点击实现切换,需要的同鞋自行修改)
<?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:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<FrameLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!--<FrameLayout-->
<!--android:id="@+id/container_fragment"-->
<!--android:layout_width="fill_parent"-->
<!--android:layout_height="0dip"-->
<!--android:layout_weight="1" />-->
<!--<!–分割线–>-->
<!--<View-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="1px"-->
<!--android:background="#dcdcdc"-->
<!--/>-->
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/black" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
2.适配器:FragmentTabAdapter.java:
public class FragmentTabAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList;
public FragmentTabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void setData(List<Fragment> mFragmentList){
this.mFragmentList = mFragmentList;
notifyDataSetChanged();
}
}
3.MainActivity的写法:(再次强调:本文是实现了点击切换和滑动切换!!!仅仅实现点击切换的同鞋,释放文中注释掉的demo,并且注释viewPager相关的demo)
public class MainActivity extends AppCompatActivity {
private FragmentTabHost mTabHost;
private ViewPager mViewPager;
private List<Fragment> mFragmentList;
private FragmentTabAdapter mAdapter;
private int currentPosition;
private FragmentManager fragmentManager;
private Class mClass[] = {ConversationFragment.class, ContactsFragment.class, SettingFragment.class};
private Fragment mFragment[] = {new ConversationFragment(),new ContactsFragment(),new SettingFragment()};
private String mTitles[] = {"会话", "联系人", "设置"};
private int mImages[] = {
R.drawable.tab_conversations,
R.drawable.tab_contacts,
R.drawable.tab_setting,
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setDataToUI();
initEventListener();
}
private void initEventListener() {
mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
mViewPager.setCurrentItem(mTabHost.getCurrentTab());
}
});
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
TabWidget widget = mTabHost.getTabWidget();
int oldFocusability = widget.getDescendantFocusability();
widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
mTabHost.setCurrentTab(position);
widget.setDescendantFocusability(oldFocusability);
mTabHost.getTabWidget().getChildAt(position)
.setBackgroundColor(Color.GRAY);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setDataToUI() {
mTabHost.setup(this,getSupportFragmentManager(),R.id.view_pager);
// mTabHost.setup(this,getSupportFragmentManager(),R.id.container_fragment);
mTabHost.getTabWidget().setDividerDrawable(null);
for (int i = 0;i < mClass.length;i++){
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTitles[i]).setIndicator(getTabView(i));
mTabHost.addTab(tabSpec,mClass[i],null);
mTabHost.setTag(i);
Log.d("wang","mClass==========="+ mClass[i].toString());
mFragmentList.add(mFragment[i]);
Log.d("wang","mFragmentList[i]==========="+ mFragment[i].toString());
mTabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.GRAY);
}
Log.d("wang","mFragmentLists==========="+ mFragmentList.size());
mAdapter.setData(mFragmentList);
mViewPager.setAdapter(mAdapter);
}
private View getTabView(int i) {
View view = LayoutInflater.from(this).inflate(R.layout.tab_item,null);
ImageView image = (ImageView) view.findViewById(R.id.image);
TextView title = (TextView) view.findViewById(R.id.title);
image.setImageResource(mImages[i]);
title.setText(mTitles[i]);
return view;
}
private void initView() {
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mFragmentList = new ArrayList<Fragment>();
mAdapter = new FragmentTabAdapter(getSupportFragmentManager());
fragmentManager = getSupportFragmentManager();
}
// 选择Fragment
/* private void switchFragment(int target) {
if (target != currentPosition) {
Fragment targetFragment = mFragmentList.get(target);// 目标Fragment
Fragment currentFragment = mFragmentList.get(currentPosition);// 当前Fragment
if (!targetFragment.isAdded())
fragmentManager.beginTransaction().add(android.R.id.tabcontent, targetFragment).hide(currentFragment).commit();
else
fragmentManager.beginTransaction().show(targetFragment).hide(currentFragment).commit();
// 记录当前fragment位置
currentPosition = target;
}
}*/
4.最后再简单贴一个fragment:其余fragment都一样
public class ConversationFragment extends Fragment {
private View view;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//fangzhi每次FragmentTabHost切换fragment时会重新调用onCreateView()重新绘制UI。假如我们在onCreateView()中有网络操作,在切换的时候也会重复进行,这样当然不是我们希望的
if (view == null){
view = inflater.inflate(R.layout.conversation_main,container,false);
}
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null){
parent.removeView(view);
}
return view;
}
}
5.最后看一下效果图:
源码下载
总结:这是自己为了练手和学习,自己亲自尝试勒一下,比较麻烦,如果需要快速开发的同学,想立马集成该框架,给大家推荐一个github上面的框架,个人感觉非常好用和简便,只需要往进填充数据即可,地址: https://github.com/chenpengfei88/TabContainerView