Android自定义view实现标签栏功能(只支持固定两个标签)

实现效果图

主要代码

完整源代码

class TabView(context: Context, attributeSet: AttributeSet?) : LinearLayout(context, attributeSet) {
 private lateinit var firstTab: View
 private lateinit var secondTab: View
 private val firstTabIndex = 0
 private val secondTabIndex = 1
 private var selectedTab = firstTabIndex
 private val textSize = 20f
 private val bottomSplitColor = "#FA871E"
 private val centerSplitColor = "#666666"
 private val bottomSplitWidth = 50
 private val bottomSplitHeight = 4
 private val centerSplitWidth = 1
 private val centerSplitHeight = 40
 private lateinit var mOnSwitchListener: OnSwitchListener
 fun initTabs(
  firstTabText: String,
  secondTabText: String,
  selectedIndex: Int,
  onSwitchListener: OnSwitchListener
 ) {
  mOnSwitchListener = onSwitchListener
  setOrientation()
  firstTab = addTab(firstTabText)
  addCenterSplit()
  secondTab = addTab(secondTabText)
  selectTab(selectedIndex)
  setOnClickListener { switchTab() }
 }
 interface OnSwitchListener {
  fun onSwitched(selectedIndex: Int)
 }
 private fun selectTab(tabIndex: Int) {
  if (tabIndex == firstTabIndex) {
   firstTab.visibility = View.VISIBLE
   secondTab.visibility = View.INVISIBLE
  } else {
   firstTab.visibility = View.INVISIBLE
   secondTab.visibility = View.VISIBLE
  }
  selectedTab = tabIndex
 }
 private fun switchTab() {
  if (selectedTab == firstTabIndex) {
   selectTab(secondTabIndex)
  } else {
   selectTab(firstTabIndex)
  }
  mOnSwitchListener.onSwitched(selectedTab)
 }
 private fun setOrientation() {
  orientation = HORIZONTAL
 }
 private fun getBottomSplitView(): View {
  val view = View(context)
  view.setBackgroundColor(Color.parseColor(bottomSplitColor))
  return view
 }
 private fun getBottomSplitLayoutParams(): LayoutParams {
  val layoutParams = LayoutParams(bottomSplitWidth, bottomSplitHeight)
  layoutParams.setMargins(3, 3, 3, 3)
  layoutParams.gravity = Gravity.CENTER_HORIZONTAL
  return layoutParams
 }
 private fun addCenterSplit() {
  val view = View(context)
  view.setBackgroundColor(Color.parseColor(centerSplitColor))
  addView(view, getCenterSplitLayoutParams())
 }
 private fun getCenterSplitLayoutParams(): LayoutParams {
  val layoutParams = LayoutParams(centerSplitWidth, centerSplitHeight)
  layoutParams.setMargins(3, 0, 3, 0)
  layoutParams.gravity = Gravity.CENTER_VERTICAL
  return layoutParams
 }
 private fun addTab(text: String): View {
  var linearLayout = LinearLayout(context)
  linearLayout.orientation = VERTICAL
  val textView = getTextView(text)
  linearLayout.addView(
   textView,
   LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
  )
  val splitView = getBottomSplitView()
  linearLayout.addView(splitView, getBottomSplitLayoutParams())
  addView(linearLayout, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT))
  return splitView
 }
 private fun getTextView(text: String): TextView {
  val textView = TextView(context)
  textView.text = text
  textView.setPadding(10, 10, 10, 10)
  textView.textSize = textSize
  return textView
 }
}

https://gitee.com/cxyzy1/custTabView

总结

