Android選中突出背景效果的底部導航欄功能
今天在群里看到一個底部導航選中突出效果像這樣
就想著 這個應該怎么做呢,我記得類似咸魚那種的是中間突出,不像這種 是選中哪個,哪個就突出
第一種方法
簡單快捷,讓UI幫忙切幾張帶突出背景的圖片,
選中切換圖片簡單粗暴
在群里找小伙伴要了UI的切圖一看給的6張圖片一樣大小,也不帶突出背景
于是想著有沒有第二種方法實現(xiàn)
百度了許久也許是我找的方法不對,也許是大家都沒遇到這樣的UI。
怎么辦,自己想想,靜下心來看UI效果,發(fā)現(xiàn)突出的地方有點像貝塞爾曲線
再細細分析一下,如果突出的是貝塞爾曲線那么如何畫出一條直線,固定的位置突出呢
貝塞爾曲線是Path 里面的api,而Path 是可以連續(xù)畫線的,
那么就好實現(xiàn)了,前面直接設(shè)置起點
mPath.moveTo(0, 0);//起始點
然后中間是直接的直接調(diào)用
mPath.lineTo(x,y);
需要突出就調(diào)用二階貝塞爾曲線
mPath.quadTo(x1,y1,x2,y2);
果然可行,畫出來效果是這樣
不錯 實現(xiàn)第一步了,但是仔細觀察發(fā)現(xiàn) 人家下面是有白色背景的,突出的地方也要白色背景,怎么搞呢!
又去查了下Path 和Paint Api 發(fā)現(xiàn) 有一種方法可以實現(xiàn)這樣的效果
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
畫筆要設(shè)置成 這種風格的
mPath.lineTo(getWidth(), getHeight()); mPath.lineTo(0, getHeight()); mPath.close(); //封閉path路徑
Path路徑全部占滿
然后就可以實現(xiàn)效果了
記得把畫筆顏色設(shè)置成白色的哦
mPaint.setColor(Color.WHITE);
果然可行!
一頓布局出來的效果是這樣的
好丑啊
不過已經(jīng)邁出成功的第一步了,繼續(xù)完善
首先這個突出的弧度好像跟UI不一樣呀
又是一頓分析,發(fā)現(xiàn)突出的時候是有三個曲線組成的
那么就會有三個控制點
畫的有點丑 湊合看
a b c 都是控制點
1-2 是第一段
2-3 是第二段
3-4 是第三段
三段對應三個控制點
所以我們要畫四階貝塞爾曲線
結(jié)果Path里面最多支持三階。。。。。。。
沒辦法只能拆開成三個了
根據(jù)圖可以算出 a b c 控制點和1 2 3 4點的位置
手機屏幕長度假設(shè)為w
現(xiàn)在底部是三個模塊那么一個模塊所占的距離 i=w/3
那么 1就是起始點
b是i的中心點
4是i點
Y方向的最高度為 -y(注意是負數(shù)哦)
假如按照三個貝塞爾曲線的長度都一樣那么各個點的位置分別是
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開始,現(xiàn)在是有3個模塊數(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值 然后重新繪制就完成點擊切換了
全部代碼
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個 根據(jù)實際情況寫 */ 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;//單個所占大小 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); } /** * 根據(jù)屏幕的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素) */ public int dip2px(float dpValue) { final float scale = getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } }
這樣就搞定了,中間突出那塊 我按照平分后又減去了一點距離計算的。上gif圖
代碼我放到github上了,可以直接下載運行demo了解一下!
到此這篇關(guān)于Android選中突出背景效果的底部導航欄的文章就介紹到這了,更多相關(guān)android底部導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android跨進程傳遞大數(shù)據(jù)的方法實現(xiàn)
這篇文章主要介紹了Android跨進程傳遞大數(shù)據(jù)的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03

解決Android SELinux權(quán)限問題記錄分析

Android Studio實現(xiàn)長方體表面積計算器