Android選中突出背景效果的底部導(dǎo)航欄功能
今天在群里看到一個(gè)底部導(dǎo)航選中突出效果像這樣
就想著 這個(gè)應(yīng)該怎么做呢，我記得類似咸魚那種的是中間突出，不像這種 是選中哪個(gè)，哪個(gè)就突出
第一種方法
簡(jiǎn)單快捷，讓UI幫忙切幾張帶突出背景的圖片，
選中切換圖片簡(jiǎn)單粗暴
在群里找小伙伴要了UI的切圖一看給的6張圖片一樣大小，也不帶突出背景
于是想著有沒有第二種方法實(shí)現(xiàn)
百度了許久也許是我找的方法不對(duì)，也許是大家都沒遇到這樣的UI。
怎么辦，自己想想，靜下心來看UI效果，發(fā)現(xiàn)突出的地方有點(diǎn)像貝塞爾曲線
再細(xì)細(xì)分析一下，如果突出的是貝塞爾曲線那么如何畫出一條直線，固定的位置突出呢
貝塞爾曲線是Path 里面的api，而Path 是可以連續(xù)畫線的，
那么就好實(shí)現(xiàn)了，前面直接設(shè)置起點(diǎn)
mPath.moveTo(0, 0);//起始點(diǎn)
然后中間是直接的直接調(diào)用
mPath.lineTo(x,y);
需要突出就調(diào)用二階貝塞爾曲線
mPath.quadTo(x1,y1,x2,y2）;
果然可行，畫出來效果是這樣
不錯(cuò) 實(shí)現(xiàn)第一步了，但是仔細(xì)觀察發(fā)現(xiàn) 人家下面是有白色背景的，突出的地方也要白色背景，怎么搞呢！
又去查了下Path 和Paint Api 發(fā)現(xiàn) 有一種方法可以實(shí)現(xiàn)這樣的效果
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
畫筆要設(shè)置成 這種風(fēng)格的
mPath.lineTo(getWidth(), getHeight()); mPath.lineTo(0, getHeight()); mPath.close(); //封閉path路徑
Path路徑全部占滿
然后就可以實(shí)現(xiàn)效果了
記得把畫筆顏色設(shè)置成白色的哦
mPaint.setColor(Color.WHITE);
果然可行！
一頓布局出來的效果是這樣的
好丑啊
不過已經(jīng)邁出成功的第一步了，繼續(xù)完善
首先這個(gè)突出的弧度好像跟UI不一樣呀
又是一頓分析，發(fā)現(xiàn)突出的時(shí)候是有三個(gè)曲線組成的
那么就會(huì)有三個(gè)控制點(diǎn)
畫的有點(diǎn)丑 湊合看
a b c 都是控制點(diǎn)
1-2 是第一段
2-3 是第二段
3-4 是第三段
三段對(duì)應(yīng)三個(gè)控制點(diǎn)
所以我們要畫四階貝塞爾曲線
結(jié)果Path里面最多支持三階。。。。。。。
沒辦法只能拆開成三個(gè)了
根據(jù)圖可以算出 a b c 控制點(diǎn)和1 2 3 4點(diǎn)的位置
手機(jī)屏幕長(zhǎng)度假設(shè)為w
現(xiàn)在底部是三個(gè)模塊那么一個(gè)模塊所占的距離 i=w/3
那么 1就是起始點(diǎn)
b是i的中心點(diǎn)
4是i點(diǎn)
Y方向的最高度為 -y(注意是負(fù)數(shù)哦)
假如按照三個(gè)貝塞爾曲線的長(zhǎng)度都一樣那么各個(gè)點(diǎn)的位置分別是
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)
那么我們把這些點(diǎn)套入貝塞爾曲線里面
//第一條貝塞爾曲線 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);
然后這是第一模塊的，后面模塊的計(jì)算就是加上幾段i值
模塊從1開始，現(xiàn)在是有3個(gè)模塊數(shù)值就是 （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);
這樣就可以直接設(shè)置 count值 然后重新繪制就完成點(diǎn)擊切換了
全部代碼
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: 底部導(dǎo)航 選中突出View 背景
* @Version: 1.0
*/
public class BottomOutNavigation extends View {
private Paint mPaint;
//起始點(diǎn)
private int beginY = dip2px(0);
//邊距
private int margin = dip2px(0);
/**
* 默認(rèn) 突出最高點(diǎn) Y
*/
private int minHeight = dip2px(40);
//第幾個(gè)從0開始
private int count = 1;
/**
* 默認(rèn)3個(gè) 根據(jù)實(shí)際情況寫
*/
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;
}
/**
* 設(shè)置選擇
*
* @param count
*/
public void setCount(int count) {
this.count = count;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int i = width / maxCount;//單個(gè)所占大小
Log.d(TAG, "i:" + i);
mPath.reset();
mPath.moveTo(0, 0);//起始點(diǎn)
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);
}
/**
* 根據(jù)屏幕的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)
*/
public int dip2px(float dpValue) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
這樣就搞定了，中間突出那塊 我按照平分后又減去了一點(diǎn)距離計(jì)算的。上gif圖
代碼我放到github上了，可以直接下載運(yùn)行demo了解一下！
到此這篇關(guān)于Android選中突出背景效果的底部導(dǎo)航欄的文章就介紹到這了,更多相關(guān)android底部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android跨進(jìn)程傳遞大數(shù)據(jù)的方法實(shí)現(xiàn)
這篇文章主要介紹了Android跨進(jìn)程傳遞大數(shù)據(jù)的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Android中的序列化淺析,本文講解了序列化原因、序列化方法和代碼實(shí)現(xiàn)等內(nèi)容,需要的朋友可以參考下2015-03-03
Flutter開發(fā)實(shí)現(xiàn)底部留言板
這篇文章主要為大家詳細(xì)介紹了Flutter開發(fā)實(shí)現(xiàn)底部留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Android模仿美團(tuán)頂部的滑動(dòng)菜單實(shí)例代碼
最近在工作遇到一個(gè)需要，要做一個(gè)滑動(dòng)菜單，實(shí)現(xiàn)的效果類似美團(tuán)頂部的滑動(dòng)菜單，所以下面這篇文章主要給大家介紹了關(guān)于Android如何模仿美團(tuán)頂部滑動(dòng)菜單的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
Android中的腦殘?jiān)O(shè)計(jì)總結(jié)
解決Android SELinux權(quán)限問題記錄分析
Android Studio實(shí)現(xiàn)長(zhǎng)方體表面積計(jì)算器
Android開發(fā)實(shí)例之多點(diǎn)觸控程序
