簡(jiǎn)易AndroidUI游戲桿的制作

步驟1：設(shè)置

此“設(shè)置”部分主要用于Android Studio；

與其他任何新應(yīng)用一樣，為它提供一個(gè)適當(dāng)?shù)拿Q。我稱自己為“ JoystickTest”，因?yàn)槟钦撬谋举|(zhì)。復(fù)制完該類后，您仍然可以將操縱桿導(dǎo)出到其他項(xiàng)目中。

對(duì)于該版本，我認(rèn)為2.2以后的版本都可以正常工作。不過(guò)我使用了4.2，因?yàn)樗c我向其中添加操縱桿的應(yīng)用程序的版本相同。

最后，它會(huì)要求您輸入一個(gè)Activity。我使用了一個(gè)空的Activity，因?yàn)闆]有當(dāng)根本不需要布局XML時(shí)，就不需要花哨的額外組件。 （我們將在稍后進(jìn)行討論）。將其命名為MainActivity以便于參考。

生成項(xiàng)目后，您應(yīng)該有一個(gè)名為MainActivity的Java類。

步驟2：SurfaceView構(gòu)造函數(shù)/更多設(shè)置

SurfaceView小部件是構(gòu)建游戲桿的基礎(chǔ)。它提供了對(duì)繪圖表面和方法的訪問(wèn)，我們可以使用這些方法和方法來(lái)檢測(cè)觸摸的屏幕。

首先創(chuàng)建一個(gè)新對(duì)象。將其命名以反映用途-我將其命名為JoystickView。創(chuàng)建后，讓該類擴(kuò)展SurfaceView。這樣，該類可以訪問(wèn)SurfaceView的所有字段和方法，同時(shí)還可以像SurfaceView一樣將其添加到UI中。添加“擴(kuò)展”之后，您的開發(fā)環(huán)境應(yīng)為您提供有關(guān)具有錯(cuò)誤構(gòu)造函數(shù)的代碼錯(cuò)誤。您應(yīng)該重寫SurfaceView類的所有三個(gè)構(gòu)造函數(shù)。通常，您不需要向其中添加任何其他內(nèi)容。現(xiàn)在，只需使用構(gòu)造函數(shù)內(nèi)部的參數(shù)調(diào)用“ super”即可；我們將在以后實(shí)現(xiàn)功能時(shí)添加更多內(nèi)容。

您需要重寫的構(gòu)造函數(shù)為：

public SurfaceView（上下文c）

public SurfaceView （上下文c，AttributeSet a，int樣式）

公共SurfaceView（上下文c，AttributeSet a）

請(qǐng)注意，不必全部覆蓋這三個(gè)變量-您可以不必?fù)?dān)心僅覆蓋第一個(gè)。通過(guò)覆蓋所有這三個(gè)，您將能夠直接將操縱桿添加到XML布局中，從而使其更易于實(shí)現(xiàn)到UI中。

SurfaceView回調(diào)

在SurfaceView生命周期的適當(dāng)時(shí)刻，還需要一些回調(diào)來(lái)初始化內(nèi)容?；卣{(diào)是類中的對(duì)象可以通知類其中發(fā)生了特定事件的一種方式。這可能是因?yàn)閷?duì)象已完成加載（例如，如果它是UI元素），或者對(duì)象已完成特定功能。在Android中，這通常是通過(guò)Interfaces完成的。該類僅實(shí)現(xiàn)對(duì)象所具有的接口，在接口中添加方法，然后在發(fā)生某些事件時(shí)對(duì)象調(diào)用所述方法。我們需要實(shí)現(xiàn)SurfaceView.CallBack接口。將“ implementation SurfaceView.Callback”添加到Java文件的類聲明中，緊隨“ extends SurfaceView”之后。這將添加以下三個(gè)回調(diào)方法：

public void surfaceCreated（SurfaceHolderholder）

public void surfaceChanged（SurfaceHolderholder，int格式，int寬度，int高度）

public void surfaceDestroyed（SurfaceHolderholder）如果使用的是Android Studio，它將提示您立即添加方法。在我們之前設(shè)置的三個(gè)構(gòu)造器中，每個(gè)構(gòu)造器還添加：getHolder（）。addCallback（this）;

