Android TabLayout(选项卡布局)简单用法实例分析

本文实例讲述了Android TabLayout(选项卡布局)简单用法。分享给大家供大家参考,具体如下:

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个TabLayout,它就可以完成TabPageIndicator的效果,而且还是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。下面我就举一个简单的例子来使用它。

这里使用的 android studio进行开发的,所以引用TabLayout很简单,只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

这个使用是我在仿 知乎 的时候使用。所以页面就和知乎很像了

fragment_find.xml

<LinearLayout 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:orientation="vertical">
  <android.support.design.widget.TabLayout
    android:id="@+id/tab_FindFragment_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titleBlue"
    app:tabIndicatorColor="@color/white"
    app:tabSelectedTextColor="@color/gray"
    app:tabTextColor="@color/white"
    />
  <android.support.v4.view.ViewPager
    android:id="@+id/vp_FindFragment_pager"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
</LinearLayout>

这里面没有什么特别的,就是添加了一个TabLayout和Viewpager作为上下的布局。其中

app:tabIndicatorColor="@color/white" // 下方滚动的下划线颜色
app:tabSelectedTextColor="@color/gray" // tab被选中后,文字的颜色
app:tabTextColor="@color/white" // tab默认的文字颜色

Find_tab_Adapter.java  它是viewpager的Adapter,因为这里面我每个栏目下,都会有一些列表,所以采用list<View>的方式,在里面切换layout不太适合,所以我采用了List<Fragment>来直接加载多个fragment

package com.example.cg.myzhihu.Adapters;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
 * Created by cg on 2015/9/26.
 */
public class Find_tab_Adapter extends FragmentPagerAdapter {
  private List<Fragment> list_fragment; //fragment列表
  private List<String> list_Title; //tab名的列表
  public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {
    super(fm);
    this.list_fragment = list_fragment;
    this.list_Title = list_Title;
  }
  @Override
  public Fragment getItem(int position) {
    return list_fragment.get(position);
  }
  @Override
  public int getCount() {
    return list_Title.size();
  }
  //此方法用来显示tab上的名字
  @Override
  public CharSequence getPageTitle(int position) {
    return list_Title.get(position % list_Title.size());
  }
}

FindFragment.java这个的说法,全在标注里面了

package com.example.cg.myzhihu;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;
import java.util.ArrayList;
import java.util.List;
/**
 * 发现页面
 */
public class FindFragment extends Fragment {
  private TabLayout tab_FindFragment_title; //定义TabLayout
  private ViewPager vp_FindFragment_pager; //定义viewPager
  private FragmentPagerAdapter fAdapter; //定义adapter
  private List<Fragment> list_fragment; //定义要装fragment的列表
  private List<String> list_title; //tab名称列表
  private Find_hotRecommendFragment hotRecommendFragment; //热门推荐fragment
  private Find_hotCollectionFragment hotCollectionFragment; //热门收藏fragment
  private Find_hotMonthFragment hotMonthFragment; //本月热榜fragment
  private Find_hotToday hotToday; //今日热榜fragment
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_find, container, false);
    initControls(view);
    return view;
  }
  /**
   * 初始化各控件
   * @param view
   */
  private void initControls(View view) {
    tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);
    vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);
    //初始化各fragment
    hotRecommendFragment = new Find_hotRecommendFragment();
    hotCollectionFragment = new Find_hotCollectionFragment();
    hotMonthFragment = new Find_hotMonthFragment();
    hotToday = new Find_hotToday();
    //将fragment装进列表中
    list_fragment = new ArrayList<>();
    list_fragment.add(hotRecommendFragment);
    list_fragment.add(hotCollectionFragment);
    list_fragment.add(hotMonthFragment);
    list_fragment.add(hotToday);
    //将名称加载tab名字列表,正常情况下,我们应该在values/arrays.xml中进行定义然后调用
    list_title = new ArrayList<>();
    list_title.add("热门推荐");
    list_title.add("热门收藏");
    list_title.add("本月热榜");
    list_title.add("今日热榜");
    //设置TabLayout的模式
    tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);
    //为TabLayout添加tab名称
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));
    tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));
    fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);
    //viewpager加载adapter
    vp_FindFragment_pager.setAdapter(fAdapter);
    //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);
    //TabLayout加载viewpager
    tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);
    //tab_FindFragment_title.set
  }
}

效果图,不太会做成动态的:

希望本文所述对大家Android程序设计有所帮助。

时间: 2016-01-11

AndroidUI组件SlidingTabLayout实现ViewPager页滑动效果

