自定义View之仿虾米音乐TabLayout

2023-11-01 10:38
文章标签 自定义 音乐 view 之仿 tablayout 虾米

本文主要是介绍自定义View之仿虾米音乐TabLayout，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写在开头

最近有点忙，好久没写文章了。最近公司App有个仿虾米音乐高大上tablayout的需求，网上百度了些没啥好的轮子，于是自己撸了一发。效果已实现，发出来，欢迎大家批评指正。

效果如下：
这里写图片描述

不太清楚，如何您正好有这个需求，欢迎下载提问题。
https://github.com/loveAndroidAndroid/XiaMiTablayout

实现思路

首先这个效果系统的tablayout是无法实现的，至少我没发现合适的方式，所以就想着自定义一个tablayout来实现此方式。我们可以看源码的tablayout实现方式，他其实就是一个自定义HorizontalScrollView，所以我们也来根据我们的业务需求实现一个自定义HorizontalScrollView。

主要就是以下几方面：

初始化自定义属性及一些初始化操作。
设置数据源。
关联viewpager及更新界面，添加方法设置当前显示tab。
重要： PageChangeListener实现各种渐变效果

初始化自定义属性及一些初始化操作

      public XiaMiTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initStyle(context, attrs);setFillViewport(true);setHorizontalScrollBarEnabled(false);mTabContainer = new LinearLayout(context);addView(mTabContainer, 0, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));mDataList = new ArrayList<>();}private void initStyle(Context context, AttributeSet attrs) {TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.XiaMiTabLayout, 0, 0);mNormalTextSize = typedArray.getDimensionPixelSize(R.styleable.XiaMiTabLayout_tab_normal_textSize, DEFAULT_NORMAL_TEXT_SIZE_SP);mSelectTextSize = typedArray.getDimensionPixelSize(R.styleable.XiaMiTabLayout_tab_select_textSize, DEFAULT_SELECT_TEXT_SIZE_SP);typedArray.recycle();}

设置数据源。

        /*** 设置数据源*/public void setDataList(List<String> dataList) {this.mDataList.clear();this.mDataList.addAll(dataList);}

关联viewpager及更新界面，添加方法设置当前显示tab。

       /*** 关联viewpager*/public void setupWithViewPager(ViewPager viewPager) {this.mViewPager = viewPager;if (viewPager == null) {throw new IllegalArgumentException("viewpager not is null");}PagerAdapter pagerAdapter = viewPager.getAdapter();if (pagerAdapter == null) {throw new IllegalArgumentException("pagerAdapter not is null");}this.mViewPager.addOnPageChangeListener(new TabPagerChanger());mTabCount = pagerAdapter.getCount();mCurrentTabPosition = viewPager.getCurrentItem();notifyDataSetChanged();}/*** 更新界面*/public void notifyDataSetChanged() {mTabContainer.removeAllViews();for (int i = 0; i < mTabCount; i++) {final int currentPosition = i;TextView tabTextView = createTextView();tabTextView.setText(mDataList.get(i));tabTextView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View view) {mViewPager.setCurrentItem(currentPosition);}});mTabContainer.addView(tabTextView, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT));}setSelectedTabView(mCurrentTabPosition);}/*** 第一次设置选中tab效果** @param position*/protected void setSelectedTabView(int position) {this.mCurrentTabPosition = position;for (int i = 0; i < mTabCount; i++) {View view = mTabContainer.getChildAt(i);if (view instanceof TextView) {TextView textView = (TextView) view;textView.setSelected(position == i);textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, position == i ? mSelectTextSize : mNormalTextSize);textView.setTypeface(position == i ? Typeface.DEFAULT_BOLD : Typeface.DEFAULT);textView.setTextColor(position == i ? DEFAULT_SELECT_TEXT_COLOR : DEFAULT_NORMAL_TEXT_COLOR);if (mCurrentTabPosition == i) {textView.setPadding(ScreenUtils.dipToPx(getContext(), 5), 0, ScreenUtils.dipToPx(getContext(), 5), ScreenUtils.dipToPx(getContext(), 6));} else {textView.setPadding(ScreenUtils.dipToPx(getContext(), 5), 0, ScreenUtils.dipToPx(getContext(), 5), ScreenUtils.dipToPx(getContext(), 10));}}}}

