如何自定義控制元件

若蘭__明月發表於2017-12-13
控制元件

如何自定義控制元件

###1、自定義屬性的宣告和提取

  • 1、分析需要的自定義屬性
  • 2、在res/values/attrs.xml檔案中定義宣告
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="icon" format="reference"/>
    <attr name="color" format="color"/>
    <attr name="text" format="string"/>
    <attr name="text_size" format="dimension"/>
    <declare-styleable name="ChangeTextIconSizeWithColor">
        <attr name="icon"/>
        <attr name="color"/>
        <attr name="text"/>
        <attr name="text_size"/>
    </declare-styleable>
</resources>
複製程式碼
  • 3、在layout xml檔案中進行使用
  • 4、在Viwe的構造方法中進行獲取
 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ChangeTextIconSizeWithColor);
        int n = a.getIndexCount();
        //也可以直接獲取屬性
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.ChangeTextIconSizeWithColor_color:
                    mColor = a.getColor(attr, 0xFF3343);
                    break;
                case R.styleable.ChangeTextIconSizeWithColor_icon:
                    BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);
                    mBitmap = drawable.getBitmap();
                    break;
                case R.styleable.ChangeTextIconSizeWithColor_text:
                    mText = a.getString(attr);
                    break;
                case R.styleable.ChangeTextIconSizeWithColor_text_size:
                    mTextSize = a.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 11, getResources().getDisplayMetrics()));

                    break;
            }
        }
        //資源回收
        a.recycle();
複製程式碼

###2、測量onMeasure()

  • 1、測量的模式：
    • EXACTRY
      • 及精確值模式，當我們將控制元件的layout_width屬性或者layout_height屬性指定為具體數值的時候，比如android:layout_width="100dp"。
    • AT_MOST
      • 最大值模式，當控制元件的layout_width屬性或者layout_height屬性指定wrap_content時候，控制元件大小一般隨著控制元件的子空間內容的變化而變化，此時控制元件的尺寸只要不操作父控制元件允許的最大尺寸就行
    • UNSPECIFIED
      • 不指定測量的模式，想多大就多大 （一般在ScrollView或者ListView中）
  • 2、MeasureSpec（輔助類）
    • 通過這個類，就獲取View的測量模式和View想要繪製的大小
    • 下面的程式碼就是一個模板，基本上沒有什麼變化的

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //super.onMeasure(widthMeasureSpec,heightMeasureSpec);//這個方法跟進去就是下面的這個方法
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }

複製程式碼
   /**
     * 獲取控制元件的高度
     *
     * @param heightMeasureSpec
     * @return
     */
    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        //模式
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        //大小
        int size = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = 100;  //這個是指定好的控制元件的高度
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }

        return result;
    }
複製程式碼

獲取寬度的程式碼和獲取高度的差不多，這裡就不寫了，通過這裡嗎，就可以完成對高度和寬度值的自定義了 ###3、佈局onLayout（ViewGroup）

  • 1、決定子View的位置
  • 2、儘可能的將onMeasure中的一些方法操作移動到此方法中(onLayout())
  • 3、requestLayout()
 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        final int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            //拿到每一個view
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            left = caculateChildLeft();//計算childView  layout的左上角的x座標
            top = caculateChildTop();//計算childView  layout的左上交的y座標

            child.layout(left, top, left + childWidth, top + childHeight);
        }
    }
複製程式碼

###4、繪製onDraw

  • 1、繪製內容區域
  • 2、invalidate()（UI執行緒），postInvalidate()（子執行緒）
  • 3、Canvas.drawXXX()
  • 4、translate、rotate、scale、skew
  • 5、sava()、restore() ###5、onTouchEvent
  • 1、觸控情況
    • ACTION_DOWN
    • ACTION_MOVE
    • ACTION_UP
  • 2、多指觸控（要決定哪個是控制的也就是ActivePointer）
    • ACTION_POINTER_DOWN
    • ACTION_POINTER_UP
  • 3、parent.requestDisallowInterceptTouchEvent(true)（請求父控制元件不要攔截事件，交給子控制元件攔截）
  • 4、VelocityTracker

###6、onInterceptTouchEvent（ViewGroup）

  • 1、觸控情況
    • ACTION_DOWN
    • ACTION_MOVE
    • ACTION_UP
  • 2、多指觸控（要決定哪個是控制的也就是ActivePointer）
    • ACTION_POINTER_DOWN
    • ACTION_POINTER_UP
  • 3、決定是否攔截該手勢

相關文章