011 Android TabLayout+ViewPager實現頂部滑動效果(多個頁面)

1.TabLayout介紹

　　TabLayout提供了一個水平的布局用來展示Tabs，很多應用都有這樣的設計，典型的有網易新聞，簡書，知乎等。TabLayout就可以很好的完成這一職責，首先TabLayout一般都是配合Viewpager使用的，Viewpager里的Fragment隨着頂部的Tab一起聯動，這種場景再熟悉不過了。

注意：了解開源框架MagicIndicator，也能實現頂部菜單欄的功能。

參考文獻：https://blog.csdn.net/qq_24956515/article/details/51871238

 

2.實現方法

(1)design模式下，將TabLayout 拖入界面中

注意：TabLayout 在container中

(2)design模式下，將ViewPager拖入界面中

<1>若出現錯誤(在xml文件中設置android:orientation="vertical")

<2>向viewpager中添加頁面組件

(1)創建多個頁面

app--->res--->layout ,選中layout,右擊new--->xml--->layout xml file

(2)將多個頁面布局添加到Viewpager中(采用Fragment的方式)

新建3個MyFragment（繼承Fragment）

 注意：View類的介紹：在Activity顯示的控件 都叫做View（View類 是所有的控件類的父類 比如 文本 按鈕）

3.源碼

<1>頁面XML文件布局

(1)主頁面

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

(2)fragment頁面1布局

<?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="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="新聞頁面"
        android:textSize="30dp" />
</LinearLayout>

(3)fragment頁面2布局

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

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

(4)fragment頁面3布局

<?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:gravity="center"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher" />
</LinearLayout>

<2>后台代碼

(1)MainActivity.java

package com.lucky.test11;

import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
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;

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewPager;
    List<Fragment> fragments; //定義一個列表集合(應用泛型)
    String[] table={"新聞","財經","娛樂"};  //定義一個數組存放標題內容

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout=findViewById(R.id.tablayout);
        viewPager=findViewById(R.id.viewpager);
        fragments=new ArrayList<>();  //實例化集合
        fragments.add(new MyFragment1());
        fragments.add(new MyFragment2());
        fragments.add(new MyFragment3());

        Adapter adapter=new Adapter(getSupportFragmentManager(),fragments); //參數1為fragment管理器
        viewPager.setAdapter(adapter); //給viewPager設置適配器
        tabLayout.setupWithViewPager(viewPager); //將tabLayout與viewPager建立匹配
    }

    //創建一個內部類作為適配器
    public class Adapter extends FragmentPagerAdapter{
        private List<Fragment> list;
        public Adapter(FragmentManager fm,List<Fragment> list) {
            super(fm);
            this.list=list;
        }

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

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

        //重寫getPageTitle()方法，獲取頁標題
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return table[position];
        }
    }
}

(2)MyFragment1.java

package com.lucky.test11;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment1 extends Fragment {
    //將layout_pageq.xml文件與MyFragment1相關聯
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layout_page1,container,false);
        return view;
    }
}

(3)MyFragment2.java

package com.lucky.test11;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layout_page2,container,false);
        return view;
    }
}

(4)MyFragment3.java

package com.lucky.test11;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment3 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layout_page3,container,false);
        return view;
    }
}

4.效果圖

源碼：test11

5.使用案例二

本案例特點：根據網絡請求返回的數據，自動生成tablayout中所要呈現的菜單項。

(1)NewsCenterFragment.java

package com.example.administrator.test66smartbeijing.fragment;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.alibaba.fastjson.JSONObject;
import com.example.administrator.test66smartbeijing.R;
import com.example.administrator.test66smartbeijing.javabean.NewsMenu;
import com.example.administrator.test66smartbeijing.utils.CacheUtils;
import com.example.administrator.test66smartbeijing.utils.ConstantValue;

import org.xutils.common.Callback;
import org.xutils.http.RequestParams;
import org.xutils.x;

/**
 * 利用tabLayout+viewPager實現帶頂部菜單欄的fragment
 */
