运行效果图:
实现原理:标签布局好了以后,标签所在View响应onClick事件。添加另外的标签View,不响应点击事件,用于实现动画效果。在标签的onClick事件中调整移动的起始位置,和滑动标签的状态。
布局文件activity_label.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="40dip" android:background="@android:drawable/title_bar" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:orientation="horizontal" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="图片" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_2" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="地图" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_3" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="搜索" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_4" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="问答" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_5" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="新闻" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" > <TextView android:id="@+id/label_6" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true" android:gravity="center" android:text="更多" /> </RelativeLayout> </LinearLayout> <TextView android:id="@+id/label_move" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:background="@android:drawable/editbox_background" android:gravity="center" android:text="图片" /> </RelativeLayout> </LinearLayout>
说明:
- 为了让被点击的标签所占区域更大,使用了android:layout_height="fill_parent"设置;
- 使用android:layout_weight="1"控制显示的相对大小;
主要代码:
import android.app.Activity; import android.os.Bundle; import android.view.Display; import android.view.View; import android.view.WindowManager; import android.view.View.OnClickListener; import android.view.animation.TranslateAnimation; import android.widget.TextView; public class LabelActivity extends Activity implements OnClickListener { /** * 标签字符 */ private String[] labelValues = {"图片", "地图", "搜索", "问答", "新闻", "更多"}; /** * 标签数组 */ private TextView[] labelViews = new TextView[6]; /** * 动画标签 */ private TextView labelMove; /** * 标签宽度 */ private int labelWidth; /** * 移动开始位置 */ private int fromX; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_label); setTitle("标签"); // 获得标签引用 labelViews[0] = (TextView) findViewById(R.id.label_1); labelViews[1] = (TextView) findViewById(R.id.label_2); labelViews[2] = (TextView) findViewById(R.id.label_3); labelViews[3] = (TextView) findViewById(R.id.label_4); labelViews[4] = (TextView) findViewById(R.id.label_5); labelViews[5] = (TextView) findViewById(R.id.label_6); labelMove = (TextView) findViewById(R.id.label_move); // 添加点击事件 for (int i = 0, length = labelViews.length; i< length; i++) { labelViews[i].setOnClickListener(this); } // 获得并设置标签宽度 WindowManager windowManager = getWindowManager(); Display display = windowManager.getDefaultDisplay(); labelWidth = display.getWidth() / 6; labelMove.setWidth(labelWidth); } @Override public void onClick(View v) { int index = 0; switch (v.getId()) { case R.id.label_1: index = 0; break; case R.id.label_2: index = 1; break; case R.id.label_3: index = 2; break; case R.id.label_4: index = 3; break; case R.id.label_5: index = 4; break; case R.id.label_6: index = 5; break; default: return; } // 移动View translate(labelMove, fromX, labelWidth * index); // 设置标题 labelMove.setText(labelValues[index]); // 更新fromX,为下次移动做准备 fromX = labelWidth * index; } /** * 将View从(fromX,0)移动到(toX,0) * @param view * @param fromX * @param toX */ public static void translate(View view, int fromX, int toX) { TranslateAnimation translateAnimation = new TranslateAnimation(fromX, toX, 0, 0); translateAnimation.setDuration(200); translateAnimation.setFillAfter(true); view.startAnimation(translateAnimation); } }
说明:
- labelMove:用于移动和标识被选中标签的View,可以通过改变这个View的属性来达到想要的选中效果;
- translate:把View水平方向移动;
- onClick中的switch获得需要的index,然后设置labelMove的属性和下次移动水平的开始位置;
相关推荐
标签栏是一个非常常见的控件,似乎也是一个比较简单的控件,但如果在标签下方加个下划线的话,就还是可以玩出挺多花来的。 网易严选的标签栏就做的很不错,里面隐藏着诸多细节: 手动滑动页面,下划线会跟着滑动。...
Android 使用Gallery_tabhost实现标签效果图源码 Android 例子源码根据CPU使用时间计算程序电量使用 Android 医院介绍电子书籍源码 android 图片涂鸦 Android 基于局域网的P2P聊天系统 Android 天气预报 Android ...
SSCustomBottomNavigation是带有曲线动画的可自定义的底部栏库。 实际功能是: 底部栏具有可自定义的文本,颜色,背景,图标。 高度可自定义的动画波 演示版 Gradle依赖 将其添加到存储库末尾的root build.gradle...
全书共分11章,主要以范例集的方式来讲述android的知识点,详细介绍了开发android的人机交互界面、android常用的开发控件、android手机收发短信等通信服务、开发android手机的自动服务功能和娱乐多媒体功能以及...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及...
运动标签栏适用于Flutter应用程序的精美动画小部件|预览| | --------- | ---------- | | |入门添加插件: dependencies : motion_tab_bar : ^0.1.5基本用法添加小部件 MotionTabController _tabController;...
这可能是我在Android上最喜欢的导航模式,但愿它在iOS上更常见! 这是React Native的非常简单的纯JavaScript实现。 有关此动画背后的工作原理的更多信息,请查看《 反弹”部分。 将其添加到您的项目 运行npm ...
52_发送状态栏通知.avi 所在项目:Notification 53_采用网页设计软件界面.avi 所在项目:htmlUI 54_tween动画.avi 所在项目:tween 55_frame动画的实现.avi 所在项目:frameAnimation 56_activity切换动画与页面...
Android材质导航(工具栏,导航抽屉,导航视图,选项卡,CardView,ViewPager) 物料导航的组成部分: 支持Android API 8+ 工具栏 导航抽屉(带有指示器动画) 导航视图 动态标签(自定义的Google SlidingTab / ...
UI/ UX设计理念标签已集成到进度栏中,并且标签根据如果标签的宽度尺寸大于进度的宽度尺寸,则标签将位于进度条的外侧(右侧),我们可以根据标签的颜色来考虑标签的颜色容器的宽度,如果程序的宽度
Android 一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎,在手机上的...
google android sdk开发范例大全 第二版 PDF 和 随书光盘代码 ISBN:9787115229649 目录 第1章 了解、深入、动手做 1.1 红透半边天的Android 1.2 本书目的及范例涵盖范围 1.3 如何阅读本书 ...
Android步进器 一个用于创建类似...步进器类型制表符编号标签进步舰队(故事) 在制品自定义图标步进纯文字步进 特征AndroidX导航组件片段过渡动画颜色定制多种步进器类型 安装将Jitpack存储库添加到您的根build.gradl