在這三個(gè)回調(diào)方法中，我們只真正關(guān)心surfaceCreated，因?yàn)樵赟urfaceView發(fā)生這些事件時(shí)將調(diào)用該方法，從而將此類中的回調(diào)方法設(shè)置為在這些事件發(fā)生時(shí)要調(diào)用的方法。已經(jīng)完全創(chuàng)建并具有所有尺寸并可以進(jìn)行繪制。

MainActivity

我們將不得不按順序更改MainActivity.java文件。輕松調(diào)試JoystickView。使用SurfaceView（Context c）構(gòu)造函數(shù)（將上下文設(shè)置為“ this”），在MainActivity的onCreate方法中創(chuàng)建JoystickView的新實(shí)例。然后，將“ setContentView”方法括號(hào)中的內(nèi)容替換為新游戲桿實(shí)例的名稱。

步驟3：繪制游戲桿

，這只會(huì)使其默認(rèn)情況下僅顯示JoystickView。

首先，簡(jiǎn)要說(shuō)明一下如何在Android的SurfaceView上進(jìn)行繪制：

-在Android的SurfaceViews上進(jìn)行繪制通過(guò)Canvas對(duì)象完成操作，該對(duì)象保存了所有要顯示給用戶的形狀/圖像。

-在畫布上繪制就像在笛卡爾平面上繪制一樣。它具有X軸和Y軸，分別向左和向左增加，并以像素為單位。形狀放置在此平面上的坐標(biāo)點(diǎn)上。

-在畫布上繪制是添加的，這意味著當(dāng)兩個(gè)形狀重疊時(shí)，最新繪制的形狀將隱藏使用較早命令繪制的形狀。這意味著您必須始終先繪制基礎(chǔ)。

-畫布上的像素是相對(duì)于設(shè)備屏幕尺寸的像素。例如，在1280 * 720屏幕上水平占據(jù)設(shè)備寬度而在垂直方向上占據(jù)設(shè)備高度1/2的畫布，其像素的寬度和高度將不會(huì)與1920 * 1080屏幕相同。第一個(gè)將具有WxH 1280 * 360，而第二個(gè)將具有1920 * 540，即使它們?cè)趦蓚€(gè)設(shè)備上占用的屏幕數(shù)量相同。

現(xiàn)在進(jìn)入實(shí)際編程。

全局變量和尺寸設(shè)置

由于畫布的長(zhǎng)度和寬度是根據(jù)它們?cè)谄聊簧险紦?jù)的像素?cái)?shù)來(lái)定義的，因此這樣做是不明智的對(duì)操縱桿的坐標(biāo)或其半徑進(jìn)行硬編碼，因?yàn)榧词筍urfaceView的尺寸發(fā)生變化，操縱桿的坐標(biāo)或半徑也會(huì)在畫布上保持相同的位置和尺寸。為了使其自動(dòng)適應(yīng)畫布的大小，我們必須使用全局變量并在運(yùn)行時(shí)計(jì)算操縱桿的位置和大小。

我們將需要四個(gè)全局變量，如下所示：

float centerX

float centerY

float baseRadius

float hatRadius

我們還需要一個(gè)方法，void setupDimensions（），給變量賦值在其中放入以下內(nèi)容：

centerX = getWidth（）/2;

centerY = getHeight（）/2;

baseRadius = Math.min（ getWidth（），getHeight（））/3;

hatRadius = Math.min（getWidth（），getHeight（））/5;

此代碼僅將值分配給每個(gè)使用“ getWidth（）”和“ getHeight（）”方法訪問(wèn)的變量，以SurfaceView的寬度和高度之比表示。 Math.min確保操縱桿將始終適合SurfaceView內(nèi)，即使一個(gè)尺寸比另一個(gè)尺寸小得多。您可以繼續(xù)為每個(gè)比例分配自己的比例，此處建議僅用于完全居中的操縱桿。

完成后，將setupDimensions（）方法添加到surfaceCreated方法中以獲得操縱桿的正確位置。我們?cè)诖朔椒ㄖ姓{(diào)用setupDimensions（），因?yàn)榈酱藶橹?，我們知道SurfaceView已被初始化，因此嘗試獲取其屬性不會(huì)導(dǎo)致任何異常。

繪圖方法

