使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换

原创 2016年05月31日 16:07:30

转载请标明出处:http://blog.csdn.net/liu1252247624/article/details/51546618

效果图如下


首先,要使用控件需要添加design library,在Android Studio中添加

compile 'com.android.support:design:23.4.0'

然后是布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.lg.tablayoutdemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layou"
        android:layout_width="match_parent"
        app:tabIndicatorColor="@android:color/holo_blue_light"
        app:tabTextColor="@android:color/darker_gray"
        app:tabSelectedTextColor="@android:color/black"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_below="@id/tab_layou"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
其中TabLayout中tabIndicatorColor属性为标签底部下滑线颜色,tabTextColor为标签未选中时字体颜色,tabSelectedTextColor为选中时字体颜色

自定一个FragmentPagerAdapter适配器

public class MyViewPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    private String[] titles;

    public MyViewPagerAdapter(FragmentManager fm, String[] titles, List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int arg0) {
        return fragments.get(arg0);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

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

Fragment代码我就不贴了,会在下面奉上源码地址

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private MyViewPagerAdapter viewPagerAdapter;
    //TabLayout标签
    private String[] titles=new String[]{"ANDROID","JAVA","C#","PHP"};
    private List<Fragment> fragments=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init(){
        tabLayout=(TabLayout)findViewById(R.id.tab_layou);
        viewPager=(ViewPager)findViewById(R.id.view_pager);
        //设置TabLayout标签的显示方式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //循环注入标签
        for (String tab:titles){
          tabLayout.addTab(tabLayout.newTab().setText(tab));
        }
        //设置TabLayout点击事件
        tabLayout.setOnTabSelectedListener(this);

        fragments.add(new AndroidFragment());
        fragments.add(new JavaFragment());
        fragments.add(new CshapFragment());
        fragments.add(new PhpFragment());
        viewPagerAdapter=new MyViewPagerAdapter(getSupportFragmentManager(),titles,fragments);
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

以上是核心代码,至此功能就实现了,当然也可 以根据不同的需求进行改动

源码地址:http://download.csdn.net/detail/liu1252247624/9536588


版权声明:本文为博主原创文章,欢迎转载,转载务必注明文章出处,作者信息。

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以...
  • HanTangSongMing
  • HanTangSongMing
  • 2015年01月07日 09:11
  • 45940

教你如何使用ViewPager+Fragment一步步打造顶部导航界面滑动效果

最近在整理以前的知识点,重新碰到了以前项目中的一个滑动分页的效果,就打算写这么一篇文章分享一下ViewPager的经典使用 在许多应用中,我们常常用到这么一个效果: 可以看到,...
  • IT_ZJYANG
  • IT_ZJYANG
  • 2016年06月04日 15:01
  • 9683

Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效demo

  • 2013年04月02日 11:21
  • 2.39MB
  • 下载

Android底部/顶部滑动菜单,方便调用的工具类

大家都不用AlertDialog了,发现自己的应用还是AlertDialog,就想弄个打开底部/顶部菜单的工具类方法,这样调用起来比较方便! public class AndUtil { /*...
  • xyzdwf
  • xyzdwf
  • 2017年01月07日 19:32
  • 710

xamarin Tablayout+Viewpager+Fragment顶部导航栏

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

Xamarin android沉浸式状态栏

沉浸式状态并不这么叫,其学名是透明状态栏,写这篇文章主要是让小白少走点弯路,用两种方法实现兼容android4.4、android5.*沉浸式状态栏...
  • kebi007
  • kebi007
  • 2017年04月17日 22:51
  • 3033

POJ2479 Maximum sum

Maximum sumTime Limit: 1000MSMemory Limit: 65536KTotal Submissions: 22196Accepted: 6667Descr...
  • CyberZHG
  • CyberZHG
  • 2011年04月28日 18:17
  • 3476

xamarin android实现Toolbar+DrawerLayout完美侧滑导航栏

#### 前言 #### 如果你有关注Material Design,会发现国内的一些app也在使用material Design这种设计,我常用的网易有道词典就使用了Material Design...
  • kebi007
  • kebi007
  • 2017年09月05日 23:34
  • 1835

Xamarin Android Fragment的两种加载方式

xamarin android fragment两种加载方法的简单用法
  • kebi007
  • kebi007
  • 2016年10月05日 21:29
  • 2099

使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换

使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
  • IAFMAY
  • IAFMAY
  • 2017年10月13日 13:28
  • 124
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
举报原因:
原因补充:

(最多只允许输入30个字)