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)效果图

011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)的更多相关文章

  1. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  2. Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  3. Android TabLayout+ViewPager禁止滑动

    1.重写ViewPager并重写覆盖ViewPager的onInterceptTouchEvent(MotionEvent arg0)方法和onTouchEvent(MotionEvent arg0) ...

  4. [Android]使用ViewPager实现图片滑动展示

    在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示: 通常会自动滚动,也可以根据手势滑动.我没有研究过人家的APP是通过什么实现的,可能有第三方已经封 ...

  5. 114、Android禁止ViewPager的左右滑动

    有时候在开发中会遇到一些“诡异”的要求,比如在ViewPager中嵌入ListView,或者再嵌入一个ViewPager,那么在滑动的时候就会造成被嵌入的XXView不能滑动了,那么现在就把最外层的V ...

  6. Android实现多页左右滑动效果，支持子view动态创建和cache

    要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...

  7. Android listview viewpager解决冲突 滑动

    Android listview viewpager滑动 跳动 冲突解决 ListView中嵌套ViewPage有或者滑动手势冲突解决   在listview 上使用 addHeaderView 在第 ...

  8. Android禁止ViewPager的左右滑动

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/40744287 有时候在开发中会遇到一些"诡异"的要求,比方在V ...

  9. android SlidingTabLayout实现ViewPager页卡滑动效果

    先来张效果图(能够滑动切换页卡) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2T/fontsize/400/fi ...

随机推荐

  1. java基础之多线程三：多线程并发同步

    由于线程的执行是CPU随机调度的,比如我们开启10个线程,这10个线程并不是同时执行的,而是CPU快速的在这10个线程之间切换执行,由于切换速度极快使我们感觉同时执行罢了. 线程同步问题往往发生在多个 ...

  2. Python和其他语言的区别 （简单精辟啊 手打）

    首先是简单 读和写非常容易 免费 免费且开源 社区为专业人士和初学者提供知识和经验的分享交流平台 兼容性 与多平台兼容 面向对象 支持面向对象编程 php面向网络 函数库 python 社区创建了丰富 ...

  3. 关于使用sessionStorage报SecurityError错误的问题

    localStorage 永久保存 不同页面和标签页可以共享 关闭浏览器不会清除 sessionStorage 会话保存 不同页面和标签页不能共享 关闭浏览器会清除 遇到的问题:在firefox中报S ...

  4. cocos+kbe问题记录

    1.不要使用setTimeout函数 setTimeout函数,setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 是HTML DOM中的方法,在游戏中使用,属于全局的延时,当游 ...

  5. php+mysql网站无限级栏目分类-递归获取树形结构函数

    如果网站采用了无限级栏目结构,我们可以将网站所有栏目获取出来组成一个树形结构.数据库结构: 函数代码: //获得指定文章分类的子分类组成的树形结构 function cateTree($pid=0,$ ...

  6. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  7. 虚拟机Ubuntu16.04安装lrzsz

    [系统环境] 宿主机:Win7 64位 虚拟机软件:Vmware workstation 12 虚拟机:Ubuntu 16.0.4 [目的] 配合Secure CRT使用rz,sz,方便在Ubuntu ...

  8. 264E Roadside Trees

    传送门 题目大意 分析 倒着跑LIS表示以i为开头的LIS,于是对于删除可以暴力重算前10棵树.而对于种树,因为高度不超过10且高度两两不同,所以暴力重算比它矮的10棵树即可.对于需要重算的点,将其从 ...

  9. 自定义UINavigationBar的背景【转】

    from:http://cocoa.venj.me/blog/custom-navbar-background/ 为了让我们的应用程序更加美观,我们往往希望对iPhone自带的控件进行一点自定义.比如 ...

  10. ArcGIS Desktop和Engine中对点要素图层Graduated Symbols渲染的实现 Rotation Symbol （转）

    摘要         ArcGIS中,对于要素图层的渲染,支持按照要素字段的值渲染要素的大小,其中Graduated Symbols可以对大小进行分级渲染.在个人开发系统的过程中,也可以用来美化数据显 ...