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

川长思鸟来 2022-04-17 02:43 355阅读 0赞

### TabLayout+ViewPager实现Android底部滑动 ###

*   *   *   *  项目介绍
             *  软件架构
             *  代码实现介绍

#### 项目介绍 ####

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

#### 软件架构 ####

软件架构说明

![输入图片说明][095300_9b4ffdc3_2269007.png]

#### 代码实现介绍 ####

**我们首先要添加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上右键**

![输入图片说明][095653_11d1acfd_2269007.png]

**2、选择**

**![粗体][095727_a5c43223_2269007.png]**

**3、点击**

![输入图片说明][100016_1cf48f51_2269007.png]

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

![输入图片说明][100258_68fec9e2_2269007.png]

**5、选择**

![输入图片说明][100409_0fa91270_2269007.png]

**6、检查选择正确点击OK**

![输入图片说明][100443_4f1b36f4_2269007.png]

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

![输入图片说明][100619_a5857843_2269007.png]

**8、创建布局**

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.maxd.demo.MainActivity">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager_parent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/line1"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:clickable="true"
            android:focusable="true"
            tools:ignore="RtlHardcoded" />
    
    
        <View
            android:id="@+id/line1"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@+id/tab_layout"
            android:background="@android:color/darker_gray"
    
            />
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:actionBarTabStyle="@color/colorWhite"
            android:background="@color/colorWhite"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorWhite"
            app:tabSelectedTextColor="@color/colorPrimary" />
    
    </RelativeLayout>

上面看到的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 主要负责底部的图片切换颜色**

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/button_wifi_click" android:state_selected="true"/>
        <item android:drawable="@drawable/button_wifi_click" android:state_pressed="true"/>
        <item android:drawable="@drawable/button_wifi" android:state_selected="false"/>
    
    
    
    
    </selector>

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/button_set_click" android:state_selected="true" />
        <item android:drawable="@drawable/button_set_click" android:state_pressed="true" />
        <item android:drawable="@drawable/button_set" android:state_selected="false" />
    
    
    
    
    </selector>

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

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:color="@color/colorBlue" android:state_selected="true" />
        <item android:color="@color/colorBlue" android:state_pressed="true" />
        <item android:color="@android:color/black" android:state_selected="false" />
    
    
    
    
    </selector>

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

[https_gitee.com_maxiaodong1996_Tablayout_viewPager_Demo.git]: https://gitee.com/maxiaodong1996/Tablayout_viewPager_Demo.git
[095300_9b4ffdc3_2269007.png]: /images/20220417/6d8b7df8aff94d7b940aee897bad4512.png
[095653_11d1acfd_2269007.png]: /images/20220417/947ad62fb56d459c8623a25279e9d7a1.png
[095727_a5c43223_2269007.png]: /images/20220417/49ccdf1bbc9347739610a681badf3760.png
[100016_1cf48f51_2269007.png]: /images/20220417/0b5b2d712d824db986d092a7285cc685.png
[100258_68fec9e2_2269007.png]: /images/20220417/b378c59824824b3e8af569c84bc32e00.png
[100409_0fa91270_2269007.png]: /images/20220417/b594c381262c4a838fe0cf58ac94111f.png
[100443_4f1b36f4_2269007.png]: /images/20220417/a897604f451548afadb7a6b451eaa589.png
[100619_a5857843_2269007.png]: /images/20220417/8979e2ae14d846889659cf79bec82544.png