Android 自定义底部导航栏 CustomizeTabLayout(支持访问网络图片、本地图片)

1,915 阅读1分钟
原文链接: www.jianshu.com

先看效果

网络图片(使用第三方库Glide加载图片)


GIF1.gif

本地图片


GIF2.gif

使用方法

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

activity_tab.xml



    

    


layout_coutomizetab_top.xml



    

    


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 mTabbeans = new ArrayList<>();
    private ArrayList 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 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 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

Glide需在build.gradle配置

dependencies {   
compile 'com.github.bumptech.glide:glide:3.7.0'
}

别忘记添加权限



以上贴出全部代码