使用SlidingTabLayout需要准备2个类,分别是 SlidingTabLayout,与SlidingTabStrip,,放进项目中时只用修改下包名即可. 效果制作的不是很好. 这篇文章,也是在网上搜了很多资源参考,对 SlidingTabLayout.java和SlidingTabStrip.java进行了修改.大家可以更改他的格式字体大小.选中状态,分割线调整等等.先上传这两个文件,改动支出都做了注释. SlidingTabLayout.java /* * Copyright (C)

Android自定义TabLayout效果

周末就要到了,今天项目中遇到这样一个Tab,选中tab的背景是个圆角矩形,方向指向器没有了,这样普通的TabLayout不能满足我的要求,可能会想到动态的去设置选中Tab的背景不就可以了,但是那样的话太生硬了,没有动画效果,其实想想也还比较简单,今天就简单的说一说这个YzzTab.效果如下图: 这里是四个Tab,一版只显示3个,这里假设有num个Tab,当滑动到第3个时,这里就需要考虑如何让TabLayout和指示器一起移动呢? @Override public void onPageScrol

TabLayout使用方法详解

TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator. 使用非常方便,Android Studio只需要在gradle中引入即可使用 . compile 'com.android.support:design:23.3.0' TabLayout即可以单独使用,也可以配合ViewPager来使用. 先来看看单独使用的Demo,实现如下图的效果: 代码如下: package blog.csdn.net.mchenys.tablayoudem

Android中TabLayout结合ViewPager实现页面切换

一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0' compile 'com.android.support:design:23.4.0' 也可以将support-v4替换为appcompat-v7,例如: compile 'com.android.support:appcompat-v7:23.4.0' 因为appcompat-v7是依赖于support-v4的. 更多说明可参考官方文档

Android TabLayout实现京东详情效果

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2. 这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment

Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

Android 中TabLayout自定义选择背景滑块的实例代码

TabLayout是Android 的Material Design包中的一个控件,可以和V4包中的ViewPager搭配产生一个联动的效果.这里我自定义了一个滑块能够跟随TabLayout进行滑动选择的SliderLayout.效果见下图(白色方框): 下面是SliderLayout的源码: import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawabl

Android design包自定义tablayout的底部导航栏的实现方法

以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图: 布局只要一个tablayout <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id=&

android TabLayout使用方法详解

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2. 这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment

Android中TabLayout结合ViewPager实现页面切换效果

先看看效果,如图: 1.因为TabLayout是Android Design Support Library官方库的一个控件,所以使用TabLayout时候需要先添加对该库的依赖 compile 'com.android.support:design:22.2.0' 2.下面是TabLayout和ViewPager配合使用的布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns

Android开发中ViewPager实现多页面切换效果

ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入"Android-support-v4.jar" 首先必须知道:要使用ViewPager,必须要使用PagerAdapter为其提供数据,也就必须实现下面四个方法: 1, getCount():ViewPager需要显示的页面个数 2,isViewFromObject(View view, Object object):view 是某个位置的页面,Object是

Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

Android中使用TabHost 与 Fragment 制作页面切换效果

三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义页面切换的效果:切换页面时,当前页面滑出,目标页面滑入.这是2个不同的动画设定动画时要区分对待 import android.content.Context; import android.util.AttributeSet; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import

Android 中 TabHost与ViewPager结合实现首页导航效果

今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就不过多解释了,说几点需要注意的问题 1:TabHost .TabWidget.FrameLayout一定添加id这个属性,否则会报错 android:id="@android:id/tabhost" android:id="@android:id/tabcontent"

Android实现单页显示3个Item的ViewPager炫酷切换效果

单页显示3个Item的ViewPager炫酷切换效果,适用于Banner等. 效果图 Rotate Y Rotate Down Rotate Up Alpha ScaleIn ScaleIn + Alpha + Rotate Down 使用 ###(1)引入 compile `com.zhy:magic-viewpager:1.0.1` ###(2)示例 布局文件 <FrameLayout android:layout_width="match_parent" android:l

Android中TabLayout添加小红点的示例代码

本文介绍了Android中TabLayout添加小红点的示例代码,分享给大家,具体如下 安卓原生的android.support.design.widget.TabLayout,配合ViewPager已经很好用了,但是有时我们会在内容更新时,在tab标题右上方加上一个红点等标记此tab内容有更新时,就需要给原生的TabLayout设置你定义的布局,用法和原生的一样,只是在代码中设置一下TabLayout的布局. 1.主布局文件 <?xml version="1.0" encodi

Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法 问题描述: 开发中发现,SwipeRefreshLayout的下拉刷新,与ViewPager开发的banner的左右滑动事件有一点冲突,导致banner的左右滑动不够顺畅.很容易在banner的左右滑动的过程中,触发SwipeRefreshLayout的下拉刷新,从而导致banner左右滑动的体验很差. 解决方案: 可以在ViewPager的滑动时候设置SwipeRefreshLayout暂时不可用,