Tablayout+ViewPager+Fragment实现一个标题会跟着滑动的左右滑动界面+Expandable可折叠的内容

 

 主要思路流程就是主页做一个Tablayout和ViewPager，然后创建三个Fragment，在主类中创建一个泛型为Frament的集合把三个Fragment放进去，然后建一个String类型的集合放进去标题，注意如果ViewPager内容用的是Fragment的话需要专门的适配器FragmentPagerAdapter，然后把数据填进去就好了。

做的时候有几个难点卡了好久，毕竟零基础还没有老师，什么都靠百度。

一个是适配器FragmentPagerAdapter，一开始怎么写都不行怎么写都报红，百度了好久试了很多办法最后找到一个，括号内填一个getSupportFragmentManager()

  /**
         * Fragment放进viewpager的适配器
         */
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }

            /**
             * 设置标题
             * @param position
             * @return
             */
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return title.get(position);
            }
        });
        tabLayout.setupWithViewPager(viewPager);



    }

另一个难点就是一开始Tablayout标题用什么方法都不显示，也是找了好久发现原来FragmentPagerAdapter适配器就自带一个填充标题的方法，只需要重写一个，然后在方法内绑定两个组件就好了

 /**
             * 设置标题
             * @param position
             * @return
             */
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return title.get(position);
            }
        });
        tabLayout.setupWithViewPager(viewPager);



    }

自学没有老师就是这么难

还有一个拦路虎也是卡了我很久，就是Fragment里面我不会绑定组件，最后也是发现需要重写方法

/**
     * 这个方法是fragment在acticity加载之后开始的方法，
     * 上面的方法因为运行的时候view还没运行所以会找不到控件
     * 使用的时候记得前面加一个getView（）不然会报错
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //  initData();
        listView =getView().findViewById(R.id.listView);
        listView.setAdapter(new MyExpandble());

    }

 

下面是完整代码

主类

package com.example.myapplication;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    TabLayout tabLayout;
    List<Fragment> fragments = new ArrayList<>();
    ArrayList<String> title = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initview();
    }
    private void initview() {
        tabLayout = findViewById(R.id.tab);
        viewPager = findViewById(R.id.viewpager);
        title.add("送货安排");
        title.add("采购入库");
        title.add("销售出库");



        //设置标题滚动显示
        // tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment2());
        fragments.add(new BlankFragment3());
        /**
         * Fragment放进viewpager的适配器
         */
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }

            /**
             * 设置标题
             * @param position
             * @return
             */
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return title.get(position);
            }
        });
        tabLayout.setupWithViewPager(viewPager);



    }
}

Fragment.

package com.example.myapplication;


import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.TextView;


/**
 * A simple {@link Fragment} subclass.
 */
public class BlankFragment extends Fragment {

    private ExpandableListView listView;

    public BlankFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }
    /**
     * 这个方法是fragment在acticity加载之后开始的方法，
     * 上面的方法因为运行的时候view还没运行所以会找不到控件
     * 使用的时候记得前面加一个getView（）不然会报错
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //  initData();
        listView =getView().findViewById(R.id.listView);
        listView.setAdapter(new MyExpandble());

    }
    class MyExpandble extends BaseExpandableListAdapter {
        String[]group = {"1月13日送货安排","1月14日送货安排","1月15日送货安排","1月16日送货安排","1月17日送货安排"};
        String[][] child ={
                { "李艳:        安泰名筑1-1-502","庄妍：       一号学府6-4-302","王军霞：      上东区5-2-103"},
                { "李艳:        安泰名筑1-1-502","庄妍：       一号学府6-4-302","王军霞：      上东区5-2-103"},
                { "李艳:        安泰名筑1-1-502","庄妍：       一号学府6-4-302","王军霞：      上东区5-2-103"},
                { "李艳:        安泰名筑1-1-502","庄妍：       一号学府6-4-302","王军霞：      上东区5-2-103"},
                { "李艳:        安泰名筑1-1-502","庄妍：       一号学府6-4-302","王军霞：      上东区5-2-103"},
                           };

        @Override
        public int getGroupCount() {
            return group.length;
        }

        @Override
        public int getChildrenCount(int i) {
            return child[i].length;
        }

        @Override
        public Object getGroup(int i) {
            return group[i];
        }

        @Override
        public Object getChild(int i, int i1) {
            return child[i][i1];
        }

        @Override
        public long getGroupId(int i) {
            return i;
        }

        @Override
        public long getChildId(int i, int i1) {
            return i;
        }

        @Override
        public boolean hasStableIds() {
            return false;
        }

        @Override
        public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
            if (view == null){
                view = getLayoutInflater().inflate(R.layout.item,null);
            }
            TextView textView = view.findViewById(R.id.textView);
            textView.setText(group[i]);
            return view;
        }

        @Override
        public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
            if (view == null){
                view = getLayoutInflater().inflate(R.layout.layout,null);
            }
            TextView textView = view.findViewById(R.id.textView3);
            textView.setText(child[i][i1]);
            return view;
        }

        @Override
        public boolean isChildSelectable(int i, int i1) {
            return true;
        }
    }

}

Expandable里面方法的意思可以去看我以前写的Expandable那篇有详细介绍

其他的Fragment代码都是一样的

外层item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="9"
        android:background="#CEBBBB"
        android:text="1月15日送货安排"
        android:textAlignment="center"
        android:textSize="30sp" />


</LinearLayout>

 

 内层item代码一样

如果想实现标题在下方只需要在布局里将Tablayout调到下面就行