Android自定义底部导航栏CustomizeTabLayou
2016-11-04 本文已影响1652人
赫丹
先看效果
网络图片（使用第三方库Glide加载图片）
GIF1.gif
本地图片
GIF2.gif
使用方法
xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配)
activity_tab.xml
<?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:id="@+id/activity_tab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.hightsstudent.highsstudent.ui.activity.TabActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<com.~~~~~~.CustomizeTabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#F1F1F1"
/>
</LinearLayout>
layout_coutomizetab_top.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10px"
android:paddingBottom="10px"
>
<ImageView
android:id="@+id/iv_tab_icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
/>
<TextView
android:id="@+id/tv_tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_tab_icon"
android:layout_centerHorizontal="true"
android:layout_marginTop="5px"
android:singleLine="true"
android:textSize="15sp" />
</RelativeLayout>
TabActivity
mTabbeans.add(new TabBean(mTitles[i], null,null, mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
TabBean参数详解
参数1：Tab标题文字
参数2：选中Tab的网络图片地址（null为不加载网络图片）
参数3：未选中Tab的网络图片地址（null为不加载网络图片）
参数4：选中Tab字体的颜色
参数5：未选中Tab字体的颜色
参数6：选中Tab的本地图片地址
参数7：未选中Tab的本地图片地址
public class TabActivity extends BaseActivity {
private ArrayList<TabBean> mTabbeans = new ArrayList<>();
private ArrayList<Fragment> mFragments = new ArrayList<>();
private String[] mTitles = {"首页", "关于", "消息", "我的"};
private int[] mUnSelectIcons = {
R.drawable.tab_home_unselect,R.drawable.tab_more_unselect, R.drawable.tab_speech_unselect, R.drawable.tab_contact_unselect};
private int[] mSelectIcons = {
R.drawable.tab_home_select,R.drawable.tab_more_select, R.drawable.tab_speech_select,R.drawable.tab_contact_select};
private int mSelectColor = Color.BLUE;
private int mUnSelectColor = Color.BLACK;
private String[] mSelectUrls={"http://pic38.nipic.com/20140307/2531170_074502124000_2.jpg",
"http://pic72.nipic.com/file/20150719/9583477_022559838000_2.jpg",
"http://img1.imgtn.bdimg.com/it/u=1283566983,3267885599&fm=21&gp=0.jpg",
"http://pic38.nipic.com/20140307/2531170_074502124000_2.jpg"};
private String[] mUnSelectUrls={"http://img.taopic.com/uploads/allimg/110419/2376-11041Z15S685.jpg",
"http://pic.taopic.com/uploads/allimg/140627/240424-14062G2544388-lp.jpg",
"http://pic42.nipic.com/20140628/19074191_112631798000_2.jpg",
"http://pic74.nipic.com/file/20150807/21290976_162220169617_2.jpg"};
private ViewPager mViewPager;
private CustomizeTabLayout mTabLayout;
@Override
protected int getOverridePendingTransitionMode() {
return RIGHT;
}
@Override
protected int getLayoutId() {
return R.layout.activity_tab;
}
@Override
protected void initView() {
mTabLayout = getView(R.id.tabLayout);
mViewPager = getView(R.id.vp_container);
for (int i = 0; i < mTitles.length; i++) {
// mTabbeans.add(new TabBean(mTitles[i], mSelectUrls[i],mUnSelectUrls[i], mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
mTabbeans.add(new TabBean(mTitles[i], null,null, mSelectColor, mUnSelectColor,mSelectIcons[i], mUnSelectIcons[i]));
}
mFragments.add(new HomeFragment());
mFragments.add(new TalkaboutFragment());
mFragments.add(new MessageFragment());
mFragments.add(new MineFragment());
}
@Override
protected void setListener() {
}
@Override
protected boolean isActionBar() {
return false;
}
@Override
protected void initDate() {
mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
initFragmentViewpager();
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
}
private void initFragmentViewpager() {
mTabLayout.setTabDate(mTabbeans);
mTabLayout.setmListener(new CustomizeTabLayout.OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
mViewPager.setCurrentItem(position, false);
}
/**
* 连续点击调用此方法
*/
@Override
public void onTabReselect(int position) {
}
});
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTabLayout.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
自定义Tab CustomizeTabLayout.java
如要配置鸿洋大神的完美适配需要extendsAutoFrameLayout
mTabLinearLayout=new LinearLayout(context); 修改成mTabLinearLayout=new AutoLinearLayout(context);即可
/**
* Created by Dengxiao on 2016/11/4.
*/
public class CustomizeTabLayout extends FrameLayout {
private LinearLayout mTabLinearLayout;
private Context mContext;
private ArrayList<TabBean> mTabBeans=new ArrayList<>();
private int mTabCount;
private int mCurrentTab;
private OnTabSelectListener mListener;
private int mLastTab;
public void setmListener(OnTabSelectListener mListener) {
this.mListener = mListener;
}
public CustomizeTabLayout(Context context) {
this(context,null,0);
}
public CustomizeTabLayout(Context context, AttributeSet attrs) {
this(context,attrs,0);
}
public CustomizeTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext=context;
mTabLinearLayout=new LinearLayout(context);
addView(mTabLinearLayout);
}
//添加导航栏数据
public void setTabDate(ArrayList<TabBean> tabBeans){
if (tabBeans == null || tabBeans.size() == 0) {
throw new IllegalStateException("TabEntitys can not be NULL or EMPTY !");
}
this.mTabBeans.clear();
this.mTabBeans.addAll(tabBeans);
notifyDataSetChanged();
}
//更新数据
private void notifyDataSetChanged() {
mTabLinearLayout.removeAllViews();
this.mTabCount=mTabBeans.size();
View tabView;
for(int i=0;i<mTabCount;i++){
tabView = View.inflate(mContext, R.layout.layout_coutomizetab_top, null);
tabView.setTag(i);
addTab(i,tabView);
}
setCurrentTab(0);
}
/** 创建并添加tab */
private void addTab(final int position, View tabView) {
TextView tv_tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
tv_tab_title.setText(mTabBeans.get(position).getTitle());
ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
int unSelectIcon = mTabBeans.get(position).getUnSelectIcon();
String unSelectUrl = mTabBeans.get(position).getUnSelectUrl();
String SelectUrl = mTabBeans.get(position).getSelectUrl();
if(android.text.TextUtils.isEmpty(unSelectUrl)||android.text.TextUtils.isEmpty(SelectUrl)){
iv_tab_icon.setImageResource(unSelectIcon);
}else{
Glide.with(mContext).load(unSelectUrl).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(unSelectIcon).into(iv_tab_icon);
}
tabView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
if (mCurrentTab != position) {
setCurrentTab(position);
if (mListener != null) {
mListener.onTabSelect(position);
}
} else {
if (mListener != null) {
mListener.onTabReselect(position);
}
}
}
});
LinearLayout.LayoutParams lp_tab = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1.0f);
mTabLinearLayout.addView(tabView, position, lp_tab);
}
public void setCurrentTab(int currentTab) {
mLastTab = this.mCurrentTab;
this.mCurrentTab = currentTab;
updateTabSelection(currentTab);
}
//更新tab
private void updateTabSelection(int position) {
for (int i = 0; i < mTabCount; ++i) {
View tabView = mTabLinearLayout.getChildAt(i);
final boolean isSelect = i == position;
TabBean tabBean = mTabBeans.get(i);
TextView tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
tab_title.setTextColor(isSelect ? tabBean.getSelectTextColor() :tabBean.getUnSelectTextColor());
ImageView iv_tab_icon = (ImageView) tabView.findViewById(R.id.iv_tab_icon);
if(android.text.TextUtils.isEmpty(tabBean.getSelectUrl())||android.text.TextUtils.isEmpty(tabBean.getUnSelectUrl())){
iv_tab_icon.setImageResource(isSelect ? tabBean.getSelectIcon() : tabBean.getUnSelectIcon());
}else{
Glide.with(mContext).load(isSelect?tabBean.getSelectUrl():tabBean.getUnSelectUrl()).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(isSelect?tabBean.getSelectIcon():tabBean.getUnSelectIcon()).into(iv_tab_icon);
}
}
}
public interface OnTabSelectListener {
void onTabSelect(int position);
void onTabReselect(int position);
}
}
Glide需在build.gradle配置
dependencies {
compile 'com.github.bumptech.glide:glide:3.7.0'
}
别忘记添加权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
