Android自定義字母導(dǎo)航欄
本文實(shí)例為大家分享了Android字母導(dǎo)航欄的具體代碼,供大家參考,具體內(nèi)容如下
效果
實(shí)現(xiàn)邏輯
明確需求
字母導(dǎo)航欄在實(shí)際開發(fā)中還是比較多見的,城市選擇、名稱選擇等等可能需要到。 現(xiàn)在要做到的就是在滑動控件過程中可以有內(nèi)容以及 下標(biāo)的回調(diào),方便處理其他邏輯!
整理思路
1、確定控件的尺寸,防止內(nèi)容顯示不全。相關(guān)的邏輯在onMeasure()方法中處理;
2、繪制顯示的內(nèi)容,在按下和抬起不同狀態(tài)下文字、背景的顏色。相關(guān)邏輯在onDraw()方法中;
3、滑動事件的處理以及事件回調(diào)。相關(guān)邏輯在onTouchEvent()方法中;
動手實(shí)現(xiàn)
在需求明確、思路清晰的情況下就要開始動手實(shí)現(xiàn)(需要了解自定義View的一些基礎(chǔ)API)。核心代碼就onDraw()中。在代碼中有思路和注釋,可以結(jié)合代碼一起看看。如果有疑惑、優(yōu)化、錯誤的地方請在評論區(qū)提出,共同進(jìn)步!
完整代碼
/**
 * 自定義字母導(dǎo)航欄
 * 
 * 總的來說就四步
 * 1、測量控件尺寸{@link #onMeasure(int, int)}
 * 2、繪制顯示內(nèi)容(背景以及字符){@link #onDraw(Canvas)}
 * 3、處理滑動事件{@link #onTouchEvent(MotionEvent)}
 * 4、暴露接口{@link #setOnNavigationScrollerListener(OnNavigationScrollerListener)}
 *
 * @attr customTextColorDefault //導(dǎo)航欄默認(rèn)文字顏色
 * @attr customTextColorDown //導(dǎo)航欄按下文字顏色
 * @attr customBackgroundColorDown //導(dǎo)航欄按下背景顏色
 * @attr customLetterDivHeight //導(dǎo)航欄內(nèi)容高度間隔
 * @attr customTextSize //導(dǎo)航欄文字尺寸
 * @attr customBackgroundAngle //導(dǎo)航欄背景角度
 */
