Android Material Design:ViewPager与android.support.design.widget.TabLayout双向交互联动切换

通常,android.support.design.widget.TabLayout与Android的ViewPager联合使用,实现与ViewPager的切换与联动。
(1)比如,当用户手指触摸选择TabLayout中的某一项时候,ViewPager应当自动切换跳转到相应的Page页面;
(2)同样,当用户在翻动ViewPager时候,TabLayout也会自动的滚动到与当前ViewPager页面像对应的子item tab并使该子item tab处于选中状态。
测试用的主Activity MainActivity.java :
package com.zzw.testtablayout; import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView; public class MainActivity extends Activity { private final int COUNT = 10; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new MyAdapter(this)); // TabLayout和ViewPager双向、交互联动。
tabLayout.setupWithViewPager(viewPager);
} private class MyAdapter extends PagerAdapter {
private Activity activity; public MyAdapter(Activity activity) {
this.activity = activity;
} @Override
public CharSequence getPageTitle(int position) { return "选项" + position;
} @Override
public Object instantiateItem(View container, int position) {
TextView tv = new TextView(activity);
tv.setText("ViewPager" + position);
tv.setTextSize(30.0f);
tv.setGravity(Gravity.CENTER); ((ViewGroup) container).addView(tv);
return tv;
} @Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView((View) object); } @Override
public int getCount() {
return COUNT;
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} }
}
MainActivity.java需要的布局文件:activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" > <!-- app:tabIndicatorColor 指示器(字体下面的那一个横)显示颜色 -->
<!-- app:tabSelectedTextColor 选中的字体颜色 -->
<!-- app:tabTextColor 未选中的字体颜色 --> <android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#26c6da"
app:tabSelectedTextColor="#f44336"
app:tabTextColor="#bdbdbd" /> <android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" /> </LinearLayout>
Android Material Design:ViewPager与android.support.design.widget.TabLayout双向交互联动切换的更多相关文章
- 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。
该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.android.support.design.widget.Ta ...
- Material Design with the Android Design Support Library
Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...
- Android material design support library -- CollapsingToolbarLayout简介
本文是codetrick上material design support library教程的第三篇,主要讲的是CollapsingToolbarLayout的概念和应用方法. 原文链接:Materi ...
- Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用
该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.这个功能就是以前APP开发常用的选项卡某一卡片被切换.选中时候的 ...
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- Android Material Design控件学习(一)——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
- 【转】Android的材料设计兼容库(Design Support Library)
转自:http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group Android的材料设计兼容 ...
- Android Material Design简单使用
吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...
- Android Material Design之Toolbar与Palette
转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...
随机推荐
- 批量更新memcached缓存
假如系统里有3类数据company,user,product 利用维护版本号version的方式达到批量更新缓存的效果 memcache.Add("company",cversio ...
- mongodb 安装为windows服务
mongodb 安装为windows服务: 以管理员身份运行下面的命令: mongod --install --rest --dbpath e:\data\mongo --logpath e:\dat ...
- html + js 右 点击 弹出 菜单
页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...
- Linux常用命令之grep
标题:grep命令的使用 作用:grep可以解析一行文字,取得关键字,若该行存在关键字,就会整行列出. grep [-acinv] [--color=auto] '查找字符串' filename ...
- 剑指Offer26 字符串的全排列
/************************************************************************* > File Name: 26_String ...
- zoj 3057 博弈
思路:对于TT来说,如果数量分别为a a b或 a b a,或 b a a的形式,那么TT必赢,因为TT可以使其成为 a a a的形式,那么不论DD 怎么拿,都是TT最后使其成为a a a 的形式,0 ...
- hdu 3280 动态规划
思路:dp[i][j]表示区间i,j变为回文串最少的代价. #include<map> #include<set> #include<cmath> #include ...
- C++之时间统计
1.最精确 QueryPerformanceFrequency(&nFreq); cout <<nFreq.QuadPart<<endl;//获得计数频率 QueryP ...
- 邮箱格式验证demo
<html> <head> <script type="text/javascript"> function validate_email(fi ...
- JavaScript之简易计算器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...