Android 元件學習筆記（九宮格遊戲，imageview設定圖片滿屏技巧）
阿新 • • 發佈：2019-02-01
這次做的是一個小demo，九宮格拼圖遊戲
簡單介紹一下：九個方格，一個空白方格，只有與空的相接才能相互移動，通過不斷移動會拼成一張完整的圖片
功能介紹：
1.圖片移動，有一定規則
2.記錄步數，記錄移動了多少步
3.介面跳轉，拼完後即跳轉到原圖（此處還可繼續拓展，發展關卡之類的）
問題：1.寫這個時開始以為挺簡單的，沒有好好考慮結構與細節，導致大量程式碼重複，最後改成函式少寫了上百行程式碼
2.圖片佈局問題，因圖片原因導致各個圖片存在間隙，不美觀，結果：
android:scaleType="centerCrop"即改好了
圖片：
程式碼如下
（注意存在圖片檔案，想要拷貝程式碼的別忘了在對應位置放好圖片改好名字才可以成功執行，還有新建一個介面做好佈局）：
佈局程式碼;package com.example.hp.aoteman; import android.content.ComponentName; import android.content.Intent; import android.graphics.drawable.Drawable; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.TextView; import java.sql.Struct; public class MainActivity extends AppCompatActivity { ImageView but1,but2,but3,but4,but5,but6,but7,but8,but9;//九張圖片放置處 int [] pic={R.drawable.dj1, R.drawable.dj2, R.drawable.dj3, R.drawable.dj4, R.drawable.dj5, R.drawable.dj6, R.drawable.dj7, R.drawable.dj8,R.drawable.up1//九張圖片 }; TextView text;//顯示移動步數 int movenum=0;//記錄移動步數 int [] rempic=new int[11];//記錄元件顯示的圖片，設定為十一是為了方便對應下標 int empty=0,rem=0,ok=0;//記錄空的元件位置，rem是交換用的，判斷是否拼好的計數 void changing(ImageView a,ImageView b,int A,int B)//交換不同元件的圖片，並且更新陣列記錄的資料，還要判斷是否已經完成了 { a.setImageResource(pic[rempic[B]]); b.setImageResource(pic[rempic[A]]); rem=rempic[A]; rempic[A]=rempic[B]; rempic[B]=rem; empty=A; movenum+=1;text.setText("移動了"+movenum+"步"); ok=0; for(int i=1;i<=9;i++) { if(rempic[i]==i-1)ok++; } if(ok==9) { Intent intent = new Intent();//主要就是它實現的 intent.setClass(MainActivity.this, Main2Activity.class); MainActivity.this.startActivity(intent); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); for(int i=0;i<11;i++) { rempic[i]=0; } text=(TextView)findViewById(R.id.textView); but1=(ImageView)findViewById(R.id.but1); but2=(ImageView)findViewById(R.id.but2); but3=(ImageView)findViewById(R.id.but3); but4=(ImageView)findViewById(R.id.but4); but5=(ImageView)findViewById(R.id.but5); but6=(ImageView)findViewById(R.id.but6); but7=(ImageView)findViewById(R.id.but7); but8=(ImageView)findViewById(R.id.but8); but9=(ImageView)findViewById(R.id.but9); but1.setImageResource(pic[7]);rempic[1]=7; but2.setImageResource(pic[4]);rempic[2]=4; but3.setImageResource(pic[5]);rempic[3]=5; but4.setImageResource(pic[2]);rempic[4]=2; but5.setImageResource(pic[1]);rempic[5]=1; but6.setImageResource(pic[3]);rempic[6]=3; but7.setImageResource(pic[6]);rempic[7]=6; but8.setImageResource(pic[0]);rempic[8]=0; but9.setImageResource(pic[8]);rempic[9]=8;//獲取元件，並設定元件帶的圖片，並也用陣列記錄下來 empty=9;//記錄空的座標 View.OnClickListener click=new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId())//根據不同的元件位置設定不同的按鍵情況，不過具體事件基本相同 { case R.id.but1: if(empty==2) changing(but1,but2,1,2); else if(empty==4) changing(but1,but4,1,4); break; case R.id.but2: if(empty==1) changing(but2,but1,2,1); else if(empty==3) changing(but2,but3,2,3); else if(empty==5) changing(but2,but5,2,5); break; case R.id.but3: if(empty==2) changing(but3,but2,3,2); else if(empty==6) changing(but3,but6,3,6); break; case R.id.but4: if(empty==1) changing(but4,but1,4,1); else if(empty==5) changing(but4,but5,4,5); else if(empty==7) changing(but4,but7,4,7); break; case R.id.but5: if(empty==2) changing(but5,but2,5,2); else if(empty==4) changing(but5,but4,5,4); else if(empty==6) changing(but5,but6,5,6); else if(empty==8) changing(but5,but8,5,8); break; case R.id.but6: if(empty==3) changing(but6,but3,6,3); else if(empty==5) changing(but6,but5,6,5); else if(empty==9) changing(but6,but9,6,9); break; case R.id.but7: if(empty==4) changing(but7,but4,7,4); else if(empty==8) changing(but7,but8,7,8); break; case R.id.but8: if(empty==5) changing(but8,but5,8,5); else if(empty==7) changing(but8,but7,8,7); else if(empty==9) changing(but8,but9,8,9); break; case R.id.but9: if(empty==6) changing(but9,but6,9,6); else if(empty==8) changing(but9,but8,9,8); break; } } }; but1.setOnClickListener(click); but2.setOnClickListener(click); but3.setOnClickListener(click); but4.setOnClickListener(click); but5.setOnClickListener(click); but6.setOnClickListener(click); but7.setOnClickListener(click); but8.setOnClickListener(click); but9.setOnClickListener(click); } }
第二個介面程式碼就只是放置了一張圖片和一句話就不必發出來了<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.hp.aoteman.MainActivity"> <RelativeLayout android:layout_width="368dp" android:layout_height="495dp" android:paddingBottom="10dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="10dp" tools:layout_editor_absoluteY="8dp" tools:layout_editor_absoluteX="8dp"> <ImageView android:id="@+id/but1" android:layout_width="120dp" android:layout_height="120dp" android:scaleType="centerCrop" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but2" android:layout_width="120dp" android:layout_height="120dp" android:scaleType="centerCrop" android:layout_toRightOf="@+id/but1" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but3" android:layout_width="120dp" android:layout_height="120dp" android:scaleType="centerCrop" android:layout_toRightOf="@+id/but2" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but4" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_height="120dp" android:layout_below="@+id/but1" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but5" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_height="120dp" android:layout_below="@+id/but1" android:layout_toRightOf="@id/but4" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but6" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_height="120dp" android:layout_below="@+id/but1" android:layout_toRightOf="@id/but5" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but7" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_height="120dp" android:layout_below="@id/but4" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but8" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_height="120dp" android:layout_below="@+id/but4" android:layout_toRightOf="@id/but7" app:srcCompat="@android:color/white" /> <ImageView android:id="@+id/but9" android:layout_width="120dp" android:scaleType="centerCrop" android:layout_below="@+id/but4" android:layout_toRightOf="@id/but8" android:layout_height="120dp" app:srcCompat="@android:color/white" /> <TextView android:id="@+id/textView" android:layout_below="@+id/but7" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="0" android:textSize="30sp" /> </RelativeLayout> </android.support.constraint.ConstraintLayout>