public class CustomLetterNavigationView extends View {
  private static final String TAG = "CustomLetterNavigation";
  //導(dǎo)航內(nèi)容
  private String[] mNavigationContent;
  //導(dǎo)航欄內(nèi)容間隔
  private float mContentDiv;
  //導(dǎo)航欄文字大小
  private float mContentTextSize;
  //導(dǎo)航欄文字顏色
  private int mContentTextColor;
  //導(dǎo)航欄按下時背景顏色
  private int mBackgroundColor;
  //導(dǎo)航欄按下時圓角度數(shù)
  private int mBackGroundAngle = 0;
  //導(dǎo)航欄按下時文字顏色
  private int mDownContentTextColor;
  private TextPaint mTextPaint;
  private Paint mPaintBackgrount;
  private boolean mEventActionState = false;
  private String mCurrentLetter = "";
  private OnNavigationScrollerListener mOnNavigationScrollerListener;
  private final RectF mRectF = new RectF();
  public CustomLetterNavigationView(Context context) {
    this(context, null);
  }
  public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }
  public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initDefaultData();//初始化默認(rèn)數(shù)據(jù)
    initAttrs(context, attrs);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    /**
     * <P>
     *   這里我們分為兩步
     *
     *   1、繪制背景
     *    這里簡單,直接調(diào)用Canvas的drawRoundRect()方法直接繪制
     *   2、繪制顯示文本
     *    繪制文字首先要定位,定位每個字符的坐標(biāo)
     *    X軸簡單,寬度的一半
     *    Y軸坐標(biāo)通過每個字符的高h(yuǎn)eightShould乘以已繪制字符的數(shù)目
     * </P>
     */
    int mViewWidth = getWidth();
    //繪制背景
    mRectF.set(0, 0, mViewWidth, getHeight());
    if (mEventActionState) {
      mTextPaint.setColor(mDownContentTextColor);
      mPaintBackgrount.setColor(mBackgroundColor);
      canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
    } else {
      mTextPaint.setColor(mContentTextColor);
      mPaintBackgrount.setColor(Color.TRANSPARENT);
      Drawable mBackground = getBackground();
      if (mBackground instanceof ColorDrawable) {
        mPaintBackgrount.setColor(((ColorDrawable) mBackground).getColor());
      }
      canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
    }
    //繪制文本
    float textX = mViewWidth / 2;
    //X軸坐標(biāo)
    int contentLenght = getContentLength();
    //Y軸坐標(biāo)(這里在測量的時候多加入了兩個間隔高度要減去,同時還有Padding值)
    float heightShould = (getHeight() - mContentDiv * 2 - getPaddingTop() - getPaddingBottom()) / contentLenght;
    for (int i = 0; i < contentLenght; i++) {
      //計算Y軸的坐標(biāo)
      float startY = ((i + 1) * heightShould) + getPaddingTop();
      //繪制文字
      canvas.drawText(mNavigationContent[i], textX, startY, mTextPaint);
    }
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    /**
     * 這里主要處理手指滑動事件
     */
    float mEventY = event.getY();
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        //手指按下的時候,修改Enent狀態(tài)、重繪背景、觸發(fā)回調(diào)
        mEventActionState = true;
        invalidate();
        if (mOnNavigationScrollerListener != null) {
          mOnNavigationScrollerListener.onDown();
        }
        scrollCount(mEventY);
        break;
      case MotionEvent.ACTION_MOVE:
        scrollCount(mEventY);
        break;
      case MotionEvent.ACTION_CANCEL:
      case MotionEvent.ACTION_UP:
        //手指離開的時候,修改Enent狀態(tài)、重繪背景、觸發(fā)回調(diào)
        mEventActionState = false;
        invalidate();
        if (mOnNavigationScrollerListener != null) {
          mOnNavigationScrollerListener.onUp();
        }
        break;
    }
    return true;
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    /**
     * <p>
     *   這里做了簡單的適應(yīng),其目的就是為了能夠正常的顯示我們的內(nèi)容
     *
     *   不管設(shè)置的是真實(shí)尺寸或者是包裹內(nèi)容,都會以內(nèi)容的最小尺寸為
     *   基礎(chǔ),如果設(shè)置的控件尺寸大于我們內(nèi)容的最小尺寸,就使用控件
     *   尺寸,反之使用內(nèi)容的最小尺寸!
     * </p>
     */
    int widhtMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    //獲取控件的尺寸
    int actualWidth = MeasureSpec.getSize(widthMeasureSpec);
    int actualHeight = MeasureSpec.getSize(heightMeasureSpec);
    int contentLegth = getContentLength();
    //計算一個文字的尺寸
    Rect mRect = measureTextSize();
    //內(nèi)容的最小寬度
    float contentWidth = mRect.width() + mContentDiv * 2;
    //內(nèi)容的最小高度
    float contentHeight = mRect.height() * contentLegth + mContentDiv * (contentLegth + 3);
    if (MeasureSpec.AT_MOST == widhtMode) {
      //寬度包裹內(nèi)容
      actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
    } else if (MeasureSpec.EXACTLY == widhtMode) {
      //寬度限制
      if (actualWidth < contentWidth) {
        actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
      }
    }
    if (MeasureSpec.AT_MOST == heightMode) {
      //高度包裹內(nèi)容
      actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
    } else if (MeasureSpec.EXACTLY == widhtMode) {
      //高度限制
      if (actualHeight < contentHeight) {
        actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
      }
    }
    setMeasuredDimension(actualWidth, actualHeight);
  }
  /**
   * 初始化默認(rèn)數(shù)據(jù)
   */
  private void initDefaultData() {
    mNavigationContent = new String[]{"搜", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
    mContentDiv = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());
    mContentTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 14, getResources().getDisplayMetrics());
    mContentTextColor = Color.parseColor("#333333");
    mDownContentTextColor = Color.WHITE;
    mBackgroundColor = Color.parseColor("#d7d7d7");
    mBackGroundAngle = 0;
    //繪制文字畫筆
    mTextPaint = new TextPaint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setTextSize(mContentTextSize);
    mTextPaint.setColor(mContentTextColor);
    mTextPaint.setTextAlign(Paint.Align.CENTER);
    //繪制背景畫筆
    mPaintBackgrount = new Paint();
    mPaintBackgrount.setAntiAlias(true);
    mPaintBackgrount.setStyle(Paint.Style.FILL);
  }
  /**
   * 初始化自定義屬性
   *
   * @param context
   * @param attrs
   */
  private void initAttrs(Context context, AttributeSet attrs) {
    TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLetterNavigationView);
    mContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDefault, mContentTextColor);
    mBackgroundColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customBackgroundColorDown, mBackgroundColor);
    mDownContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDown, mDownContentTextColor);
    mContentTextSize = mTypedArray.getDimension(R.styleable.CustomLetterNavigationView_customTextSize, mContentTextSize);
    mContentDiv = mTypedArray.getFloat(R.styleable.CustomLetterNavigationView_customLetterDivHeight, mContentDiv);
    mBackGroundAngle = mTypedArray.getInt(R.styleable.CustomLetterNavigationView_customBackgroundAngle, mBackGroundAngle);
    mTypedArray.recycle();
  }
  /**
   * 獲取內(nèi)容長度
   *
   * @return 內(nèi)容長度
   */
  private int getContentLength() {
    if (mNavigationContent != null) {
      return mNavigationContent.length;
    }
    return 0;
  }
  /**
   * 滑動計算
   *
   * @param mEventY Y軸滑動距離
   */
  private void scrollCount(float mEventY) {
    //滑動的時候利用滑動距離和每一個字符高度進(jìn)行取整,獲取到Index
    Rect mRect = measureTextSize();
    int index = (int) ((mEventY - getPaddingTop() - getPaddingBottom() - mContentDiv * 2) / (mRect.height() + mContentDiv));
    //防止越界
    if (index >= 0 && index < getContentLength()) {
      String newLetter = mNavigationContent[index];
      //防止重復(fù)觸發(fā)回調(diào)
      if (!mCurrentLetter.equals(newLetter)) {
        mCurrentLetter = newLetter;
        if (mOnNavigationScrollerListener != null) {
          mOnNavigationScrollerListener.onScroll(mCurrentLetter, index);
        }
      }
    }
  }
  /**
   * 測量文字的尺寸
   *
   * @return 一個漢字的矩陣
   */
  public Rect measureTextSize() {
    Rect mRect = new Rect();
    if (mTextPaint != null) {
      mTextPaint.getTextBounds("田", 0, 1, mRect);
    }
    return mRect;
  }
  /**
   * 設(shè)置導(dǎo)航欄滑動監(jiān)聽
   *
   * @param onNavigationScrollerListener
   */
  public void setOnNavigationScrollerListener(OnNavigationScrollerListener onNavigationScrollerListener) {
    this.mOnNavigationScrollerListener = onNavigationScrollerListener;
  }
  /**
   * 設(shè)置導(dǎo)航欄顯示內(nèi)容
   *
   * @param content 需要顯示的內(nèi)容
   */
  public void setNavigationContent(String content) {
    if (!TextUtils.isEmpty(content)) {
      mNavigationContent = null;
      mNavigationContent = new String[content.length()];
      for (int i = 0; i < content.length(); i++) {
        mNavigationContent[i] = String.valueOf(content.charAt(i));
      }
    }
    //需要重新測量
    requestLayout();
  }
  public interface OnNavigationScrollerListener {
    //按下
    void onDown();
    //滑動
    void onScroll(String letter, int position);
    //離開
    void onUp();
  }
}
自定義屬性
<declare-styleable name="CustomLetterNavigationView">
    <attr name="customTextColorDefault" format="color" />
    <attr name="customTextColorDown" format="color" />
    <attr name="customBackgroundColorDown" format="color" />
    <attr name="customLetterDivHeight" format="dimension" />
    <attr name="customTextSize" format="dimension" />
    <attr name="customBackgroundAngle" format="integer" />