PageChangeListener实现各种渐变效果

  //利用估值器实现渐变private ArgbEvaluator argbEvaluator = new ArgbEvaluator();private IntEvaluator intEvaluator = new IntEvaluator();

    /*** pager监听*/private class TabPagerChanger implements ViewPager.OnPageChangeListener {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {final TextView selectedChild = (TextView) mTabContainer.getChildAt(position);final TextView nextChild = position + 1 < mTabContainer.getChildCount()? (TextView) mTabContainer.getChildAt(position + 1): null;if (selectedChild != null) {selectedChild.setTextSize(TypedValue.COMPLEX_UNIT_PX, mSelectTextSize - (mSelectTextSize - mNormalTextSize) * positionOffset);//初始颜色值int bgColor = DEFAULT_SELECT_TEXT_COLOR;if (positionOffset == 0) {//显示初始透明颜色bgColor = DEFAULT_SELECT_TEXT_COLOR;} else if (positionOffset > 1) {//滚动到一个定值后,颜色最深,而且不再加深bgColor = DEFAULT_NORMAL_TEXT_COLOR;} else {//滚动过程中渐变的颜色bgColor = (int) argbEvaluator.evaluate(positionOffset, DEFAULT_SELECT_TEXT_COLOR, DEFAULT_NORMAL_TEXT_COLOR);}selectedChild.setTextColor(bgColor);int pad = 6;if (positionOffset == 0) {//显示初始透明颜色pad = 6;} else if (positionOffset > 1) {//滚动到一个定值后,颜色最深,而且不再加深pad = 10;} else {//滚动过程中渐变的paddingpad = intEvaluator.evaluate(positionOffset, 6, 10);}selectedChild.setPadding(ScreenUtils.dipToPx(getContext(), 5), 0, ScreenUtils.dipToPx(getContext(), 5), ScreenUtils.dipToPx(getContext(), pad));if (positionOffset > 0.5) {selectedChild.setTypeface(Typeface.DEFAULT);} else {selectedChild.setTypeface(Typeface.DEFAULT_BOLD);}}if (nextChild != null) {nextChild.setTextSize(TypedValue.COMPLEX_UNIT_PX, mNormalTextSize + (mSelectTextSize - mNormalTextSize) * positionOffset);//初始颜色值int bgColor = DEFAULT_NORMAL_TEXT_COLOR;if (positionOffset == 0) {//显示初始透明颜色bgColor = DEFAULT_NORMAL_TEXT_COLOR;} else if (positionOffset > 1) {//滚动到一个定值后,颜色最深,而且不再加深bgColor = DEFAULT_SELECT_TEXT_COLOR;} else {//滚动过程中渐变的颜色bgColor = (int) argbEvaluator.evaluate(positionOffset, DEFAULT_NORMAL_TEXT_COLOR, DEFAULT_SELECT_TEXT_COLOR);}nextChild.setTextColor(bgColor);int pad = 10;if (positionOffset == 0) {pad = 10;} else if (positionOffset > 1) {pad = 6;} else {//滚动过程中渐变的paddingpad = intEvaluator.evaluate(positionOffset, 10, 6);}nextChild.setPadding(ScreenUtils.dipToPx(getContext(), 5), 0, ScreenUtils.dipToPx(getContext(), 5), ScreenUtils.dipToPx(getContext(), pad));if (Math.abs(positionOffset) > 0.5) {nextChild.setTypeface(Typeface.DEFAULT_BOLD);} else {nextChild.setTypeface(Typeface.DEFAULT);}}}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {}

写在末尾

欢迎下载Demo批评指正，如您对指示器也有要求但无思路，也可私信联系，共同探讨（已实现）。

这篇关于自定义View之仿虾米音乐TabLayout的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/322360。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

1、MVC MVC（Model-View-Controller） 是一种常用的架构模式，用于分离应用程序的逻辑、数据和展示。它通过三个核心组件（模型、视图和控制器）将应用程序的业务逻辑与用户界面隔离，促进代码的可维护性、可扩展性和模块化。在 MVC 模式中，各组件可以与多种设计模式结合使用，以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用： 1. Model（模型）
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...
MFC中App,Doc,MainFrame,View各指针的互相获取

MFC中App,Doc,MainFrame,View各指针的互相获取

纸上得来终觉浅，为了熟悉获取方法，我建了个SDI。 首先说明这四个类的执行顺序是App->Doc->Main->View 另外添加CDialog类获得各个指针的方法。 多文档的获取有点小区别，有时间也总结一下。 //  App void CSDIApp::OnApp() {      //  App      //  Doc     CDocument *pD
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2