繪制操縱桿的方法實(shí)際上非常簡(jiǎn)單。創(chuàng)建一個(gè)接受兩個(gè)浮點(diǎn)參數(shù)的新方法-newX和newY：

private void drawJoystick（float newX，float newY）

newX和newY將用于指定帽子的位置（操縱桿頂部）。

現(xiàn)在，請(qǐng)記住，SurfaceView上的所有繪制都是通過(guò)其Canvas對(duì)象完成的。您需要訪問(wèn)此Canvas才能繪制操縱桿。您可以通過(guò)調(diào)用以下方法來(lái)做到這一點(diǎn)：

Canvas myCanvas = this.getHolder（）。lockCanvas（）;

這將返回一個(gè)Canvas對(duì)象，您應(yīng)該將其分配給變量以方便參考

您還將需要一個(gè)Paint對(duì)象，該對(duì)象代表您當(dāng)前使用的顏色。只需創(chuàng)建并實(shí)例化它即可。

繪制顏色= new Paint（）;

現(xiàn)在您可以繪制了。首先，清除畫布上的所有內(nèi)容：

myCanvas.drawColor（Color.TRANSPARENT，PorterDuff.Mode.CLEAR）;

接下來(lái)，我們繪制基礎(chǔ)。這是一個(gè)始終停留在同一位置的簡(jiǎn)單圓圈。首先，通過(guò)調(diào)用以下命令設(shè)置顏色：

colors.setARGB（int alpha，int red，int green，int blue）;

每個(gè)變量必須是介于0到255之間的int 。Alpha決定透明度，其中255為純色，0為不可見色。要獲得更直觀的版本，只需谷歌“ RGB顏色選擇器”。對(duì)于我的游戲桿，我使用了淺灰色，具有aRGB值（255、50、50、50），但是可以隨時(shí)使用自己的顏色。

現(xiàn)在您可以繪制底座了。調(diào)用Canvas的drawCircle方法。此方法按此順序需要4個(gè)參數(shù)：（中心的x位置為float，y的中心位置為float，圓的半徑為float，圓的顏色為繪制對(duì)象）。在上一節(jié)中，我們已經(jīng)定義了其中三個(gè)：

myCanvas.drawCircle（centerX，centerY，baseRadius，color）

接下來(lái)，繪制帽子。再次調(diào)用Paint對(duì)象的setARGB方法為帽子設(shè)置其他顏色。我使用了純藍(lán)色，并帶有aRGB組合（255、0、0、255）。然后調(diào)用drawCircle方法，僅這次使用newX和newY作為繪制帽子的坐標(biāo)，并使用全局變量作為帽子的半徑。

myCanvas.drawCircle（newX，newY，radiusHat，color ）

操縱桿現(xiàn)已繪制，但尚未打印到SurfaceView上，并且用戶不可見。為此，請(qǐng)調(diào)用：

getHolder（）。unlockCanvasAndPost（myCanvas）;

其中myCanvas是Canvas變量的名稱。

最后，您應(yīng)該用以下“ if”語(yǔ)句包圍整個(gè)方法：

if（getHolder（）。getSurface（）。isValid（））

此if語(yǔ)句阻止繪圖方法在以下情況下執(zhí)行

完成此方法后，將其附加到上一節(jié)中我們覆蓋的surfaceCreated方法中，其中newX = centerX和newY = centerY 。應(yīng)用啟動(dòng)后，這將繪制一個(gè)操縱桿，其頂部位于中間位置。沒有這個(gè)，在調(diào)用該方法之前，您只會(huì)看到一個(gè)黑框。

恭喜！您已經(jīng)繪制了一個(gè)操縱桿。但是，直到我們將面板配置為接受用戶輸入后，它才能真正執(zhí)行任何操作。

步驟4：添加交互性

要允許用戶交互和移動(dòng)操縱桿，我們將必須實(shí)現(xiàn)OnTouchListener接口。這個(gè)界面迫使我們添加onTouch方法，當(dāng)用戶觸摸屏幕時(shí)（或者實(shí)際上以任何方式與其交互），該方法會(huì)自動(dòng)調(diào)用。使用它，您可以響應(yīng)觸摸事件，但是我們需要這樣做。在我們的例子中，它將把操縱桿移動(dòng)到適當(dāng)?shù)奈恢谩?/p>