</declare-styleable>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:AccessibilityService實(shí)現(xiàn)微信發(fā)紅包功能
欄 目:Android
下一篇:Android 開機(jī)充電圖標(biāo)和充電動畫效果
本文標(biāo)題:Android自定義字母導(dǎo)航欄
本文地址:http://www.jygsgssxh.com/a1/Android/9000.html
您可能感興趣的文章
- 01-10Android自定義View之繪制圓形頭像功能
 - 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方法詳解
 - 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動登錄
 - 01-10android實(shí)現(xiàn)簡單計算器功能
 - 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼
 - 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
 - 01-10android實(shí)現(xiàn)指紋識別功能
 - 01-10Emoji表情在Android JNI中的兼容性問題詳解
 - 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
 - 01-10android開發(fā)環(huán)境中SDK文件夾下的所需內(nèi)容詳解
 


閱讀排行
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
 - 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
 - 01-10android實(shí)現(xiàn)簡單計算器功能
 - 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動
 - 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
 - 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代
 - 01-10android實(shí)現(xiàn)指紋識別功能
 - 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
 - 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
 - 01-10Emoji表情在Android JNI中的兼容性問題詳
 
隨機(jī)閱讀
- 08-05DEDE織夢data目錄下的sessions文件夾有什
 - 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
 - 04-02jquery與jsp,用jquery
 - 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
 - 01-10delphi制作wav文件的方法
 - 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
 - 01-10使用C語言求解撲克牌的順子及n個骰子
 - 01-10C#中split用法實(shí)例總結(jié)
 - 08-05織夢dedecms什么時候用欄目交叉功能?
 - 01-11ajax實(shí)現(xiàn)頁面的局部加載
 


