AndroidUI——使用TabLayout实现分页

实现一下TabLayout与ViewPager结合的可滑动可点击的分页效果。尽量最小实现。

主页面布局

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#ff0000"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>

主界面布局很简单，上边是一个TabLayout，包含了许多Tab，显示标题。下边是一个ViewPager，显示每一页的内容。

主页面代码

public class TabLayoutActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        mViewPager = findViewById(R.id.viewPager);
        initViewPager();

    }

    private void initViewPager() {
        mTabLayout = findViewById(R.id.tabs);
        List<String> titles = new ArrayList<>();
        titles.add("动漫");
        titles.add("音乐");
        titles.add("体育");
        titles.add("新闻");
        
        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < titles.size(); i++) {
        	//这里暂时每个页面都使用同样的fragment，内容是一样的
            fragments.add(new ListFragment());
        }
        //自己实现的Adapter，下方给出代码
        FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

子页面

每一个页面都是一个fragment，为了简单我们先只放一个TextView来实现。

public class ListFragment extends Fragment {
    private TextView mTextView;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mTextView = new TextView(getContext());
        mTextView.setText("我是小Item");
        return mTextView;

    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
}

界面适配器

通过AdapterLayout把Tab和ViewPager结合起来

public class FragmentAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> mFragments;
    private List<String> mTitles;

    public FragmentAdapter(FragmentManager fm, List<Fragment> fragments,List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        String title = mTitles.get(position);
        return title;
    }

主要覆盖了几个主要方法，同时记得主动覆盖getPageTitle方法，将对应的title值返回。

界面可以正常显示出来了，滑动点击功能也正常，如果需要补充内容布局，需要在Fragment里再次修改。

用RecyclerView实现List布局

修改ListFragment类，使用RecyclerView实现List效果。

public class ListFragment extends Fragment {
    //private TextView mTextView;
    private RecyclerView mRecyclerView;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //mTextView = new TextView(getContext());
        //mTextView.setText("我是小Item");
        //return mTextView;
        mRecyclerView = new RecyclerView(getContext());
        return mRecyclerView;

    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        //自己实现Adapter，代码在下方
        mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
    }
}

RecyclerViewAdapter代码

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private Context context;

    public RecyclerViewAdapter(Context context) {
        this.context = context;
    }

    @NonNull
    @Override
    public RecyclerViewAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    	//这个view里实现了一个TextView，读者可以自己实现其他的
        View view = LayoutInflater.from(context).inflate(R.layout.list_item_card_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerViewAdapter.ViewHolder holder, int position) {
        final View view = holder.mView;
        //设置一个点击事件，由于没有数据暂时不设置数据。
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "嗷嗷嗷", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
    	//实际使用时应该返回数据数量，这里先写死为10
        return 10;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private View mView;

        public ViewHolder(View view) {
            super(view);
            this.mView = view;
        }
    }
}

实现效果如下。