欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android選中突出背景效果的底部導(dǎo)航欄功能

 更新時(shí)間:2020年10月30日 16:52:34   作者:Small_Wave_Wave  
這篇文章主要介紹了Android選中突出背景效果的底部導(dǎo)航欄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

今天在群里看到一個(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了解一下!

github代碼鏈接

到此這篇關(guān)于Android選中突出背景效果的底部導(dǎo)航欄的文章就介紹到這了,更多相關(guān)android底部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Android中的腦殘?jiān)O(shè)計(jì)總結(jié)

    Android中的腦殘?jiān)O(shè)計(jì)總結(jié)

    本篇文章是對(duì)Android中的腦殘?jiān)O(shè)計(jì)進(jìn)行了分析與介紹,需要的朋友參考下
    2013-05-05
  • 解決Android SELinux權(quán)限問題記錄分析

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

    這篇文章主要為大家介紹了解決Android SELinux權(quán)限問題記錄分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • Android Studio實(shí)現(xiàn)長(zhǎng)方體表面積計(jì)算器

    Android Studio實(shí)現(xiàn)長(zhǎng)方體表面積計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)長(zhǎng)方體表面積計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • Android開發(fā)實(shí)例之多點(diǎn)觸控程序

    Android開發(fā)實(shí)例之多點(diǎn)觸控程序

    本文主要介紹 Android開發(fā)多點(diǎn)觸控,這里提供了詳細(xì)的資料和示例代碼,以及實(shí)現(xiàn)效果圖,有開發(fā)Android應(yīng)用需要這樣的功能的小伙伴可以參考下
    2016-08-08
  • Android Studio無法打開得問題解決方法

    Android Studio無法打開得問題解決方法

    這篇文章主要詳細(xì)介紹了Android Studio無法打開問題解決辦法,文中有詳細(xì)的解決步驟和圖文介紹,對(duì)我們解決這個(gè)問題有一定的幫助,需要的朋友可以參考下
    2023-07-07
  • 最新評(píng)論