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();
}
}
源码链接:点击打开链接
效果图: