Android自定义底部导航栏CustomizeTabLayou

作者: 赫丹 | 来源:发表于2016-11-04 16:37 被阅读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" />

以上贴出全部代码

网友评论

XiuBryant:因为有占位图片的存在，所以第一次加载的时候会有闪烁的问题请问咋解决啊而且我已经预加载为了缓存点击切换的时候还是会闪烁
yuekong:TabBean 这个类没有啊
赫丹:public class TabBean {
private String title;
private String selectUrl;
private String unSelectUrl;
private int selectTextColor;
private int unSelectTextColor;
private int selectIcon;
private int unSelectIcon;

public TabBean(String title, String selectUrl, String unSelectUrl, int selectTextColor, int unSelectTextColor, int selectIcon, int unSelectIcon) {
this.title = title;
this.selectUrl = selectUrl;
this.unSelectUrl = unSelectUrl;
this.selectTextColor = selectTextColor;
this.unSelectTextColor = unSelectTextColor;
this.selectIcon = selectIcon;
this.unSelectIcon = unSelectIcon;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getSelectUrl() {
return selectUrl;
}

public void setSelectUrl(String selectUrl) {
this.selectUrl = selectUrl;
}

public String getUnSelectUrl() {
return unSelectUrl;
}

public void setUnSelectUrl(String unSelectUrl) {
this.unSelectUrl = unSelectUrl;
}

public int getSelectTextColor() {
return selectTextColor;
}

public void setSelectTextColor(int selectTextColor) {
this.selectTextColor = selectTextColor;
}

public int getUnSelectTextColor() {
return unSelectTextColor;
}

public void setUnSelectTextColor(int unSelectTextColor) {
this.unSelectTextColor = unSelectTextColor;
}

public int getSelectIcon() {
return selectIcon;
}

public void setSelectIcon(int selectIcon) {
this.selectIcon = selectIcon;
}

public int getUnSelectIcon() {
return unSelectIcon;
}

public void setUnSelectIcon(int unSelectIcon) {
this.unSelectIcon = unSelectIcon;
}
}

Android自定义底部导航栏CustomizeTabLayou

先看效果

网络图片（使用第三方库Glide加载图片）

本地图片

使用方法

xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配)

activity_tab.xml

layout_coutomizetab_top.xml

TabActivity

自定义Tab CustomizeTabLayout.java

如要配置鸿洋大神的完美适配需要extendsAutoFrameLayout

mTabLinearLayout=new LinearLayout(context); 修改成mTabLinearLayout=new AutoLinearLayout(context);即可

Glide需在build.gradle配置

别忘记添加权限

以上贴出全部代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android UI的收集

安卓

Android知识

Android 技术开发

Android开发实战总结

UI