【android】讓Android 的EditText 顯示行號(并解決行號與內(nèi)容不對齊的問題)

【android】讓Android 的EditText 顯示行號(并解決行號與內(nèi)容不對齊的問題)

引言

如果想要在Android 上完成一個帶有代碼編寫功能的EditText,那就要有高亮和行號,在這里講解如何繪制出行號。

步驟

  1. 新建一個項目(這些步驟太基本了,不再附圖),新建一個類繼承自EditText。然后實現(xiàn)它的方法。

        public class MyEditText extends EditText {
            public MyEditText(Context context) {
                super(context);
            }
    
        public MyEditText(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    }
    

    這是最基本的代碼,就在這個基礎(chǔ)上完成。

  2. 添加一個函數(shù)用來寫初始化的內(nèi)容, 在構(gòu)造函數(shù)中調(diào)用。

        private void init() {
            setPadding(100,getPaddingTop(),getPaddingRight(),getPaddingBottom());
        }
    

    需要空出一部分來繪制行號,添加邊距來讓出這個空間。
    只需要設(shè)置左邊距,其他的用默認的。并且這個值應(yīng)該根據(jù)某些情況改變。

  3. 重寫 onDraw 方法。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint lineNumberPaint=getPaint();
        int lineHeight = getLineHeight();
        for (int i=0;i<getLineCount();i++){
            int i1 = i + 1;
            canvas.drawText(i1 +"",0,(i1* lineHeight)+getPaddingTop(),lineNumberPaint);
        }
    }
    

    也可以設(shè)置一個基礎(chǔ)值,然后在循環(huán)中不斷增加而不是用乘法。

  4. 選擇 build 下面的 Make Project 或者快捷鍵Ctrl+F9來構(gòu)建項目,這樣就能夠在視圖上添加我們的自定義view 了。搜索我們的MyEditText ,然后添加到視圖上。

    選擇我們寫的MyEditText
  5. 現(xiàn)在需要對init 函數(shù)繼續(xù)操作。
    設(shè)置重心。
    setGravity(Gravity.TOP|Gravity.START);

        private void init() {
            setPadding(100,getPaddingTop(),getPaddingRight(),getPaddingBottom());
            setGravity(Gravity.TOP|Gravity.START);
            // setText("te\na\na\na\na\na\na\nte\na\na\na\na\n"+
            // "a\na\nte\na\na\na\na\na\na\nte\na\na\na\na\na\na\n" +
            // "te\na\na\na\na\na\na\nte\na\na\na\na\na\na\nte\n"+
        //  "a\na\na\na\na\na\nte\na\na\na\na\na\na\n" +
        // "te\na\na\na\na\na\na\nte\na\na\na\na\na\na\nte\n"+
        // "a\na\na\na\na\na\nte\na\na\na\na\na\na\n" +
            //"te\na\na\na\na\na\na\nte\na\na\na\na\na\na\nte"+
        // "\na\na\na\na\na\na\nte\na\na\na\na\na\na\n");  這里的代碼不再使用
        }
    

    增加的那些奇怪的部分是用來測試用的。
    setPadding 用來空出地方用來繪制行號。

  6. 運行到虛擬機中效果挺好。

    Android 虛擬機的截圖

問題

把這個程序放到真機上運行便不行了—— 行號和內(nèi)容的行對不齊。
通過讀開源項目和源碼,發(fā)現(xiàn)一個getLineTopgetLineBottom 函數(shù),控制行號位置不再通過乘法或者加法。

  /**
    * Return the vertical position of the top of the specified line
    * (0&hellip;getLineCount()).
    * 返回指定行的頂部的垂直位置
    * If the specified line is equal to the line count, returns the
    * bottom of the last line.
    * 如果指定的行等于行號,返回最后一行的底部
    */
   /**
     * Return the vertical position of the bottom of the specified line.
     * 返回指定行的底部的垂直位置
     */
    public final int getLineBottom(int line) {
        return getLineTop(line + 1);
    }
    private int getCurrentLine() {//獲取光標所在行
        int selectionStart = getSelectionStart();
        Layout layout = getLayout();
        if (selectionStart != -1 && layout != null) {
            return layout.getLineForOffset(selectionStart);
        }
        return -1;
    }
    Paint lineHeightPaint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        lineHeightPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        lineHeightPaint.setColor(Color.argb(100, 90, 164, 161));
        int currentCursorPositionLine = getCurrentLine();
        int getCurrentTop = getLayout().getLineTop(currentCursorPositionLine);//如果是0 獲取第0 行的頂部
        int getCurrentBottom = getLayout().getLineBottom(currentCursorPositionLine);
        int paddingTop = getPaddingTop();
        int lineCount = getLineCount();
        canvas.drawRect(0, getCurrentTop+paddingTop, getWidth(), getCurrentBottom+paddingTop, lineHeightPaint);
        Paint lineNumberPaint=getPaint();
        for (int i=0;i<lineCount;i++){
            int lineBottom = getLayout().getLineBottom(i);
            //這里的y 是基線,需要得到這個基線
            canvas.drawText(Integer.toString(i+1), 0, lineBottom-lineNumberPaint.descent()+paddingTop, lineNumberPaint);
        }
    }

2019/9/28 更新了代碼,雖然之前完成了功能,但是存在問題,修改問題,并力求直觀。

現(xiàn)在點擊EditText 看高亮的行和行號是不是對齊的了。

初此之外,android 還提供了getBaseline 函數(shù),返回的值是top boundary 到基線的位置。

  /**
   * <p>Return the offset of the widget's text baseline from the widget's top
   * boundary. If this widget does not support baseline alignment, this
   * method returns -1. </p>
   *
   * @return the offset of the baseline within the widget's bounds or -1
   *         if baseline alignment is not supported
   */
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容