`
hemowolf
  • 浏览: 154102 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

仿网易新闻栏目滑动TAB效果

阅读更多

    网易新闻这种滑动TAB效果,在android软件中还是比较常见的(是不是原创我不清楚,仅当学习研究之用~~~)。
     

   比较常见的做法是:在FrameLayout里包装TAB bar,再在FrameLayout加一个虚拟的tab,切换tab时用虚拟tab在之前选中和当前选中的tab距离之间做一个移动动画。

   用此种方法的十之八九,但在复杂的布局中FrameLayout不是你想加就能加滴,加了很容易崩溃滴^_^,此法的劣势大家明了吧?不明那就慢慢明吧。

   今天我采用一种更加高效、灵活的方法来实现这种大家喜欢的花样--自画控件+Drawable动画。

   大体原理跟FrameLayout加虚拟tab类似,以下是基本的实现方法:在切换tab时在之前选中的tab和当前选中的tab,做一个drawable移动动画。这个 drawable 就是当前选中tab的画面。

   下面是我重载RadioGoup做的tab bar并实现了滑动效果的类

 

public class NewsRadioGroup extends RadioGroup
		implements
			OnCheckedChangeListener {
	private final Transformation mTransformation = new Transformation();
	private Animation mAnimation;
	private OnCheckedChangeListener mOnCheckedChangeListener;
	private int mLastCheckedId = -1;
	private Drawable mDummy;
	private Drawable mDrawableNormal,mDrawableChecked;
	private boolean mAminDoing=false;

	public NewsRadioGroup(Context context) {
		super(context);
		init();
	}

	public NewsRadioGroup(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	private void init() {
		super.setOnCheckedChangeListener(this);
		mLastCheckedId = super.getCheckedRadioButtonId();
		mDummy = getResources().getDrawable(R.drawable.rb_checked);
		mDrawableNormal = getResources().getDrawable(android.R.color.transparent);
	}

	public void onCheckedChanged(RadioGroup group, int checkedId) {
		if (mLastCheckedId != -1) {
			doAmin(checkedId);
		}else{
			mLastCheckedId = checkedId;
		}
		if (mOnCheckedChangeListener != null) {
			mOnCheckedChangeListener.onCheckedChanged(group, checkedId);
		}
	}
	
	private void doAmin( int checkedId){
		RadioButton rbCurChecked = (RadioButton) super.findViewById(checkedId), rbLastChecked = (RadioButton) super.findViewById(mLastCheckedId);
		if(rbCurChecked==null||rbLastChecked==null){
			mLastCheckedId=checkedId;
			return;
		}
		int X1=rbLastChecked.getLeft(),X2=rbCurChecked.getLeft();
		if (X1 <= 0 && X2 <= 0) {
			mLastCheckedId=checkedId;
			return;
		}

		if (mDrawableChecked == null) {
			mDrawableChecked = rbCurChecked.getBackground();
			mDummy.setBounds(0, 0, rbCurChecked.getWidth(), rbCurChecked.getHeight());
		}
		rbCurChecked.setBackgroundDrawable(mDrawableNormal);

		if(mAminDoing && mAnimation!=null){
			mAnimation.reset();
		}
		mAnimation = new TranslateAnimation(X1,X2, rbCurChecked.getTop(), rbCurChecked.getTop());
		mAnimation.setDuration(300);
		mAnimation.initialize(0, 0, 0, 0);
		mAminDoing=true;
		mAnimation.startNow();
		invalidate();
	}

	public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
		mOnCheckedChangeListener = listener;
	}

	protected void onDraw(Canvas canvas) {
		if (mAnimation == null || !mAminDoing) {
			return;
		}
		if (!mAnimation.hasEnded()) {
			int sc = canvas.save();
			mAnimation.getTransformation(
					AnimationUtils.currentAnimationTimeMillis(),
					mTransformation);
			canvas.concat(mTransformation.getMatrix());
			mDummy.draw(canvas);
			canvas.restoreToCount(sc);
			invalidate();
		} else {
			mAminDoing=false;
			setReallyCheck();
		}
	}

	private void setReallyCheck() {
		if (mLastCheckedId != -1) {
			super.findViewById(mLastCheckedId).setBackgroundDrawable(mDrawableNormal);
		}
		
		mLastCheckedId = super.getCheckedRadioButtonId();
		if (mLastCheckedId != -1) {
			super.findViewById(mLastCheckedId).setBackgroundDrawable(mDrawableChecked);
		}
	}

}// end class NesRadioGroup
 

 

  之前以为只要重写RadioGroup的check方法就可以拦截选中,没想到RadioGroup把实际的选中执行实现在setCheckxx里面,而这个函数是私有方法,最后绕了不小的圈子。

代码在上,具体的效果请见demo~~

分享到:
评论

相关推荐

    滑动tab菜单(仿网易新闻)

    "仿网易新闻"的滑动Tab菜单实现是基于Android平台,并且已经针对性能和用户体验进行了优化,包括点击响应和超出一屏的滑动处理。 在Android开发中,实现滑动Tab菜单通常涉及到以下几个关键知识点: 1. **ViewPager...

    高仿网易新闻顶部滑动条效果

    在本文中,我们将深入探讨如何实现“高仿网易新闻顶部滑动条效果”。这个效果是许多移动应用和网站为了提供用户友好的导航体验而广泛采用的设计元素,它通常出现在页面顶部,显示多个分类标签,用户可以左右滑动来...

    仿网易新闻顶部滑动条效果

    仿网易新闻顶部滑动条效果 ,效果请看博客http://blog.csdn.net/zingck/article/details/7446075

    仿网易新闻客户端 滑动导航

    标题 "仿网易新闻客户端滑动导航" 描述的是一个针对移动应用开发的示例项目,其核心功能是模仿网易新闻客户端的滑动导航界面。在移动应用设计中,滑动导航是一种常见的用户交互模式,它允许用户通过左右滑动屏幕在...

    仿微信左右滑动的tab实现

    本项目提供的"仿微信左右滑动的tab实现"是基于Android平台的源码实现,确保能够完美运行,帮助开发者快速构建具有此类交互效果的应用。 首先,让我们了解核心概念和技术: 1. **ViewPager**: Android中的`...

    仿 网易新闻客户端 滑动导航.rar

    在本项目"仿 网易新闻客户端 滑动导航.rar"中,我们主要探讨的是如何实现一个类似于网易新闻客户端的滑动导航功能。这个功能是许多移动应用中的常见设计,它允许用户通过水平滑动来切换不同的内容区域,如新闻分类、...

    仿网易新闻左右拖动tab

    首先,`VierPager`是一个专门为Android设计的库,它提供了类似网易新闻App中底部Tab栏的左右滑动效果。`VierPager`的核心思想是通过自定义`ViewPager`扩展其功能,以支持四个页面(或更多)的平滑切换,并且可以添加...

    仿网易新闻漂亮美观的导航条及滑动效果

    本文将深入探讨如何实现"仿网易新闻漂亮美观的导航条及滑动效果"这一主题,主要关注移动应用开发,特别是针对iPhone平台。 首先,导航条(NavigationBar)是iOS应用中常见的一种组件,它位于屏幕顶部,通常包含应用...

    仿网易新闻滑动

    标签“仿网易新闻”进一步强调了我们关注的重点是网易新闻应用的特定设计元素和功能,如其新闻列表的滑动效果、页面布局以及数据加载机制。 【压缩包子文件的文件名称列表】:NewsSliderTable 从文件名...

    js 写的一个自动滑动TAB效果

    自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动...

    网易新闻顶部滑动条效果

    在Android应用开发中,"网易新闻顶部滑动条效果"是一种常见的UI设计,它提供了丰富的交互体验,使得用户可以方便地在不同的新闻类别之间切换。这个效果主要涉及到以下几个技术点: 1. **ViewPager**: ViewPager是...

    仿网易新闻的滑动视图布局

    "仿网易新闻的滑动视图布局"是一个常见的设计模式,它提供了一种高效且直观的方式来展示多个栏目或内容区域,允许用户通过简单的手势操作进行切换。这种布局常见于新闻、杂志类应用,能提升用户体验并增加用户停留...

    超仿网易新闻android客户端 滑动Menu 滑动广告和标题滑块

    【超仿网易新闻Android客户端】是一款致力于模仿网易新闻应用程序核心功能的开发项目,它主要包含三个关键组件:滑动菜单(Sliding Menu)、滑动广告(Sliding Advertisements)和标题滑块(Title Slider)。...

    tablayout+recyclerview 实现仿淘宝、京东商品详情滑动切换tab效果

    在Android应用开发中,创建一个类似淘宝或京东商品详情页的滑动切换Tab效果是常见的需求,这可以提升用户体验并使界面更具交互性。在这个项目中,我们将利用`TabLayout`和`RecyclerView`来实现这一功能。`TabLayout`...

    仿网易界面可以左右滑动的demo

    这个“仿网易界面可以左右滑动的demo”正是这样一个实例,它模仿了网易产品中的滑动菜单功能,让用户能够通过简单的手势在不同的内容板块之间导航。 滑动界面通常基于触摸屏设备,如智能手机和平板电脑,但也可以...

    仿 网易新闻客户端 滑动导航

    网易新闻客户端的滑动导航设计是其用户界面的一大特色,它利用Android SDK中的ViewPager组件实现。 ViewPager是Android支持库中的一个控件,主要用于展示可滑动的页面集合。它与Fragment配合使用,可以创建一个可...

    仿 网易新闻客户端 滑动导航.zip安卓程序项目源码资源下载

    仿 网易新闻客户端 滑动导航.zip安卓程序项目源码资源下载仿 网易新闻客户端 滑动导航.zip安卓程序项目源码资源下载 1.适合学生做毕业设计用 2.适合程序员学习研究用 3.适合小公司换皮做新项目用

    仿网易的滑动门导航效果代码(DIV+CSS)

    仿网易的滑动门导航效果代码(DIV+CSS)

    仿网易滑动门TAB导航菜单.htm

    仿网易滑动门TAB导航菜单.htm仿网易滑动门TAB导航菜单.htm

Global site tag (gtag.js) - Google Analytics