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

TabLayout+ViewPager实现Android底部滑动

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

项目介绍

通过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、创建布局

<?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 这个主要底部中单个的布局文件显示图片和文字的 **
`

<LinearLayout
    android:id="@+id/info"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/text_view"
        android:textColor="@drawable/nav_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
         />

</LinearLayout>

在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中的代码我已经写了备注了