首先，通過(guò)在類聲明的“ implements”之后添加“ View.OnTouchListener”來(lái)實(shí)現(xiàn)OnTouchListener。在Java中，您可以根據(jù)需要實(shí)現(xiàn)任意數(shù)量的接口，但是必須用逗號(hào)分隔。還添加以下實(shí)現(xiàn)方法：

公共布爾onTouch（View v，MotionEvent e）

這將覆蓋OnTouchListener界面中的onTouch方法。每當(dāng)用戶觸摸屏幕時(shí)，都會(huì)調(diào)用此方法，從而通過(guò)其視圖向我們提供用戶觸摸的視圖及其觸摸方式（例如，輕擊屏幕，在屏幕上移動(dòng)手指，放開屏幕等）兩個(gè)論點(diǎn)。在該方法中，我們必須添加我們自己的代碼以響應(yīng)用戶觸摸它。

在該方法中，首先添加以下“ if”語(yǔ)句

if（v .equals（this））

這可確保觸摸偵聽器僅接受來(lái)自此SurfaceView的觸摸。在該if語(yǔ)句中，添加另一個(gè)：

if（e.getAction！= e.ACTION_UP）

這將檢查觸摸事件是否不是用戶將手指從觸摸上移開屏幕。我們需要這樣做，以確保操縱桿僅在用戶觸摸屏幕時(shí)才移動(dòng)，并在用戶放開時(shí)重置到其原始位置（就像真正的操縱桿一樣）。在此“ if”條件下，調(diào)用您在上一步中制作的操縱桿繪制方法：

drawJoystick（e.getX（），e.getY（））;

The getX（）和getY（）方法分別以用戶觸摸屏幕的像素為單位提供X和Y坐標(biāo)。將它們發(fā)送到drawJoystick方法會(huì)使操縱桿的帽子在這些位置繪制。

接下來(lái)，在if之后添加“ else”語(yǔ)句。僅在與if語(yǔ)句相反的情況為true時(shí)（即，如果“ e.getAction == e.ACTION_UP”，即釋放操縱桿），則執(zhí)行else語(yǔ)句。在其中放置：

drawJoystick（centerX，centerY）;

這將在用戶放開時(shí)將操縱桿重置為其中心位置。

最后，添加“返回真實(shí)；”到方法的末尾，在if語(yǔ)句之外。我們返回true，因?yàn)榉祷豧alse會(huì)阻止onTouch方法接收將來(lái)的觸摸。

目前，此方法與此有關(guān)。返回到每個(gè)構(gòu)造函數(shù)，并向其添加以下行：

setOnTouchListener（this）;

添加此行將使SurfaceView使用此類中的onTouch方法

此時(shí)，從現(xiàn)在開始處理用戶的屏幕觸摸。

在運(yùn)行應(yīng)用程序時(shí)，您應(yīng)該可以點(diǎn)擊屏幕并在其中移動(dòng)操縱桿。

第5步：約束操縱桿

如果您測(cè)試了該應(yīng)用，可能已經(jīng)注意到，操縱桿的頂部可以飛離操縱桿的底部，這顯然不是真正的操縱桿應(yīng)該表現(xiàn)的！游戲桿帽子永遠(yuǎn)不要離開底座，否則看起來(lái)不切實(shí)際，并可能與應(yīng)用程序中的其他視圖重疊。

檢查邊界。..在數(shù)學(xué)上

要解決此問(wèn)題，我們必須在onTouch方法中添加一些內(nèi)容，以檢查用戶是否在操縱桿底部的邊界之外單擊，如果是，請(qǐng)繪制操縱桿帽以使其位于底部的邊界，但仍沿用戶敲擊的方向（因此，在操縱桿底座外部略微敲擊不會(huì)使該東西不對(duì)齊）。如果這樣做沒有道理，請(qǐng)查看其中的一些圖片。

檢查用戶是否在范圍之內(nèi)是其中的簡(jiǎn)單部分。我們可以簡(jiǎn)單地計(jì)算出操縱桿從靜止位置的總位移，并將其與操縱桿的半徑進(jìn)行比較。如果位移大于半徑，則用戶必須將操縱桿移至底座范圍之外。這是因?yàn)榛渴且粋€(gè)圓，并且基部邊緣在沿圓的任何點(diǎn)處相對(duì)于圓心的位移始終是恒定的。再次查看圖表以了解更多信息。

