热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android选中突出背景效果的底部导航栏功能

这篇文章主要介绍了Android选中突出背景效果的底部导航栏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

今天在群里看到一个底部导航选中突出效果像这样

就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出

第一种方法

简单快捷,让UI帮忙切几张带突出背景的图片,

选中切换图片简单粗暴

在群里找小伙伴要了UI的切图一看给的6张图片一样大小,也不带突出背景

于是想着有没有第二种方法实现

百度了许久也许是我找的方法不对,也许是大家都没遇到这样的UI。

怎么办,自己想想,静下心来看UI效果,发现突出的地方有点像贝塞尔曲线

再细细分析一下,如果突出的是贝塞尔曲线那么如何画出一条直线,固定的位置突出呢

贝塞尔曲线是Path 里面的api,而Path 是可以连续画线的,

那么就好实现了,前面直接设置起点 

mPath.moveTo(0, 0);//起始点

然后中间是直接的直接调用 

mPath.lineTo(x,y);

需要突出就调用二阶贝塞尔曲线

mPath.quadTo(x1,y1,x2,y2);

果然可行,画出来效果是这样

不错 实现第一步了,但是仔细观察发现 人家下面是有白色背景的,突出的地方也要白色背景,怎么搞呢!

又去查了下Path 和Paint Api 发现 有一种方法可以实现这样的效果

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

画笔要设置成 这种风格的

mPath.lineTo(getWidth(), getHeight());
mPath.lineTo(0, getHeight());
mPath.close(); //封闭path路径

Path路径全部占满

然后就可以实现效果了

记得把画笔颜色设置成白色的哦

mPaint.setColor(Color.WHITE);

果然可行!

一顿布局出来的效果是这样的

好丑啊

不过已经迈出成功的第一步了,继续完善

首先这个突出的弧度好像跟UI不一样呀

又是一顿分析,发现突出的时候是有三个曲线组成的

那么就会有三个控制点

画的有点丑 凑合看

a b c 都是控制点
1-2 是第一段
2-3 是第二段
3-4 是第三段

三段对应三个控制点

所以我们要画四阶贝塞尔曲线

结果Path里面最多支持三阶。。。。。。。

没办法只能拆开成三个了

根据图可以算出 a b c 控制点和1 2 3 4点的位置

手机屏幕长度假设为w

现在底部是三个模块那么一个模块所占的距离 i=w/3

那么 1就是起始点 

b是i的中心点

4是i点

Y方向的最高度为 -y(注意是负数哦)

假如按照三个贝塞尔曲线的长度都一样那么各个点的位置分别是

1(0,0)
 
2(i/2/2,y/2)
3(i-i/2/2,y/2)
4(i,0)
a(i/2/2/2,y/2/2/2)
 
b(i/2,y)
 
c(i-i/2/2/2,y/2/2/2)

那么我们把这些点套入贝塞尔曲线里面

//第一条贝塞尔曲线     a          2
mPath.quadTo(i / 2 / 2 / 2 , -(minHeight / 2 / 2 / 2), i / 2 / 2 , -(minHeight / 2));
//第二条贝塞尔曲线     b      3
mPath.quadTo(i / 2 + i , -minHeight, i - i / 2 / 2 + i , -(minHeight / 2));
//第三条贝塞尔曲线     c      4
mPath.quadTo(i - i / 2 / 2 / 2 , -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);

然后这是第一模块的,后面模块的计算就是加上几段i值

模块从1开始,现在是有3个模块数值就是 (1 2 3) 

//第一条贝塞尔曲线     a          2
mPath.quadTo(i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i / 2 / 2 + i * (count - 1) + minHeight / 5, -(minHeight / 2));
//第二条贝塞尔曲线     b      3
mPath.quadTo(i / 2 + i * (count - 1), -minHeight, i - i / 2 / 2 + i * (count - 1) - minHeight / 5, -(minHeight / 2));
//第三条贝塞尔曲线     c      4
mPath.quadTo(i - i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);

这样就可以直接设置 count值 然后重新绘制就完成点击切换了

全部代码

package com.wavewave.mylibrary;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
 
import androidx.annotation.Nullable;
 
/**
 * @author wavewave
 * @CreateDate: 2020/10/28 10:23 AM
 * @Description: 底部导航 选中突出View 背景
 * @Version: 1.0
 */
public class BottomOutNavigation extends View {
 private Paint mPaint;
 //起始点
 private int beginY = dip2px(0);
 //边距
 private int margin = dip2px(0);
 /**
  * 默认 突出最高点 Y
  */
 private int minHeight = dip2px(40);
 
 //第几个从0开始
 private int count = 1;
 /**
  * 默认3个 根据实际情况写
  */
 private int maxCount = 3;
 public static String TAG = "LineView";
 private int height;
 private int width;
 private Path mPath;
 
 public BottomOutNavigation(Context context) {
  this(context, null);
 }
 
 public BottomOutNavigation(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public BottomOutNavigation(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init();
 }
 
 private void init() {
  mPath = new Path();
  mPaint = new Paint();
//  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  mPaint.setColor(Color.WHITE);
  mPaint.setAntiAlias(true);//抗锯齿
  //2、通过Resources获取
  DisplayMetrics dm = getResources().getDisplayMetrics();
  height = dm.heightPixels;
  width = dm.widthPixels;
 }
 
 /**
  * 设置选择
  *
  * @param count
  */
 public void setCount(int count) {
  this.count = count;
  invalidate();
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int i = width / maxCount;//单个所占大小
  Log.d(TAG, "i:" + i);
  mPath.reset();
  mPath.moveTo(0, 0);//起始点
  mPath.lineTo(margin + i * (count - 1), 0);
//
  //第一条贝塞尔曲线     a          2
  mPath.quadTo(i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i / 2 / 2 + i * (count - 1) + minHeight / 5, -(minHeight / 2));
  //第二条贝塞尔曲线     b      3
  mPath.quadTo(i / 2 + i * (count - 1), -minHeight, i - i / 2 / 2 + i * (count - 1) - minHeight / 5, -(minHeight / 2));
  //第三条贝塞尔曲线     c      4
  mPath.quadTo(i - i / 2 / 2 / 2 + i * (count - 1), -(minHeight / 2 / 2 / 2), i + i * (count - 1), 0);
 
  mPath.lineTo(width, beginY);
  mPath.lineTo(getWidth(), getHeight());
  mPath.lineTo(0, getHeight());
  mPath.close(); //封闭path路径
  canvas.drawPath(mPath, mPaint);
 }
 /**
  * 根据屏幕的分辨率从 dp 的单位 转成为 px(像素)
  */
 public int dip2px(float dpValue) {
  final float scale = getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
 
}

这样就搞定了,中间突出那块 我按照平分后又减去了一点距离计算的。上gif图

代码我放到github上了,可以直接下载运行demo了解一下!

github代码链接

到此这篇关于Android选中突出背景效果的底部导航栏的文章就介绍到这了,更多相关android底部导航栏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库,支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理,可以轻松实现复杂的功能。 ... [详细]
  • Windows 系统下 MySQL 8.0.11 的安装与配置
    本文详细介绍了在 Windows 操作系统中安装和配置 MySQL 8.0.11 的步骤,包括环境准备、安装过程以及后续配置,帮助用户顺利完成数据库的部署。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
author-avatar
曹莹888淑女
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有