TabLayout+ViewPager实现Android底部滑动(附实现Demo)

项目介绍

通过Tablayout+ViewPager实现底部滑动的tab，让你快速脱坑
源码地址：https://gitee.com/maxiaodong1996/Tablayout_viewPager_Demo.git

软件架构

软件架构说明

代码实现介绍

我们首先要添加design的jar支持选择添加，和复制粘贴添加

复制粘贴添加 在app下的build.gradle中的dependencies中添加

版本号需要和你的下面这个一致

 implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support:design:26.1.0'

下面介绍的是从工具中手动操作视图添加流程 不过上面的我既然告诉你了那就是很简单的 下面的流程也是为了 上面那句话使用工具添加

1、在app上右键

2、选择

3、点击

4、选择加号选择弹出框中的第一个

5、选择

6、检查选择正确点击OK

7、打开app下的build.gradle检查画圈的版本号一样不 不一样就修改

8、创建布局

上面看到的android.support.design.widget.TabLayout 这个就是我们添加jar后才可以用的

9、创建Fragment

package com.maxd.demo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * to handle interaction events.
 * Use the {@link OneFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class OneFragment extends Fragment {
    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    // TODO: Rename and change types of parameters
    private String mParam1;
    public OneFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment OneFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static OneFragment newInstance(String param1, String param2) {
        OneFragment fragment = new OneFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.fragment_one, container, false);
        TextView textView = inflate.findViewById(R.id.text10);
        textView.setText(mParam1);
        return inflate;
    }




}

10、实现Activity代码

package com.maxd.demo;
import android.annotation.SuppressLint;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
    private ViewPager pager_parent;
    private TabLayout tabLayout;
    private final static String[] TITLE = {"首页", "我的"};
    private final static int[] IMAGE = {R.drawable.nav_home, R.drawable.nav_my};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager_parent = findViewById(R.id.pager_parent);
        tabLayout = findViewById(R.id.tab_layout);
        initView();
    }


    /**
     * 主要方法
     * IMAGE 中的是通过drawable实现 这个不难你要自己看看
     */
    private void initView() {
        //创建ViewPagerAdapter
        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        //给viewPager赋值adapter
        pager_parent.setAdapter(myViewPagerAdapter);
        //设置预加载页面数量的方法
        pager_parent.setOffscreenPageLimit(2);
        //设置默认位于第一个
        pager_parent.setCurrentItem(0);
        //设置tabLayout关联viewPager
        tabLayout.setupWithViewPager(pager_parent);
        //循环标题
        for (int i = 0; i < TITLE.length; i++) {
            //创建tab
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            //获取布局
            LayoutInflater layoutInflater = LayoutInflater.from(this);
            @SuppressLint("InflateParams") View view = layoutInflater.inflate(R.layout.tab_layout, null);
            ImageView imageView = (ImageView) view.findViewById(R.id.image_view);
            TextView textView = (TextView) view.findViewById(R.id.text_view);
            textView.setText(TITLE[i]);
            imageView.setImageResource(IMAGE[i]);

            assert tab != null;
            tab.setCustomView(view);
            //设置第一个选中
            if (tabLayout.getSelectedTabPosition() == 0) {
                tabLayout.getTabAt(0).getCustomView().setSelected(true);
                tab.setText(TITLE[i]);
            }
        }
    }

    /**
     * ViewPager设置适配器
     */
    public class MyViewPagerAdapter extends FragmentPagerAdapter {
        /**
         * Instantiates a new My view pager adapter.
         *
         * @param fm the fm
         */
        MyViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return OneFragment.newInstance("one1", "");
                case 1:
                    return OneFragment.newInstance("one2", null);
            }
            return null;
        }

        @Override
        public int getCount() {
            return 2;
        }
    }
}

11、实现资源文件代码

**在layout下创建tab_layout.xml 这个主要底部中单个的布局文件显示图片和文字的 **
`

`

在drawable下 创建nav_home.xml nav_my.xml 主要负责底部的图片切换颜色

在drawable下 创建nav_text.xml主要负责底部的字体切换颜色

基本就是上面这些 其他的就是颜色图片什么 具体你自己看项目吧 这个主要的业务还是activity中的代码我已经写了备注了