要計(jì)算此位移，我們必須使用勾股定理：

a ^ 2 + b ^ 2 = c ^在圖2中，ab和c組成一個(gè)三角形。

假設(shè)用戶單擊的點(diǎn)具有坐標(biāo)（x‘，y’）和中心（x，y）。我們還假設(shè)a是x位置的變化，b是y位置的變化。因此，c將是離中心的凈位移。因此，c可以表示為：

sqrt（（x‘-x）^ 2 +（y’-y）^ 2）

或用Java術(shù)語(yǔ)表示，具體針對(duì)我們的程序：

浮點(diǎn)位移=（float）Math.sqrt（Math.pow（e.getX（）-centerX，2）+ Math.pow（e.getY（）-centerY，2））;

其中e是我們的onTouch方法中的MotionEvent。在（e.getAction（）！= e.ACTION_UP）if語(yǔ)句的頂部添加該段代碼。之所以將其放置在此處，是因?yàn)閮H在用戶實(shí)際移動(dòng)棒時(shí)（即僅在用戶觸摸SurfaceView時(shí)），才需要測(cè)試用戶是否在范圍內(nèi)移動(dòng)棒。

添加另一個(gè)在drawJoystick之前的if語(yǔ)句，以檢查凈位移是否小于基本半徑。如果是這樣，則單擊有效，并且我們不必限制操縱桿帽子。

if（displacement

還添加else語(yǔ)句。這可以處理位移大于基本半徑的情況，這意味著我們必須將操縱桿限制為基本半徑。

約束操縱桿

要進(jìn)行約束，我們將使用平行三角形標(biāo)識(shí)。這基本上就是說(shuō)，如果您有兩個(gè)三角形，兩個(gè)三角形具有兩個(gè)平行的邊且具有相同的角度，則所有三個(gè)邊的比率將相同?？梢栽谶@里找到更好的解釋：

https：//www.mathsisfun.com/geometry/triangles-simi 。..

因?yàn)槲覀円３旨s束的角度操縱桿與越界操縱桿的操縱桿相同，我們知道角度必須相同。我們也知道，兩個(gè)形成的三角形都必須是直角三角形，因?yàn)楸蹖⑹冀K由（x‘-x）和（y’-y）形成，也就是沿x和y軸相對(duì)于x的位移中心點(diǎn)。因此，至少兩側(cè)將是平行的，并且身份將生效。現(xiàn)在，我們可以通過(guò)將斜邊的已知位移除以找到其他兩個(gè)位移的長(zhǎng)度。

斜邊的比率可以通過(guò)以下公式求出：

浮點(diǎn)比率= baseRadius/位移;

我們將位移除以距離，因?yàn)槲覀兿Ｍ硪粋€(gè)成為新的凈位移，因?yàn)樗鼤?huì)將操縱桿限制在底座上?，F(xiàn)在，將x和y位移的值相乘以獲得新的位移，以便將操縱桿約束到底部。

float constrainedX = centerX +（e.getX（）-centerX）* ratio;

；請(qǐng)確保將centerX和centerY添加到適當(dāng)?shù)闹?，因?yàn)樗鼈兪窍鄬?duì)于中心的新位移。 》

float constrainedY = centerY +（e.getY（）-centerY）* ratio;

然后對(duì)受約束的值調(diào)用drawJoystick方法以繪制新的操縱桿。如果您正確完成了所有操作，則在操縱桿基座的邊界之外單擊仍會(huì)導(dǎo)致操縱桿移動(dòng)，但始終會(huì)保持在基座內(nèi)。

drawJoystick（constrainedX，constrainedY）;

如果其中任何一個(gè)令人困惑，希望附圖能更好地在視覺上顯示它。添加drawJoystick之后，測(cè)試您的應(yīng)用程序。無(wú)論您在何處觸摸屏幕，操縱桿現(xiàn)在都應(yīng)停留在底座內(nèi)。

步驟6：與其他活動(dòng)進(jìn)行交互

