- 浏览: 5775005 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
TabLayout是android design包内的控件;
一般情况下,它总是喜欢和ViewPager成对出现;
典型的像如下的布局:
然后就是结合了,由于我们通常在ViewPager中放置的是若干个Fragment,所以还得先实现几个Fragment,典型的像下面这个:
接下去就可以使用了:
首先new 几个Fragment出来:
private static final String[] titles = new String[]{"Tab 1", "Tab 2","Tab 3", "Tab 4"};
.....
Fragment[] fragments = new Fragment[titles.length];
fragments[0]=MoveFragment.newInstance(titles[0]);
fragments[1]=XFragment.newInstance(titles[1]);
fragments[2]=YFragment.newInstance(titles[2]);
fragments[3]=ZFragment.newInstance(titles[3]);
然后实现一个FragmentPagerAdapter,注意,一定要重写getPageTitle方法,这样TabLayout就可以从中取到要显示的标题了:
剩下就是绑定了:
然而偶尔也会没有ViewPager,TabLayout也会单独使用
那么这个时候需要使用addTab方法为TabLayout添加title了:
////////////////////////////////////////////////////////////////////
//下面的内容与Tablayout无关,可以无视
///////////////////////////////////////////////////////////////////
接下去要实现一个ViewPager滑动的时候背景颜色过渡变化的效果
在网上找到一个背景颜色可以过渡变化的View,和ViewPager结合使用:
布局的时候需要把这个View和ViewPager重叠(FrameLayout)在一起使用,这样就能看出效果了:
注意ViewPager中的Fragment不要设置backgroundColor(用屁股想想也知道为什么!)
该类的源码如下:
Android TabLayout 库:FlycoTabLayout
http://www.open-open.com/lib/view/open1447294190257.html
https://github.com/hugeterry/CoordinatorTabLayout
自适应Tab宽度可以滑动文字逐渐变色的TabLayout
http://www.see-source.com/blog/300000023/1624.html
一般情况下,它总是喜欢和ViewPager成对出现;
典型的像如下的布局:
<!-- 如果你屏幕上显示只有少数 tab 的时候,可以设置tabMode="fixed",若很多需要拖动,则设置tabMode="scroll" --> <!-- 如果 tabMode 设置成 scrollable 的,则tabGravity属性将会被忽略 --> <!-- 其他可设置属性 app:tabIndicatorColor="#FF00FF00" app:tabSelectedTextColor="#FF00FF00" app:tabTextColor="#FF000000" --> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" />
然后就是结合了,由于我们通常在ViewPager中放置的是若干个Fragment,所以还得先实现几个Fragment,典型的像下面这个:
public class MoveFragment extends Fragment implements OnClickListener { private String curFlag; public static MoveFragment newInstance(String flag){ MoveFragment fragment = new MoveFragment(); Bundle bundle = new Bundle(); bundle.putString("Flag", flag); fragment.setArguments(bundle); return fragment; } public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Bundle args = getArguments(); if (args != null) { curFlag = args.getString("Flag"); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { super.onCreateView(inflater, container, savedInstanceState); View view = inflater.inflate(R.layout.fragment_move, container,false); initViews(view); return view; } public void initViews(View view){ TextView tv=(TextView)view.findViewById(R.id.tv); tv.setText(curFlag); } @Override public void onClick(View v) { } }
接下去就可以使用了:
首先new 几个Fragment出来:
private static final String[] titles = new String[]{"Tab 1", "Tab 2","Tab 3", "Tab 4"};
.....
Fragment[] fragments = new Fragment[titles.length];
fragments[0]=MoveFragment.newInstance(titles[0]);
fragments[1]=XFragment.newInstance(titles[1]);
fragments[2]=YFragment.newInstance(titles[2]);
fragments[3]=ZFragment.newInstance(titles[3]);
然后实现一个FragmentPagerAdapter,注意,一定要重写getPageTitle方法,这样TabLayout就可以从中取到要显示的标题了:
FragmentPagerAdapter pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return fragments.length; } @Override public Fragment getItem(int position) { return fragments[position]; } @Override public CharSequence getPageTitle(int position) { return titles[position]; } };
剩下就是绑定了:
tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager);
然而偶尔也会没有ViewPager,TabLayout也会单独使用
那么这个时候需要使用addTab方法为TabLayout添加title了:
tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3")); tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
////////////////////////////////////////////////////////////////////
//下面的内容与Tablayout无关,可以无视
///////////////////////////////////////////////////////////////////
接下去要实现一个ViewPager滑动的时候背景颜色过渡变化的效果
在网上找到一个背景颜色可以过渡变化的View,和ViewPager结合使用:
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager); viewPager.setAdapter(pagerAdapter); ColorAnimationView colorAnimationView = (ColorAnimationView) findViewById(R.id.colorAnimationView); colorAnimationView.setViewPager(viewPager,titles.length,0xffFF8080,0xff8080FF,0xffffffff,0xff80ff80); //you can call this method like this: // colorAnimationView.setViewPager(viewPager, titles.length);//use default color colorAnimationView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } });
布局的时候需要把这个View和ViewPager重叠(FrameLayout)在一起使用,这样就能看出效果了:
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <com.widget.view.ColorAnimationView android:id="@+id/colorAnimationView" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
注意ViewPager中的Fragment不要设置backgroundColor(用屁股想想也知道为什么!)
该类的源码如下:
package com.widget.view; import android.animation.Animator; import android.animation.ArgbEvaluator; import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; /** * * @author Administrator * @see https://github.com/TaurusXi/GuideBackgroundColorAnimation */ public class ColorAnimationView extends View implements ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener { private static final int WHITE = 0xFFFFFFFF; private static final int RED = 0xffFF8080; private static final int BLUE = 0xff8080FF; private static final int GREEN = 0xff80ff80; private static final int DURATION = 3000; ValueAnimator colorAnim = null; private PageChangeListener mPageChangeListener; ViewPager.OnPageChangeListener onPageChangeListener; public void setOnPageChangeListener(ViewPager.OnPageChangeListener onPageChangeListener) { this.onPageChangeListener = onPageChangeListener; } /** * 这是你唯一需要关心的方法 * @param mViewPager 你必须在设置 Viewpager 的 Adapter 这后,才能调用这个方法。 * @param obj ,这个obj实现了 ColorAnimationView.OnPageChangeListener ,实现回调 * @param count ,viewpager孩子的数量 * @param colors int... colors ,你需要设置的颜色变化值~~ 如何你传人 空,那么触发默认设置的颜色动画 * */ /** * This is the only method you need care about. * @param mViewPager ,you need set the adpater before you call this. * @param count ,this param set the count of the viewpaper's child * @param colors ,this param set the change color use (int... colors), * so,you could set any length if you want.And by default. * if you set nothing , don't worry i have already creat * a default good change color! * */ public void setViewPager(ViewPager mViewPager, int count, int... colors) { // this.mViewPager = mViewPager; if (mViewPager.getAdapter() == null) { throw new IllegalStateException("ViewPager does not have adapter instance."); } mPageChangeListener.setViewPagerChildCount(count); mViewPager.setOnPageChangeListener(mPageChangeListener); if (colors.length == 0) { createDefaultAnimation(); } else { createAnimation(colors); } } public ColorAnimationView(Context context) { this(context, null, 0); } public ColorAnimationView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ColorAnimationView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mPageChangeListener = new PageChangeListener(); } private void seek(long seekTime) { if (colorAnim == null) { createDefaultAnimation(); } colorAnim.setCurrentPlayTime(seekTime); } private void createAnimation(int... colors) { if (colorAnim == null) { colorAnim = ObjectAnimator.ofInt(this,"backgroundColor", colors); colorAnim.setEvaluator(new ArgbEvaluator()); colorAnim.setDuration(DURATION); colorAnim.addUpdateListener(this); } } private void createDefaultAnimation() { colorAnim = ObjectAnimator.ofInt(this,"backgroundColor", WHITE, RED, BLUE, GREEN); colorAnim.setEvaluator(new ArgbEvaluator()); colorAnim.setDuration(DURATION); colorAnim.addUpdateListener(this); } @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationUpdate(ValueAnimator animation) { invalidate(); // long playtime = colorAnim.getCurrentPlayTime(); } private class PageChangeListener implements ViewPager.OnPageChangeListener { private int viewPagerChildCount; public void setViewPagerChildCount(int viewPagerChildCount) { this.viewPagerChildCount = viewPagerChildCount; } public int getViewPagerChildCount() { return viewPagerChildCount; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int count = getViewPagerChildCount() - 1; if (count != 0) { float length = (position + positionOffset) / count; int progress = (int) (length * DURATION); ColorAnimationView.this.seek(progress); } // call the method by default if (onPageChangeListener!=null){ onPageChangeListener.onPageScrolled(position,positionOffset,positionOffsetPixels); } } @Override public void onPageSelected(int position) { if (onPageChangeListener!=null) { onPageChangeListener.onPageSelected(position); } } @Override public void onPageScrollStateChanged(int state) { if (onPageChangeListener!=null) { onPageChangeListener.onPageScrollStateChanged(state); } } } }
Android TabLayout 库:FlycoTabLayout
http://www.open-open.com/lib/view/open1447294190257.html
https://github.com/hugeterry/CoordinatorTabLayout
自适应Tab宽度可以滑动文字逐渐变色的TabLayout
http://www.see-source.com/blog/300000023/1624.html
发表评论
-
AppBarLayout.OnOffsetChangedListener的使用
2015-09-01 14:08 8905如果没听说过AppBarLayout.OnOffsetChan ... -
Design各控件的搭配使用4
2015-08-28 17:01 1434在上一个版本基础上添加两个Activity: EffectsA ... -
Design各控件的搭配使用3
2015-08-28 11:35 1838在上一个版本基础上新增: 对RecyclerView的操作(线 ... -
Design各控件的搭配使用2
2015-08-25 15:16 1941在上个版本的基础上增加个几个控件: DrawerLayout+ ... -
Design各控件的搭配使用
2015-08-25 13:48 2789PS:使用design包需要在design项目中导入appco ... -
ItemTouchHelper之SwipeDismiss
2015-08-25 10:11 1930引用This is a utility class to ad ... -
CoordinatorLayout之Behavior使用
2015-08-18 10:27 2238import android.animation.An ... -
support.v4之SlidingPaneLayout简单使用
2015-08-13 13:10 2415简单的布局 <android.support.v4. ... -
android5.0之CardView
2015-08-11 17:24 2019CardView继承至FrameLayout类,可以在一个卡片 ... -
ToolBar&DrawerLayout基本结构
2015-08-03 15:22 1978快速迭代用 使用到了 1:ToolBar + ShareAc ... -
android5.0之RecyclerView
2015-07-31 13:55 2484早就听说RecyclerView有多少多少XX 但是直到今天才 ... -
RecylerView相关文章
2015-04-10 12:03 2006RecylerView用于替代ListView,因为它比Lis ...
相关推荐
TabLayout使ViewPager更优雅的滑动切换。TabLayout是android.support.design.widget库中的一个控件,和ViewPager中结合使用可以让Fragment滑动更优雅,更简单,更流畅。
先看看效果,如图: ...2.下面是TabLayout和ViewPager配合使用的布局 <?xml version=1.0 encoding=utf-8?> <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:app=htt
一个小型库,可帮助更轻松地将TabLayout与ViewPager结合使用。 自动切换TabLayout.MODE_FIXED和TabLayout.MODE_SCROLLABLE取决于选项卡的总宽度。 轻松实现自定义标签视图 目标平台 API级别14或更高版本 最新版本...
主要为大家详细介绍了Android中TabLayout结合ViewPager实现页面切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果,TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...
Tablayout和ViewPager的结合使用Tablayout标题右上角加标记
序 昨晚经历了美股本月的第三次熔断 ,有史...实现类似的效果 ,主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
使用TabLayout结合ViewPager实现的页卡切换功能
CoordinatorLayout与AppBarLayout的结合,实现“上吸”功能!作为Google的MaterialDesign的重要组成部分
特性:支持自定义Indicator大小支持自定义Indicator位置支持Indicator设置圆角支持Tab设置Badge支持Adapter的方式创建Tab多种Tab高度设置模式很方便的和ViewPager结合使用很方便的和Fragment结合使用
在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,...以下三种方法是我在学习和项目中尝试过的,需求实现了,但各有千秋,可结合不同场景使用
利用newInstance的方式创建Fragment,结合TabLayout与viewpager创建简单UI框架
Android Material Design控件之TabLayout的使用,结合viewpager的简单、快速的集成方式。
SampleTabApplication 为基于Tab的UI结合TabLayout,Toolbar和ViewPager实现片段的示例结果: 作为替代方案,我们可以使用“ 和而不是TabLayout。 有关此样本的理论,请阅读CodeLab在在关注印度尼西亚语CodeLab ...
在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用,TabPagerIndicator是第三方的,使用起来比较繁琐; 2015谷歌大会官方发布了TabLayout,可以很简单很完美的实现这种效果; 因为是官方发布的,...
用来和Viewpager结合使用来作为Viewpager的选项卡
请不要再您的生产环境中使用VerticalTabLayout垂直竖向的Android TabLayout一些特性支持自定义Indicator大小支持自定义Indicator位置支持Indicator设置圆角支持Tab设置Badge支持Adapter的方式创建Tab多种Tab高度设置...
本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: 控件介绍 这次需要用到得新控件比较多,主要有以下几个: CoordinatorLayout 组织它的子views之间协作的一个Layout...结合ViewPager,实现多个TAB的切