Tab切换动画滑动效果的一个简单实现

这篇博客介绍了如何模仿HTC手机系统程序中的Tab切换效果,通过自定义控件来实现点击切换时的滑动动画。内容涉及使用activityGroup或tabhost,并隐藏tabwidget以达成目标效果。
摘要由CSDN通过智能技术生成

看到很多应用程序中,点击切换tab时,之前选中的tab会滑动到点击重新选中的tab上。


最初是在htc的手机上看到这个效果的,htc手机的系统程序tab切换都有这样的效果,如联系人等,感觉效果简单实用,于是自己尝试简单实现了一下。


基本思想就是用自定义的控件来代替tabwidget,以实现效果。内容的话,可以用activityGroup来实现,或者用tabhost,然后在布局中隐藏tabwidget。


实现非常简单,代码如下:

package bbk.cly.MovableTab;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;

/**
 * 主activity
 * @author cly
 */
public class MovableTabActivity extends Activity implements OnClickListener
{
	private static final String TAG = "MovableTabActivity";
	private MovableTabVi
微信小程序中的tab切换下划线滑动效果是指在用户切换不同tab(标签)时,底部的指示线会随着当前选中的tab移动,产生滑动效果。这样的效果通常用于给用户提供视觉上的反馈,表明当前所在的页面或选项。 要实现这种效果,可以通过微信小程序提供的组件和API来完成。具体来说,可以通过以下步骤实现: 1. 使用`<view>`标签创建tab栏,并为每个tab设置相应的数据绑定和点击事件处理函数。 2. 使用`wx.createAnimation`创建一个动画实例,并通过动画方法设置下划线的移动效果。 3. 在tab点击事件的回调函数中,根据当前选中的tab位置,更新下划线的样式,使下划线移动到相应的位置。 这里是一个简化的代码示例: ```javascript Page({ data: { activeTab: 0, tabWidth: 250, // 假设每个tab的宽度是250px tabHeight: 40 // 假设下划线的高度是40px }, changeTab(e) { const newActiveTab = e.detail.index; this.setData({ activeTab: newActiveTab }); this.updateUnderline(newActiveTab); }, updateUnderline(index) { const animation = wx.createAnimation({ duration: 300, timingFunction: 'ease', }); const x = index * this.data.tabWidth; animation.move({ x: x, y: 0, duration: 300, timingFunction: 'ease', }).step(); this.setData({ underlineStyle: animation.export() }); } }); ``` 在wxml中定义tab栏和下划线: ```xml <view class="tab-bar"> <block wx:for="{{tabs}}" wx:key="unique"> <view class="tab-item" bindtap="changeTab" data-index="{{index}}" wx:if="{{index === activeTab}}"> {{item.title}} </view> </block> <view class="tab-underline" style="{{underlineStyle}}"></view> </view> ``` 在wxss中设置tab栏和下划线的样式: ```css .tab-bar { display: flex; } .tab-item { height: 40px; line-height: 40px; /* 其他样式 */ } .tab-underline { height: 4px; width: 250px; background-color: #1AAD19; position: absolute; bottom: 0; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值