好的，很好，現(xiàn)在您有了一個(gè)基本但功能齊全的操縱桿，可以隨意移動(dòng)！但是，您還不能做任何事。如果需要，您將無(wú)法與其他活動(dòng)進(jìn)行交互。那就是添加回調(diào)方法的地方。

還記得幾步之前的回調(diào)方法嗎？我們現(xiàn)在需要一個(gè)，以便操縱桿可以報(bào)告它被觸摸了，以及它在您要使用它的任何其他物體中被觸摸的方式。要?jiǎng)?chuàng)建此回調(diào)方法，您首先必須在JoystickView中聲明一個(gè)Interface：/p》

公共接口JoystickListener

{

void onJoystickMoved（float xPercent，float yPercent，int source）;

}

您真的可以在參數(shù)中添加任何內(nèi)容。您可以放置其被點(diǎn)擊的位置，總的點(diǎn)擊位移等。在我計(jì)劃使用它來(lái)控制電動(dòng)機(jī)功率時(shí)，我輸入它從其可能的總位移中移出的百分比。如果您打算使用多個(gè)操縱桿，則需要在最后加上“ source” int，因?yàn)檫@樣可以區(qū)分它們。

接下來(lái)，創(chuàng)建一個(gè)名為“ joystickCallback”的JoystickListener全局實(shí)例。 。在每個(gè)構(gòu)造函數(shù)中，添加：

if（JoystickListener的上下文實(shí)例）

joystickCallback =（JoystickListener）上下文；

其中joystickCallback是全局JoystickListener和上下文是構(gòu)造函數(shù)中的上下文參數(shù)。

這使我們可以在表示包含此操縱桿的活動(dòng)的類中調(diào)用onJoystickMoved方法，只要該實(shí)現(xiàn)已實(shí)現(xiàn)JoystickListener并具有適當(dāng)?shù)膐nJoystickMoved方法即可。在任何時(shí)候，您都可以調(diào)用

joystickCallback.onJoystickMoved（xPercent，yPercent，getId（））;

，例如，它將在實(shí)現(xiàn)過(guò)程中調(diào)用onJoystickMoved方法聽眾。將其放置在onTouch方法中將是最有效的，因?yàn)檫@樣它就可以中繼有關(guān)操縱桿如何移動(dòng)到其父方法的信息。您必須對(duì)該方法進(jìn)行三個(gè)不同的調(diào)用。請(qǐng)注意，在本節(jié)中，我將使用返回百分比的實(shí)現(xiàn)。

在if（displacement

joystickCallback.onJoystickMoved（（ e.getX（）-centerX）/baseRadius，（e.getY（）-centerY）/baseRadius，getId（））;

由于桿在每個(gè)軸上的拉動(dòng)距離會(huì)有所不同。在下面的else語(yǔ)句中，我將放置：

joystickCallback.onJoystickMoved（（constrainedX-centerX）/baseRadius，（constrainedY-centerY）/baseRadius，getId（））;

此的原因與上述相同。在此之后的else語(yǔ)句中，我將放置：

joystickCallback.onJoystickMoved（0，0，getId（））;

，因?yàn)閑lse條件僅在用戶放開時(shí)執(zhí)行屏幕上的按鈕，操縱桿移回中間位置。

現(xiàn)在可以在“活動(dòng)”中使用操縱桿了。要對(duì)其進(jìn)行測(cè)試，請(qǐng)返回您的MainActivity類。添加“實(shí)現(xiàn)JoystickView.JoystickListener”并向其添加回調(diào)方法。在回調(diào)方法中，添加

Log.d（“ Main Method”，“ X percent：” + xPercent +“ Y percent：” + yPercent）;

xPercent，yPercent是從JoystickView傳遞的參數(shù)。現(xiàn)在，當(dāng)您在測(cè)試應(yīng)用中移動(dòng)操縱桿時(shí)，您應(yīng)該在Android調(diào)試器中看到操縱桿在每個(gè)軸上被推入多遠(yuǎn)的百分比。 Y百分比向下增加，而X百分比向右增加。負(fù)百分比僅表示您將其推向另一個(gè)方向（例如，左移而不是右移）。如果一切正常，那么恭喜！您已經(jīng)成功創(chuàng)建了Android游戲桿。

第7步：通過(guò)XML添加JoystickView

