1首先看layout
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="#ffffff" /> <com.tabbar.demo.lib.MainNavigateTabBar android:id="@+id/mainTabBar" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:background="@android:color/white" app:navigateTabSelectedTextColor="@color/colorAccent" 展示选中文字颜色 app:navigateTabTextColor="#333333" /> 默认文字颜色 <LinearLayout android:layout_width="match_parent" android:layout_height="76dp" android:layout_alignParentBottom="true" android:background="@android:color/transparent" android:gravity="center|top" android:orientation="vertical"> <ImageView android:id="@+id/iv_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/comui_tab_post" /> </LinearLayout> </RelativeLayout>
2 使用了开源组件 MainNavigateTabBar,但是这个组件是把fragment的切换写在组件内了,使用上不能和viewpager共用。所以做了下修改,具体代码如下。
package com.tabbar.demo.lib; import android.content.Context; import android.content.res.ColorStateList; import android.content.res.TypedArray; import android.os.Bundle; import android.text.TextUtils; import android.util.AttributeSet; import android.util.TypedValue; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import com.tabbar.demo.R; import java.util.ArrayList; import java.util.List; /** * User:Shine * Date:2015-10-29 * Description: */ public class MainNavigateTabBar extends LinearLayout implements View.OnClickListener { private static final String KEY_CURRENT_TAG = "com.startsmake.template。currentTag"; private List<ViewHolder> mViewHolderList; private OnTabSelectedListener mTabSelectListener; private OnTabItemClickListener mTabItemClickListener; private String mCurrentTag; private String mRestoreTag; /*选中的Tab文字颜色*/ private ColorStateList mSelectedTextColor; /*正常的Tab文字颜色*/ private ColorStateList mNormalTextColor; /*Tab文字的颜色*/ private float mTabTextSize; /*默认选中的tab index*/ private int mDefaultSelectedTab = 0; private int mCurrentSelectedTab; public MainNavigateTabBar(Context context) { this(context, null); } public MainNavigateTabBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MainNavigateTabBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MainNavigateTabBar, 0, 0); ColorStateList tabTextColor = typedArray.getColorStateList(R.styleable.MainNavigateTabBar_navigateTabTextColor); //选中时文字颜色 ColorStateList selectedTabTextColor = typedArray.getColorStateList(R.styleable.MainNavigateTabBar_navigateTabSelectedTextColor); //文字大小设置 mTabTextSize = typedArray.getDimensionPixelSize(R.styleable.MainNavigateTabBar_navigateTabTextSize, 0); mNormalTextColor = (tabTextColor != null ? tabTextColor : context.getResources().getColorStateList(R.color.tab_text_normal)); if (selectedTabTextColor != null) { mSelectedTextColor = selectedTabTextColor; } else { ThemeUtils.checkAppCompatTheme(context); TypedValue typedValue = new TypedValue(); context.getTheme().resolveAttribute(R.attr.colorPrimary, typedValue, true); mSelectedTextColor = context.getResources().getColorStateList(typedValue.resourceId); } mViewHolderList = new ArrayList<>(); } public void addTab(int position, TabParam tabParam) { int defaultLayout = R.layout.tabbar_item_view; if (TextUtils.isEmpty(tabParam.title) && tabParam.titleStringRes != 0) { tabParam.title = getContext().getString(tabParam.titleStringRes); } View view = LayoutInflater.from(getContext()).inflate(defaultLayout, null); view.setFocusable(true); ViewHolder holder = new ViewHolder(); holder.tabIndex = position; holder.tag = tabParam.title; holder.pageParam = tabParam; holder.tabIcon = (ImageView) view.findViewById(R.id.tab_icon); holder.tabTitle = ((TextView) view.findViewById(R.id.tab_title)); if (TextUtils.isEmpty(tabParam.title)) { holder.tabTitle.setVisibility(View.INVISIBLE); } else { holder.tabTitle.setText(tabParam.title); } if (mTabTextSize != 0) { holder.tabTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTabTextSize); } if (mNormalTextColor != null) { holder.tabTitle.setTextColor(mNormalTextColor); } if (tabParam.backgroundColor > 0) { view.setBackgroundResource(tabParam.backgroundColor); } if (tabParam.iconResId > 0) { holder.tabIcon.setImageResource(tabParam.iconResId); } else { holder.tabIcon.setVisibility(View.INVISIBLE); } if (tabParam.iconResId > 0 && tabParam.iconSelectedResId > 0) { view.setTag(holder); view.setOnClickListener(this); mViewHolderList.add(holder); } addView(view, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, 1.0F)); if (position == 0) { setCurrSelectedTabByTag(holder.tag); } } @Override public void onClick(View v) { Object object = v.getTag(); if (object != null && object instanceof ViewHolder) { ViewHolder holder = (ViewHolder) v.getTag(); if (mTabSelectListener != null) { setCurrSelectedTabByTag(holder.tag); if (mCurrentSelectedTab != holder.tabIndex) {//选中事件,屏弊已经选中callback mTabSelectListener.onTabSelected(holder); } if (mTabItemClickListener != null) {//点击事件 mTabItemClickListener.onTabClicked(holder); } mCurrentSelectedTab = holder.tabIndex; } } } /*设置当前选中tab的图片和文字颜色*/ private void setCurrSelectedTabByTag(String tag) { if (TextUtils.equals(mCurrentTag, tag)) { return; } for (ViewHolder holder : mViewHolderList) { if (TextUtils.equals(mCurrentTag, holder.tag)) { holder.tabIcon.setImageResource(holder.pageParam.iconResId); holder.tabTitle.setTextColor(mNormalTextColor); } else if (TextUtils.equals(tag, holder.tag)) { holder.tabIcon.setImageResource(holder.pageParam.iconSelectedResId); holder.tabTitle.setTextColor(mSelectedTextColor); } } mCurrentTag = tag; } public void setSelectedTabTextColor(ColorStateList selectedTextColor) { mSelectedTextColor = selectedTextColor; } public void setSelectedTabTextColor(int color) { mSelectedTextColor = ColorStateList.valueOf(color); } public void setTabTextColor(ColorStateList color) { mNormalTextColor = color; } public void setTabTextColor(int color) { mNormalTextColor = ColorStateList.valueOf(color); } public void onRestoreInstanceState(Bundle savedInstanceState) { if (savedInstanceState != null) { mRestoreTag = savedInstanceState.getString(KEY_CURRENT_TAG); } } public void onSaveInstanceState(Bundle outState) { outState.putString(KEY_CURRENT_TAG, mCurrentTag); } public static class ViewHolder { public String tag; public TabParam pageParam; public ImageView tabIcon; public TextView tabTitle; public android.support.v4.app.Fragment fragment; public int tabIndex; } public static class TabParam { public int backgroundColor = android.R.color.white; public int iconResId; public int iconSelectedResId; public int titleStringRes; public String title; public TabParam(int iconResId, int iconSelectedResId, String title) { this.iconResId = iconResId; this.iconSelectedResId = iconSelectedResId; this.title = title; } public TabParam(int iconResId, int iconSelectedResId, int titleStringRes) { this.iconResId = iconResId; this.iconSelectedResId = iconSelectedResId; this.titleStringRes = titleStringRes; } public TabParam(int backgroundColor, int iconResId, int iconSelectedResId, int titleStringRes) { this.backgroundColor = backgroundColor; this.iconResId = iconResId; this.iconSelectedResId = iconSelectedResId; this.titleStringRes = titleStringRes; } public TabParam(int backgroundColor, int iconResId, int iconSelectedResId, String title) { this.backgroundColor = backgroundColor; this.iconResId = iconResId; this.iconSelectedResId = iconSelectedResId; this.title = title; } } public interface OnTabSelectedListener { void onTabSelected(ViewHolder holder); } public interface OnTabItemClickListener { void onTabClicked(ViewHolder holder); } public void setTabSelectListener(OnTabSelectedListener tabSelectListener) { mTabSelectListener = tabSelectListener; } public void setDefaultSelectedTab(int index) { if (index >= 0 && index < mViewHolderList.size()) { mDefaultSelectedTab = index; } } public void setCurretSelectedTab(int index) { if (mCurrentSelectedTab == index && mCurrentSelectedTab != 0) { return; } for (ViewHolder holder : mViewHolderList) { if (mCurrentSelectedTab == holder.tabIndex) { holder.tabIcon.setImageResource(holder.pageParam.iconResId); holder.tabTitle.setTextColor(mNormalTextColor); } if (index == holder.tabIndex) { holder.tabIcon.setImageResource(holder.pageParam.iconSelectedResId); holder.tabTitle.setTextColor(mSelectedTextColor); } } mCurrentSelectedTab = index; } public int getCurrentSelectedTab() { return mCurrentSelectedTab; } public void setTabItemClickListener(OnTabItemClickListener mTabItemClickListener) { this.mTabItemClickListener = mTabItemClickListener; } }
3
mainActivy:代码如下:
package com.tabbar.demo.activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; import android.widget.Toast; import com.tabbar.demo.R; import com.tabbar.demo.adapter.HomeFragmentAdapter; import com.tabbar.demo.fragment.PageFragment; import com.tabbar.demo.lib.MainNavigateTabBar; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ImageView mIvAdd; private HomeFragmentAdapter adapter; private List<Fragment> fragmentList = new ArrayList<>(); private String[] titles = new String[]{"首页", "同城", "消息", "我的"}; private int[] normalImgs = new int[]{R.mipmap.comui_tab_home, R.mipmap.comui_tab_city, R.mipmap.comui_tab_message, R.mipmap.comui_tab_person}; private MainNavigateTabBar tabBar; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabBar = (MainNavigateTabBar) findViewById(R.id.mainTabBar); viewPager = (ViewPager) findViewById(R.id.viewPager); mIvAdd= (ImageView) findViewById(R.id.iv_add); tabBar.onRestoreInstanceState(savedInstanceState); doBusiness(savedInstanceState); } @Override protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); tabBar.onSaveInstanceState(outState); } public void doBusiness(Bundle saveInstance) { initFragment(); adapter = new HomeFragmentAdapter(getSupportFragmentManager(), this, titles, fragmentList); viewPager.setAdapter(adapter); viewPager.setOffscreenPageLimit(4); mIvAdd.setOnClickListener(this); // 使用第三方tabbar tabBar.onRestoreInstanceState(saveInstance); int length = titles.length + 1; for (int i = 0; i < length; i++) { int position = i; if (i > 2) { position = i - 1; } if (i != 2) { tabBar.addTab(position, new MainNavigateTabBar.TabParam(normalImgs[position], R.mipmap.ic_refresh, titles[position])); } else { tabBar.addTab(i, new MainNavigateTabBar.TabParam(0, 0, "")); } } tabBar.setTabSelectListener(new MainNavigateTabBar.OnTabSelectedListener() { @Override public void onTabSelected(MainNavigateTabBar.ViewHolder holder) { int position = holder.tabIndex; viewPager.setCurrentItem(position); } }); tabBar.setTabItemClickListener(new MainNavigateTabBar.OnTabItemClickListener() { @Override public void onTabClicked(MainNavigateTabBar.ViewHolder holder) { if (holder.tabIndex == tabBar.getCurrentSelectedTab()) { showToast("刷新" + holder.tabTitle.getText()); } } }); } private void initFragment() { fragmentList.add(PageFragment.newInstance(0)); fragmentList.add(PageFragment.newInstance(1)); fragmentList.add(PageFragment.newInstance(2)); fragmentList.add(PageFragment.newInstance(3)); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.iv_add: showToast("点击了add"); break; } } public void showToast(String text) { Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show(); } }
源码链接:点击打开链接
效果图: