1. 程式人生 > >Android點選文字編輯進行縮放、移動和改變字型、顏色的實現

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 = new 
TextView(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;
}
...(省略其他程式碼)

效果圖: