新年が近づいており、赤い封筒は無限です。赤い封筒をつかんでいたとき、BaiduのLucky Bag Interfaceが非常に良いことを誤って発見したので、Baidu Red Envelope Interfaceを完成させるために記事を書くのに時間をかけました。
もちろん、これは実際にはロック解除インターフェイスの進化バージョンです。ただし、非常に多くの知識ポイントが含まれています。ブログ投稿を書いてそれを記録し、特定の技術的なポイントがそこにあることを確認してください。 Baiduのレンダリングをチェックしてください：
1。プログラミングのアイデア
インターフェイスを見ると、9枚の写真を置く容器であることを見つけることは難しくありません。描画は実際にそれについて別の透明なビューを作成することができ、線と円を描く責任があります。次に、実装プロセスを紹介します。
1。カスタムビューグループ
カスタムビューグループは、onlayout（）メソッドを実装する必要があることを知っています。この方法は、サブビューの位置とサイズを設定するときに呼び出されます。また、ビューとその内容を測定してビューの幅と高さを決定するonMeasure（）メソッドもあります。
その点と円の位置を測定し、パラメーターを描く
インターフェイスに戻るとき、最後の描画インターフェイスのコンテンツは保存されません。インターフェイスに描画するために再描画の場合に保存する必要があります
Zimple Zoomアニメーション
customcustomビューの実装描画インターフェイス
drawing描画が完了したら、インターフェイスの描画コンテンツをクリアし、複製写真が接続されていないことを確認します。
以下のこれらの手順を完了します。
2。ViewGroupをカスタマイズします
最初のタスクは、9つの写真を写真の場所に均等に配布し、携帯電話インターフェイスに表示することです。コードは次のとおりです。
パブリッククラスlyjviewgroup拡張ビューグループを実装するlyjgesturedrawline.onanimationcallback {/***各ポイント領域の幅*/private int childwidth*/private context*/private context;/**** image point*/private list <lyjagesturepoint>/**** vieggroupを作成する*/private lyjgestureview geardrawline; private int basenum = 5; public lyjviewgroup（context context）{super（context）; this.context = context; this.list = new ArrayList <>（）; displaymetricsメトリック= new Displaymetrics（）;（アクティビティ））コンテキスト）.getWindowManager（）。getDefaultDisplay（）。getMetrics（Metric）; ChildWidth = Metric.WidthPixels / 3; //画面幅（ピクセル）addChild（）; // new lyjgestureview（context、list）; gesturedrawline.setanimationCallback（this）;} setparentView（viewgroup parent）{// gesturedricsmetricsメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックメトリックマトリクス（（アクティビティ）; Context）.GetWindowManager（）。getDefaultDisplay（）。getMetrics（Metric）; int width = metric.widthpixels; layoutparams layoutparams = new LayoutParams（width、 width）; this.setlayoutparams（layoutparams）; gesturedRawline.setLayoutParams（layoutParams）; parent.addview（this）; parent.addview（gesturedRawline）;}@overridedoftected void onlayout（boolean chandered、int t、int t、int t、int r、I < getChildCount（）; what row int rowspan = i /3; // what column int column = i％3; android.view.view v = getChildat（i）; BASENUM）;}}@OverrideRideTected Void onMeasure（int widthmeasurespec、int heightMeasurespec）{super.onmeasure（widthmeasurespec、heightmeasurespec）; getChildat（i）; v.measure（widthmeasurespec、heightmeasurespec）;}} private void addChild（）{for（int i = 0; i <9; i ++）{imageView = new imageView（context）; image.setbackgroundResource（R.Drawable.）; thisaddview（/// inwapinate（）; i / 3; //どの列int column = i％3; //ポイントの左上と右下の角の座標を定義しますint leftx = column * childwidth + childwidth / basenum; int topy = rowspan * childwidth + childwidth / basenum; ChildWidth -ChildWidth / Basenum; lyjgesturepoint P = new lyjgesturepoint（leftx、topy、rightx、bottomy、i）; this.list.add（p）;}}@overridepublic startanimationimage（int i）{int i）{animation = aimationutils.loads. load（getcontext（ r.anim.gridlayout_child_scale_anim）; getChildat（i）.startanimation（animation）;}}}3.ポイントクラスをカスタマイズします
名前が示すように、それはポイントの関連属性を取得することです。その中で、基本属性画像の左上隅の座標と画像の右下隅の座標を取得することで、画像の中心位置を計算して、画像の中心点を取得します。ステータスマークポイントが画像に描かれているかどうかを示します。ここに物理的なクラスがあります：
パブリッククラスlyjgesturepoint {private point pointlefttop; //左上コーディネートプライベートポイントポイントリットボトム; //右下隅ポイントリットボトム; //画像センターポイントx座標プライベートインターセンターリー; //画像センターポイントyプライベートインターポイントステート; void setpointState（int pointState）{this.pointState = pointState;} public point getPointLeftTop（）{return PointLefttop;} public point getpointrightbottom（）{return pointrightbottom;} public lyjagesturepoint（int left、int top、int int、int i.ポイント（左、上）; this.pointrightbottom = new Point（右、下）; this.num = i;} public int getCenterx（）{this.centerx（）{this.pointlefttop.x+this.pointrightbottom.x）/2; return centerx;} public int intcentery（）getcentery（） {this.centery =（this.pointlefttop.y+this.pointrightbottom.y）/2; return Centery;}}4。カスタムサークルクラス
このクラスはよりシンプルで、3つのプロパティ（円の中心点の座標と半径）があります。コードは次のとおりです。
パブリッククラスlyjcirclepoint {private int roundx; // circle center point x座標プライベートintラウンドラウンド; //サークルセンターポイントy座標プライベートint radiu; // circle radius public int getradiu（）{return radiu;} public int getRoundx（）{return roundx;} public int getround（ radiu）{this.roundx = roundx; this.roundy = roundy; this.radiu = radiu;}}5.カスタム図面クラスビューを実装します
コードは次のとおりです。
パブリッククラスlyjgestureviewはandroid.view.view {/**** declare stried line brush*/private paintペイント;/****宣言サークルブラシ*/プライベートペイントサークルペイント;/****キャンバスキャンバス;/****ビットマップ*/プライベートビットマップビットマップリスト<lyjgesturepoint> list;/****描画行を録画*/プライベートリスト<ペア<lyjgesturepoint >> linelist;/**** records描画サークル*/プライベートリスト<lyjcirclepoint>サークルポイント;/*** AnimationCallback; public Interface OnanimationCallback {public void startanimationimage（int i）;} public void setanimationCallback（onanimationCallback animationCallback）{this.animationCallback = AnimationCallback;} public lyjagestureview（コンテキスト、<lyjagesturepoint> list）{super（context）; log.i（getClass（）。getName（）、 "gesturedRawline"）; paint = new paint（paint.dither_flag）; //ブラシサークルペイント= new paint（paint.dither_flag）; displaymetricsメトリック= new displaymetrics（（）;（（activity）context）.getWindowManager（）。getDefaultDisplay（）。getMetrics（Metric）; log.i（getClass（） bitmap.createbitmap（metric.widthpixels、metric.heightpixels、bitmap.config.argb_8888）; //ビットマップの幅と高さを設定しますcanvas = new canvas（）; canvas.setbitmap（bitmap）; paint.setstyle（paint.style.stroke）; // set non-fill paint.setstrokewidth（20）; paint.setantialias（true）; //表示されていませんjagged circlepaint.setStyle（paint.style.fill）; circlepaint.setStrokewidth（1）; circlepaint.setantialias（true）; circlepaint.setcolor（color.rgb（245、142、33））; ArrayList<>();this.circlePoints=new ArrayList<>();}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()){case MotionEvent.ACTION_DOWN:// determines which point the current click is in currentPoint = getPointAt((int) event.getX(), (int) event.getY());if (currentPoint != null）{currentpoint.setpointState（constants.point_state_selected）; this.animationCallback.startanimationImage（currentpoint.getnum（））; canvas.drawcircle（currentpoint.getCenterx（）、currentPoint.getCentery（）、20、circlePaint）; circlepoints.add（new lyjcirclepoint（currentpoint.getcenterx（）、currentpoint.getcentery（）; 20; MotionEvent.action_move：clearscreenanddrawlist（）; //現在の移動位置がlyjgesturepoint pointat = getpointat（（int）event.getx（）、（int）event.get.gety（））; if（currentpoint == null && pointat == null）{//スクリーンをスライドに押し付けます。エンドポイントと出発点が写真ではない場合、true; currentPoint.setPointState（constants.point_state_selected）;}} //移動したポイントが画像領域ではないか、自分の場所に移動するか、画像が既に選択されている場合、または直線を描画するだけで、（PointAT == null || currentpoint.equals（pointat）|| constants.point_state_selection ========= Pointat.getPointState（））{canvas.drawcircle（currentpoint.getCenterx（）、currentPoint.getCentery（）、20、circlePaint）; circlepoint.add（currentpoint.getcenterx（）、currentpoint.getcentery（）、20））; event.getx（）、event.gety（）、paint）;} else {//他の状況で2つの直線線を描き、描画円と直線を保存し、画像を押したcanvas.drawCircleのズームアニメーションを呼び出します。 Pointat.getCentery（）、20））; this.animationCallback.startanimationimage（pointat.getnum（））; pointat.setpointState（constants.point_state_selected）; canvas.drawline（currentpoint.getcenterx（）、currentpoint.getcentery（） lyjgesturepoint> pair = new pair <>（currentpoint、pointat）; linelist.add（pair）; currentpoint = pointat; //選択したポイントを現在のポイントに設定します。 } invalidate（）; // repaint break; case motionevent.action_up：clearscreenanddrawlist（）; //エンドポイントなしの新しいハンドラー（）。ポストデレイ（）。 {public void run（）{//セーブポイントと円のコレクションをクリアlinelist.clear（）; circlepoints.clear（）; //インターフェイスClearScreenandDrawlist（）; for（lyjgesturepoint p：list）{//セットされていない状態を初期化するように設定します。 Points*/private lyjgesturepoint getpointat（int x、int y）{for（lyjgesturepoint point：list）{//最初に、ポイントが画像のx座標にあるかどうかを最初に決定しますint leftx = point.getLefttop（）。x; x次の比較は続きます;} //判断でポイントが画像のy座標にあるかどうかint topy = point.getpointlefttop（）。ポイントまで横断します。 return point;} return null;}/***画面上のすべての行をクリアしてから、コレクションにラインを描画します*/private void clearscreenanddrawlist（）{canvas.drawcolor（color.transparent、porterduff.mode.clear）; for（paile <lyjgesturepoint、lyjgesturepoint> pair：linelist）{canvas.drawline（pair.first.getCenterx（）、paip.first.getcentery（）、pair.secondcenterx（）、pair.second.getcentery（）、paint）; //ドローライン} circlepoints）{canvas.drawcircle（lyjcirclepoint.getRoundx（）、lyjcirclepoint.getRoundy（）、lyjcirclepoint.getradiu（）、circlePaint）;} {canvas.drawbitmap（bitmap、0、0、null）;}}このようにして、次のインターフェイス効果を取得できます（もちろん、Baidu Walletを逆にして、Baidu Walletに写真がないので、ランダムな画像を見つける必要があります）：