到此这篇关于Android自定义view实现标签栏功能(只支持固定两个标签)的文章就介绍到这了,更多相关android自定义view标签栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Android Navigation TabBar控件实现多彩标签栏

    Android Navigation TabBar控件实现多彩标签栏

    先看看效果图: 源码下载:Android Navigation TabBar控件实现多彩标签栏 代码: MainActivity.java package com.bzu.gxs.meunguide; import android.app.Activity; import android.graphics.Color; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; im

  • Android自定义view实现圆的扩散效果

    Android自定义view实现圆的扩散效果

    本文实例为大家分享了Android自定义View的实现水波纹,供大家参考,具体内容如下 一.实现效果 MainActivity.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro

  • android配合viewpager实现可滑动的标签栏示例分享

    复制代码 代码如下: package com.example.playtabtest.view; import com.example.playtabtest.R; import android.app.Activity;import android.content.Context;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;impor

  • Android实现网易严选标签栏滑动效果

    Android实现网易严选标签栏滑动效果

    标签栏是一个非常常见的控件,似乎也是一个比较简单的控件,但如果在标签下方加个下划线的话,就还是可以玩出挺多花来的. 网易严选的标签栏就做的很不错,里面隐藏着诸多细节: 手动滑动页面,下划线会跟着滑动. 选择一个标签后,下划线会有滑动过去的动画. 选择最左端或最右端的标签,标签栏会进行滑动,使得标签向中间靠拢(如果可以滑的话). 仔细分析下,需要在简单标签栏的基础上实现以下逻辑: 画出下划线. 监听手动滑动页面事件,实时更新下划线位置. 切换标签时,开始下划线滑动的动画,并判断是否要同时滑动标签栏

  • Android View教程之自定义验证码输入框效果

    Android View教程之自定义验证码输入框效果

    前言 首先,我们来看看实现的是怎么样的效果: 如果我们拿到这样的UI,想到的布局应该是用4个EditText包在横向的LinearLayout里面,但今天要讲的View,所以我们决定用一个自定义的EditText 画出来. 学到什么? 基本理解画布概念 画布的状态.平移 布局测量 画图片 功能需求 高亮当前输入框 输入满4个数字自动调用方法 思路 完全重画一个EditText,就包含了测量布局和重新绘制这两个关键步骤.好了,到这里理一下整体的思路: 根据验证码个数以及边框大小来计算输入框显示的宽

  • Android自定义View实现课程表表格

    Android自定义View实现课程表表格

    自己闲下来时间写的一个课表控件,使用的自定义LinearLayout,里面View都是用代码实现的,最终效果如下图,写的可能有问题希望多多指点 创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数,和节数大概的布局三这样的 根据上面的看来觉得总体布局我分了两个 上面的星期是一个 下面的节数和格子是一个  总体使用Vertical  而单独内部者使用了Horizontal布局  中间使用了两种布局线条 是这样的 /** * 横的分界线 * * @return */ priva

  • Android自定义view实现标签栏功能(只支持固定两个标签)

    实现效果图 主要代码 完整源代码 class TabView(context: Context, attributeSet: AttributeSet?) : LinearLayout(context, attributeSet) { private lateinit var firstTab: View private lateinit var secondTab: View private val firstTabIndex = 0 private val secondTabIndex =

  • Android自定义View展开菜单功能的实现

    Android自定义View展开菜单功能的实现

    先给大家展示下效果图,如果大家感觉不错,请参考实现代码. 思路 1.下角Button的父View加入一个FrameLayout,也就是图中全屏透明灰色部分. 菜单没有弹出的时候设置为不可见. 设置FrameLayout点击事件,点击的时候缩回菜单. 对应init() 2.rameLayout中加入菜单按钮,也就是弹出的那三个. 菜单没有弹出的时候设置为不可见. 对应addElement()和freshElement() 3.右下角的按钮,旋转图标(也可以不旋转). 对应setRotateAnim

  • Android自定义View画圆功能

    Android自定义View画圆功能

    本文实例为大家分享了Android自定义View画圆的具体代码,供大家参考,具体内容如下 引入布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools&q

  • Android自定义View实现时钟功能

    Android自定义View实现时钟功能

    最近在练习自定义view, 想起之前面试的时候笔试有道题是写出自定义一个时钟的关键代码. 今天就来实现一下. 步骤依然是先分析, 再上代码. 实现效果 View分析 时钟主要分为五个部分: 1.中心点: 圆心位置2.圆盘: 以中心点为圆心,drawCircle画个圆3.刻度: paint有个aip, setPathEffect可以根据path画特效, 那么刻度就可以根据圆的path画一个矩形path的特效, 并且这个api只会画特效, 不会画出圆. /** * shape: 特效的path, 这

  • Android 自定义View 密码框实例代码

    Android 自定义View 密码框实例代码

    暴露您view中所有影响可见外观的属性或者行为. •通过XML添加和设置样式 •通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 效果图展示: 支持的样式 可以通过XML定义影响外边和行为的属性如下 边框圆角值,边框颜色,分割线颜色,边框宽度,密码长度,密码大小,密码颜色 <declare-styleable name="PasswordInputView"> <attr name="borde

  • Android自定义View实现照片裁剪框与照片裁剪功能

    Android自定义View实现照片裁剪框与照片裁剪功能

    本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

  • Android自定义View实现搜索框（SearchView）功能

    Android自定义View实现搜索框（SearchView）功能

    概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

  • Android自定义View实现打钩动画功能

    Android自定义View实现打钩动画功能

    先上效果图 动图 静态图 1. 回顾 [Android自定义View:一个精致的打钩小动画]上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码,虽然思路还在,但是部分代码还是不能一下子的看得明白... 我的天,这得立马重构啊~ 恰好,有个简友 ChangQin 模仿写了一下这个控件,我看了后觉得我也可以这样实现一下. 2. 深思 关于控件绘制的思路,可以去看看 上一篇文章,这里就不再分析了.这里先来分析一下上一篇文章里面,控件里面的一些顽处

  • Android自定义View之绘制圆形头像功能

    前言 做APP应用开发的时候,用户头像肯定是必不可少的,但是90%以上的需求头像都是圆形的.那么,如何通过自定义View的方式实现圆形头像呢,那么,本片博文会告诉你不仅仅是实现过程.一定会有意想不到的收获哦! 最终效果 国际惯例,我们先来看最终实现的效果图 自定义RoundImageView继承自ImageView public class RoundImageView extends ImageView { public RoundImageView(Context context) { su

  • Android自定义View 实现闹钟唤起播放闹钟铃声功能

    Android自定义View 实现闹钟唤起播放闹钟铃声功能

    先上图看一下闹钟唤期页面的效果 实现的功能: 1:转动的图片根据天气情况更换 2:转动时间可以设置,转动结束,闹铃声音就结束 3:光圈颜色渐变效果 直接上代码啦: package com.yuekong.sirius.extension.customview; import android.animation.Animator; import android.animation.ValueAnimator; import android.content.Context; import andro

随机推荐