擁有此功能的真正好處之一操縱桿擴(kuò)展了SurfaceView，是您可以直接通過(guò)XML將其添加。您還可以像其他任何視圖一樣設(shè)置有關(guān)它的信息，設(shè)置名稱，ID等。我們可以通過(guò)進(jìn)入activity_main.xml并編輯布局來(lái)進(jìn)行測(cè)試。

如果您使用的是在Android Studio中，默認(rèn)情況下activity_main.xml應(yīng)該只是一個(gè)空白的RelativeLayout。為了簡(jiǎn)單起見，我將其更改為帶有android：orientation =“ vertical”的LinearLayout。我們可以通過(guò)在LinearLayout中添加：

，通過(guò)XML將JoystickView添加到布局中，其中your_package_name是您在創(chuàng)建項(xiàng)目時(shí)指定的包的名稱。與其他視圖一樣，要使其與Android一起使用，您必須添加layout_width和layout_height字段。

android：layout_width =“ match_parent”

android：layout_height =“ 300dp“

/》

我只是使用300dp，因?yàn)樗雌饋?lái)很合理。當(dāng)然，您可以使用布局權(quán)重，因?yàn)檫@是LinearLayout，但是為了簡(jiǎn)單起見，我對(duì)大小進(jìn)行了硬編碼。在XML預(yù)覽中，您現(xiàn)在應(yīng)該看到一個(gè)標(biāo)有“ JoystickView”的大灰色框（也就是說(shuō)，如果您使用的是Android Studio）?，F(xiàn)在，您可以返回MainActivity.java文件，并將setContentView中的參數(shù)替換為XML布局（在Android Studio中為R.layout.activity_main）?，F(xiàn)在運(yùn)行您的應(yīng)用程序?qū)@示操縱桿，僅按比例縮小以適合您在布局中指定的尺寸。

至此，您已經(jīng)基本完成。恭喜！您已經(jīng)成功創(chuàng)建了Android游戲桿。要在其他應(yīng)用程序中使用此游戲桿，只需復(fù)制JoystickView java文件并更改程序包名稱，使其適合您的新應(yīng)用程序的其余部分。要在其他Activity布局中使用操縱桿，只需在新的Activity XML中重復(fù)本節(jié)中的操作即可。

此后的其余步驟僅是不必要的。我們將討論如何使用操縱桿進(jìn)行著色，以及如何在一個(gè)活動(dòng)中實(shí)現(xiàn)多個(gè)操縱桿。

步驟8：附加功能：多個(gè)操縱桿，1個(gè)活動(dòng)

在活動(dòng)中只有一個(gè)操縱桿時(shí)，接收輸入很簡(jiǎn)單。當(dāng)您有多個(gè)操縱桿時(shí)，它會(huì)變得更加復(fù)雜。由于我們實(shí)現(xiàn)了操縱桿回調(diào)的方式，您活動(dòng)中的所有操縱桿都將通過(guò)調(diào)用相同的onJoystickMoved方法與活動(dòng)進(jìn)行通信。為了正確處理它們，您必須區(qū)分它們。

不要害怕！這實(shí)際上是非常簡(jiǎn)單的。在XML中添加操縱桿時(shí)，只需為每個(gè)操縱桿的id標(biāo)記賦予一個(gè)值。在此示例中，我添加了兩個(gè)操縱桿。我將第一個(gè)操縱桿的ID設(shè)置為：

android：id =“ @ + id/joystickRight”

，第二個(gè)操縱桿的ID設(shè)置為：

android：id =“ @ + id/joystickLeft“

然后，在onJoystickMoved方法中，添加一個(gè)switch語(yǔ)句來(lái)區(qū)分操縱桿并對(duì)其進(jìn)行處理：

switch（id）

{

case R.id.joystickRight：

Log.d（“ Right Joystick”，“ X：” + xPercent +“ Y：” + yPercent）;

break;

case R.id.joystickLeft：

Log.d（“ Left Joystick”，“ X：” + xPercent +“ Y：” + yPercent）;

break;

}

