Android點選文字編輯進行縮放、移動和改變字型、顏色的實現
實現效果如下:
需求功能點包含:
1:介面的文字為動態新增;
2:點選介面中的文字,開啟編輯模式:可編輯文字內容,可設定字型顏色,字型型別,粗體及對齊等;
3:點選刪除從介面上清除文字塊;
4:拖動編輯模式下的文字塊的四個錨點,可以按文字中心位置縮放,同時工具欄跟隨文字縮放移動,始終右對齊;
需求分析和技術實現:
首先得確定如何技術實現,當然實現的方式和方法多種多樣。本人給出這樣一個解決辦法:
1:在Activity中動態AddView方式新增一個TextView,採用相對佈局layout, 文字內容系統預設並根據螢幕尺寸計算位置居中;
2:在動態新增的TextView的onTouch事件中通過setLayoutParams 改變leftMargin,topMargin 達到移動位置的目的;
3:單擊TextView時隱藏自身,並在TextView所在位置動態AddView一個EditText,並把TextView的屬性值例如:大小,位置,顏色等賦值給EditText;
4:在新增EditText的同時動態新增四個錨點,採用相對於EditText的相對佈局,佈局於EditText的四個角,設定好Margin值,使它看起來像如圖所示那樣;(錨點為自定義View,可響應Touch事件,供拖拽使用)
5:自定義好文字編輯按鈕區域的控制元件:
6:採用和四個錨點同樣的方式AddView到佈局系統中;
7:編輯結束,點選EditText以外的區域把當前EditText從佈局系統中刪除,同時把此時的EditText屬性賦值給步驟3隱藏的TextView,
包括位置,大小,顏色等等;
8:移動錨點縮放文字大小的實現:移動偏移時,按一定增量+=或-=原來的FontSize, 以放大為例:計算移動前的文字寬度w1 和移動後的文字寬度w2,(w2-w1)/2為LeftMargin應減少的量,從而相對完美達到了按中心點縮放的目的;
9:因為採用相對佈局的緣故,工具欄自動跟隨文字的縮放做移動和調整,始終保持和文字的右邊線對齊;
10: 程式碼實現,收工!
技術實現如下:
貼主要步驟程式碼
1:動態新增一行文字:
private void addTextView() { finishEditText(); TextView showText = newTextView(this); showText.setTextColor(Color.WHITE); showText.setTextSize(defaultFontSize); Typeface typeFace = Typeface.createFromAsset(getAssets(), defaultFontType); showText.setTypeface(typeFace); showText.setOnTouchListener(this); onTextViewClickListener listener = new onTextViewClickListener(); showText.setOnClickListener(listener); showText.setText(getString(R.string.template_insert_default_text)); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); params.leftMargin = (relativeLayout.getMeasuredWidth() - (int) getTextWidth(showText)) / 2; params.topMargin = (relativeLayout.getMeasuredHeight() - marginTopValue) / 2; showText.setLayoutParams(params); //新增文字到主佈局 relativeLayout.addView(showText); }
2:文字的移動:relativeLayout 為佈局系統物件
public boolean onTouch(View view, MotionEvent event) { final int x = (int) event.getRawX(); final int y = (int) event.getRawY(); switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view .getLayoutParams(); xDelta = x - params.leftMargin; yDelta = y - params.topMargin; break; case MotionEvent.ACTION_MOVE: RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) view .getLayoutParams(); int xDistance = x - xDelta; int yDistance = y - yDelta; layoutParams.leftMargin = xDistance; layoutParams.topMargin = yDistance; view.setLayoutParams(layoutParams);break; } relativeLayout.invalidate(); return false; }
3:文字的縮放:FontSizeDragger為4個錨點
FontSizeDragger.onDraggerMove move = new FontSizeDragger.onDraggerMove() { @Override public void Move(int x, int y, int xOffSet, int yOffSet, FontSizeDragger dragger) { float currentFontSize = editText.getTextSize(); RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) editText .getLayoutParams(); TextPaint mTextPaint =editText.getPaint(); if (dragger.equals(leftTopDragger) || dragger.equals(leftBottomDragger)) {
if (xOffSet < 0) {//放大操作 float x1 = mTextPaint .measureText(editText.getText().toString()); currentFontSize += fontSizeChangeOffSet; editText.setTextSize(TypedValue.COMPLEX_UNIT_PX, currentFontSize); editText.invalidate(); float x2 = mTextPaint .measureText(editText.getText().toString()); layoutParams.leftMargin -= (int) (x2-x1)/2; // layoutParams.topMargin -= getOffSetDraggerY; }
...(省略其他程式碼)
效果圖: