Androidカスタムコントロール2-シンプルなタブレットコントロールを学びましょう

概要
前の記事では、カスタムコントロールについて概説しました.今日は簡単なタブレットコントロールのカスタマイズを学びます.
まず効果図を見てみましょう
指で書いた軌跡に基づいて簡単に内容を描きます
インプリメンテーション
前の記事ではandroidの公式に与えられたカスタムコントロールについて、以下の点を考慮する必要があります.

View

の作成

処理Viewのレイアウト

ビューを描画

ユーザと対話する

.

定義済みView

の最適化
この手順に従って、今日のカスタムコントロールを完了します.
1、Viewの作成
前編では、Viewを作成する際に考慮したのは、簡単なカスタム属性の宣言、使用です.
今日のコントロールには、どのようなカスタムプロパティがありますか?タブレットを実現するには、実は3つのものです.タブレットの色、ペンの色、ペンの太さです.次にプロパティをカスタマイズします.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="WritingBoardView">
        <attr name="boardBackground" format="color"></attr> <!--    -->
        <attr name="paintColor" format="color"></attr> <!--    -->
        <attr name="paintWidth" format="dimension"></attr> <!--    -->
    </declare-styleable>
</resources>

定義したのは使用するためです

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:custom="http://schemas.android.com/apk/res-auto" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.qiangyu.test.writingboardview.MainActivity">

    <com.qiangyu.test.writingboardview.view.WritingBoardView  android:layout_width="match_parent" android:layout_height="match_parent" custom:paintColor="@color/colorAccent" custom:boardBackground="@color/colorPrimary" custom:paintWidth="3dp"/>
</RelativeLayout>

boardBackground、paintWidth、paintColorプロパティを簡単に設定
ここではネーミングスペースに注意するだけで、androidは私たちにandroidを提供してくれます.私たちは私たちの属性のネーミングスペースをカスタマイズすることができます.xmlns:あなたが取った名前=」と書くことができます.http://schemas.android.com/apk/res-autoここのres-autoはあなたのコントロールのパッケージ名に変えることができます
XMLレイアウトファイルで設定した属性はカスタム属性で取得するため、Context、AttributeSetを持つ構築方法を実装する必要があります.

    private int mBoardBackground;//    
    private int mPaintColor;//    
    private int mPaintWidth;//    
    private Path mPath;
    private Paint mPaint;//  

    public WritingBoardView(Context context) {
        this(context,null);
    }

    public WritingBoardView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public WritingBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }



 private void init(Context context,AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.WritingBoardView);
        mBoardBackground =   a.getColor(R.styleable.WritingBoardView_boardBackground,Color.WHITE);
        mPaintColor =   a.getColor(R.styleable.WritingBoardView_paintColor,Color.BLUE);
        mPaintWidth = a.getDimensionPixelSize(R.styleable.WritingBoardView_paintWidth,
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,5,getResources().getDisplayMetrics()));
        a.recycle();
        mPaint = new Paint();
        mPath = new Path();
        setBackgroundColor(mBoardBackground);
        mPaint.setColor(mPaintColor);
        mPaint.setStrokeWidth(mPaintWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
    }

上記のコードは、各コンストラクションメソッドが最終的に3番目のコンストラクションメソッドのinit(context,attrs)メソッドを呼び出してカスタム属性を取得し、いくつかの情報を初期化することを保証します.
固定的な書き方で、簡単にカスタム属性を取得し、現在のviewに背景を設定し、ペイントにスタイルと色を設定します.タブレットを完成させる上で重要なのはここのPath類です.
まずPathクラスをご紹介します
構造方法の注釈を見る

/**
 * The Path class encapsulates compound (multiple contour) geometric paths
 * consisting of straight line segments, quadratic curves, and cubic curves.
 * It can be drawn with canvas.drawPath(path, paint), either filled or stroked
 * (based on the paint's Style), or it can be used for clipping or to draw
 * text on a path.
 */
public class Path {

    ...

}

つまり,Pathは直線と種々の曲線からなる幾何学的図形情報をカプセル化している.canvasを呼び出してdrawPathメソッドで何かを描くことができます.私たちの最終的なdrawはdrawPathを使う必要があります
PathにはaddRect,addArcのような幾何学的図形を設定する方法が多く含まれている.今日重点的に使用した2つの方法について説明します.

  /** * Set the beginning of the next contour to the point (x,y). * * @param x The x-coordinate of the start of a new contour * @param y The y-coordinate of the start of a new contour */
    public void moveTo(float x, float y) {
        native_moveTo(mNativePath, x, y);
    }

moveToメソッドは、次の線や図形の最初の位置を設定します.

/**
     * Add a line from the last point to the specified point (x,y).
     * If no moveTo() call has been made for this contour, the first point is
     * automatically set to (0,0).
     *
     * @param x The x-coordinate of the end of a line
     * @param y The y-coordinate of the end of a line
     */
    public void lineTo(float x, float y) {
        isSimplePath = false;
        native_lineTo(mNativePath, x, y);
    }

lineToメソッドは、前の点から現在の点への線を簡単に追加します.
この2つの方法があれば、私たちは実線のタブレットを書くことができます.
2、Viewのレイアウトを処理する
このカスタムコントロール自体は、タブレットとしてのコンテンツが必要なので、特別なレイアウト処理は必要ありませんが、modeがUNSPECFIEDの場合、レイアウトが表示されない可能性があります.
ここでは特別な処理は行いません.
3、Viewの描画、ユーザーとの対話
このコントロール自体がインタラクティブでなければ効果が得られないため、前の2つのステップを一緒に考えました.
CanvasにはdrawPathメソッドがあります.drawPathが最後にどのように描かれたかは、Pathに含まれている情報を見ることです.
手書きの内容をリアルタイムで表示するには,スライド時に取得した座標をPathのlineTo法で線を少しずつつなぐだけでよい.
指を上げて落ちるとまた新しい線になるはずなので、落ちるときにmoveToメソッドを呼び出して次の軌跡に起点を設定する必要があります.

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        float touchX = event.getX();
        float touchY = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(touchX,touchY);//             
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(touchX,touchY);//  
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        invalidate();//      
        return true;//       
    }

onTouchでreturn trueは、現在のイベントを処理することを示します.インタフェースを描画するためにinvalidateを呼び出すたびに、私たちのonDrawメソッドはdrawPathを簡単に呼び出すだけでいいです.

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath,mPaint);
    }

まとめ
実は指のタッチイベントで軌跡の変化を制御し、固定されたモードで簡単なカスタムコントロールが完成しました!
簡単なタブレットは基本的に完成していますが、もちろん興味があれば拡張して、実行時にブラシの色、タブレットの色を変えることができます.フォント消去機能を追加します.
最後に私に良いコメントをして支持することを忘れないでください!ははは
ソースのダウンロード