Android為每個(gè)id分配了一個(gè)特定的int值，可以通過(guò)調(diào)用“ R.id.view_name_here”進(jìn)行訪問(wèn)。在具有指定名稱的視圖中調(diào)用getId（）也會(huì)返回特定于其自身的值。由于我們較早地對(duì)回調(diào)進(jìn)行了編程，以將該特定值發(fā)送到它所附加的Activity，并且我們已經(jīng)知道分配給您的操縱桿的所有ID，因此我們可以使用switch語(yǔ)句來(lái)解析它們。而已！現(xiàn)在運(yùn)行該應(yīng)用程序，然后嘗試移動(dòng)每個(gè)操縱桿。

第9步：其他功能：更漂亮，帶陰影的操縱桿

盡管此時(shí)操縱桿可以正常工作，它看起來(lái)確實(shí)。..。沉悶。我們可以通過(guò)修改我們的繪制方法來(lái)快速糾正它，以便它做一些陰影處理。最終產(chǎn)品是一個(gè)操縱桿，它不僅具有不錯(cuò)的顏色漸變，而且具有適當(dāng)?shù)谋?/p>

更改顏色-帽子

首先，我們必須用“ for”循環(huán)將baseA和hat包圍著drawJoystick方法的setARGB和drawCircle部分。它們應(yīng)采用以下形式：

for（int i = 1; i 《= baseRadius/RATIO; i ++）

和

for（int i = 1； i 《= hatRadius/RATIO; i ++）

RATIO是您應(yīng)聲明的常量。它允許我們稍后調(diào)整要添加到操縱桿的陰影量。請(qǐng)記住，陰影更多=手機(jī)負(fù)載更高！我們將循環(huán)的長(zhǎng)度相對(duì)于基部/帽子的半徑進(jìn)行調(diào)整，因?yàn)檩^大的操縱桿將需要更多陰影才能看起來(lái)正確。

接下來(lái)，我們將逐漸調(diào)整這兩種顏色的顏色，以創(chuàng)建一個(gè)某種陰影效果。我們將從操縱桿帽子開始，因?yàn)樗容^簡(jiǎn)單。在這里，我們希望將顏色從操縱桿的深藍(lán)色轉(zhuǎn)換為較淺的白色，以模擬從頂部發(fā)出的光。為此，我們只需使其隨i的增加而增加，因此紅色和綠色值相同，而藍(lán)色的值則保持在255不變。這使藍(lán)色變得越來(lái)越淺。將循環(huán)中的setARGB方法替換為：

colors.setARGB（255，（int）（i *（255 * RATIO/hatRadius）），（int）（i *（255 * RATIO/hatRadius） ），255）;

為什么將i乘以（RATIO/hatRadius）？這樣可以確保在循環(huán)結(jié)束時(shí)，紅色和綠色的值均為255，從而產(chǎn)生白色的整體顏色。當(dāng)i = hatRadius/RATIO時(shí)，循環(huán)結(jié)束，因此i的最終值將是hatRadius/RATIO，該值會(huì)被（RATIO/hatRadius）抵消，結(jié)果只有255。

更改顏色-基本

這一次，我們使用了重疊的陰影技術(shù)。我們減小alpha的值，以使繪制的形狀有些透明，然后將這些形狀彼此疊加。重疊的形狀將融合，并創(chuàng)建更接近陰影顏色的色相。將此循環(huán)中的setARGB方法替換為：

colors.setARGB（150/i，255，0，0）;

您可以將后三個(gè)參數(shù)設(shè)置為所需的任何值，它們只是定義陰影色調(diào)的顏色。無(wú)論如何，我們正在使用此循環(huán)為操縱桿繪制莖，并且顏色無(wú)關(guān)緊要。我用了一根紅色的莖。 150/i確保當(dāng)循環(huán)接近完成時(shí)，alpha接近零，并且最靠近莖末端的位變得不可見

陰影-帽子

只需將drawCircle方法中的第三個(gè)參數(shù)替換為：

hatRadius-（float）i *（ratio）/3

所有這些操作是逐漸減小繪圖半徑陰影，直到它達(dá)到操縱桿帽子半徑的1/3的最小值為止。 1/3半徑是頂部的發(fā)亮的白色部分。

陰影-莖桿

操縱桿莖桿要復(fù)雜一些。我們希望將操縱桿柄的根部精確地保持在操縱桿基部的中心，同時(shí)用陰影產(chǎn)生一種透視效果以創(chuàng)建柄。