使用TabLayout实现横向滚动菜单

TabLayout的简单使用

TabLayout可以简单的搞定横向滚动菜单。

首先需要导入design包

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

xml文件（有两种方法）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_viewpage">
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/tab_layout"
    app:tabMode="scrollable"
    ></android.support.design.widget.TabLayout>

</android.support.v4.view.ViewPager>

上面这种布局方式可以直接让ViewPager和TabLayout产生关联

显而易见，就是把TabLayout直接用VIewPager包住

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/tab_layout"
    app:tabMode="scrollable"
    ></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_viewpage">
</android.support.v4.view.ViewPager>

这种布局中，VIewPager和TabLayout不会直接产生关系，需要我们在Activity中配置

只要写一句即可搞定。

tab_layout.setupWithViewPager(tab_viewpage);

Activity中的配置

package jiangguxu.example.com.myapplication.activity;

import android.support.annotation.Nullable;
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.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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

import jiangguxu.bawei.com.myapplication.R;
import jiangguxu.bawei.com.myapplication.adapter.ViewPageAdapter;
import jiangguxu.bawei.com.myapplication.fragment.ChanelFragment;

public class TabLayoutActivity extends FragmentActivity {
    private TabLayout tab_layout;
    private ViewPager viewPager;
    private List<String> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        tab_layout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.tab_viewpage);
        list = new ArrayList<>();
        //创建标题的模拟数据
        for (int i = 0; i < 30; i++) {
            list.add("小可爱");
        }
        viewPager.setAdapter(new ChanelAdapter(getSupportFragmentManager()));

    }
    //这里需要继承FragmentPagerAdapter,因为我们要动态的添加Fragment
    class ChanelAdapter extends FragmentPagerAdapter{
        public ChanelAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return ChanelFragment.netInstance(list.get(position));
        }

        @Override
        public int getCount() {
            return list.size();
        }
        //重写该方法可以让TabLayout有标题文字
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return list.get(position);
        }
    }
}

因为要动态的添加Fragment,需要一个类继承Fragment

package jiangguxu.example.com.myapplication.fragment;


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;

import jiangguxu.bawei.com.myapplication.R;

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


    private View inflate;

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

    public static Fragment netInstance(String s) {
        ChanelFragment chanelFragment =  new ChanelFragment();
        Bundle arg = new Bundle();
        arg.putString("title",s);
        chanelFragment.setArguments(arg);
        return chanelFragment;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View inflate = inflater.inflate(R.layout.fragment_chanel, container, false);
        TextView title=inflate.findViewById(R.id.fragment_text);
        Bundle arguments = getArguments();
        title.setText(arguments.getString("title"));
        return inflate;
    }

}

这里Fragment的布局文件中只要写一个TextView就可以了