public class NewsCenterFragment extends Fragment {
    private TabLayout tabLayout = null;
    private ViewPager viewPager;
    private Fragment[] mFragmentArrays;
    private String[] mTabTitles;
    String queryResultStr="";
    NewsMenu newsMenu;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layout_fm_newscenter,container,false);
        tabLayout = view.findViewById(R.id.tablayout);
        viewPager = view.findViewById(R.id.tab_viewpager);
        initView();
        return view;
    }

    private void initView() {
        //判斷有沒有緩存，如果有的話，加載緩存，沒有的話，請求網絡數據
        String cache=CacheUtils.getCache(ConstantValue.CATEGORY_URL,getActivity());
        if(!TextUtils.isEmpty(cache)){
            System.out.println("發現緩存");
            newsMenu = processData(cache);

        }else {
            getDataFromServer();
            newsMenu =processData(queryResultStr);
        }
        System.out.println(newsMenu);
        System.out.println(newsMenu.data.get(0).children.size());
        mTabTitles = new String[newsMenu.data.get(0).children.size()];  //放置標題的數組

        for (int i = 0; i <mTabTitles.length ; i++) {
            mTabTitles[i]=newsMenu.data.get(0).children.get(i).title;
        }

        //tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //設置tablayout距離上下左右的距離
        //tab_title.setPadding(20,20,20,20);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);  //設置tablayout為滾動模式
        mFragmentArrays = new Fragment[mTabTitles.length];

        for (int i = 0; i <mTabTitles.length ; i++) {
            mFragmentArrays[i] = TabFragment.newInstance();
        }
        PagerAdapter pagerAdapter = new MyViewPagerAdapter(getActivity().getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);  //給viewPager設置適配器
        tabLayout.setupWithViewPager(viewPager);//將ViewPager和TabLayout綁定
    }

    final class MyViewPagerAdapter extends FragmentPagerAdapter {
        public MyViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        //抽象方法必須重寫(即子類必須實現父類的抽象方法)
        @Override
        public Fragment getItem(int position) {
            return mFragmentArrays[position];
        }


        @Override
        public int getCount() {
            return mFragmentArrays.length;

        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabTitles[position];  //獲取頁標題
        }
    }

    /**
     * 從服務器獲取數據
     */
    private void getDataFromServer() {
        //請求地址
        String url=ConstantValue.CATEGORY_URL;
        RequestParams params = new RequestParams(url);
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {
                //解析result
                queryResultStr=result;
                System.out.println(result);


                //寫緩存
                CacheUtils.setCache(ConstantValue.CATEGORY_URL,queryResultStr,getActivity());
            }
            //請求異常后的回調方法
            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
            }
            //主動調用取消請求的回調方法
            @Override
            public void onCancelled(CancelledException cex) {
            }
            @Override
            public void onFinished() {
            }
        });

    }

    private NewsMenu processData(String queryResultStr) {
        // 復雜json格式字符串到JavaBean對象的轉換
        NewsMenu newsMenu = JSONObject.parseObject(queryResultStr,NewsMenu.class);
        return newsMenu;
    }
}

(2)TabFragment.java

package com.example.administrator.test66smartbeijing.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.administrator.test66smartbeijing.R;
import com.example.administrator.test66smartbeijing.utils.RecyclerAdapter;


/**
 * Created by zq on 2017/1/12.
 */
public class TabFragment extends Fragment {

    //新建一個Fragment實例
    public static Fragment newInstance() {
        TabFragment fragment = new TabFragment();
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // LayoutInflater.inflate()的功能是將一段 XML 資源文件加載成為 View。所以通常用於將 XML 文件實例化為 View。然后獲取 View 上的組件最后操作之。
        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        RecyclerView recyclerView = rootView.findViewById(R.id.recycler); //獲取recyclerView這個組件
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);   //給recyclerView設置布局管理器
        recyclerView.setAdapter(new RecyclerAdapter()); //給recyclerView設置適配器
        return rootView;
    }
}

(3)RecyclerAdapter.java

package com.example.administrator.test66smartbeijing.utils;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.administrator.test66smartbeijing.R;


/**
 * Created by zq on 2017/1/12.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.AuthorViewHolder> {

    @Override
    public AuthorViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View childView = inflater.inflate(R.layout.item, parent, false);
        AuthorViewHolder viewHolder = new AuthorViewHolder(childView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(AuthorViewHolder holder, int position) {
    }

    @Override
    public int getItemCount() {
        return 15;
    }


    class AuthorViewHolder extends RecyclerView.ViewHolder {

        TextView mNickNameView;
        TextView mMottoView;
        public AuthorViewHolder(View itemView) {
            super(itemView);
            mNickNameView = itemView.findViewById(R.id.tv_nickname);
            mMottoView = itemView.findViewById(R.id.tv_motto);
        }
    }
}

(4)效果圖