今天來實作對弈中右上角的設置功能，其中包括:
我們首先實作一個dialog_item用來顯示setting列表
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="300dp"
android:layout_height="500dp"
android:layout_gravity="center"
android:background="@drawable/brownbackground_grayline">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline74"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline64"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline59"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline60"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline61"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<Button
android:id="@+id/btn_resign"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/redbackground_blackline"
android:gravity="center"
android:text="投降"
android:textColor="@color/white"
android:textStyle="bold"
app:backgroundTint="@null"
app:layout_constraintBottom_toTopOf="@+id/guideline61"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline60" />
<Button
android:id="@+id/btn_music"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/redbackground_blackline"
android:text="音樂:開 / 關"
android:textColor="@color/white"
android:textStyle="bold"
android:gravity="center"
app:backgroundTint="@null"
app:layout_constraintBottom_toTopOf="@+id/guideline59"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline64" />
<TextView
android:id="@+id/tv_music"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/brownline"
android:gravity="center"
android:text="音樂"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/guideline64"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_resign"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/brownline"
android:gravity="center"
android:text="投降"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/guideline60"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline59" />
<Button
android:id="@+id/btn_submit"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/redbackground_blackline"
android:text="確定"
android:textColor="@color/white"
android:textStyle="bold"
android:gravity="center"
app:backgroundTint="@null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline16" />
<TextView
android:id="@+id/tv_message"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/brownline"
android:gravity="center"
android:text="聊天"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/guideline32"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline61" />
<Button
android:id="@+id/btn_sent"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/redbackground_blackline"
android:text="發送"
android:textColor="@color/white"
android:textStyle="bold"
android:gravity="center"
app:backgroundTint="@null"
app:layout_constraintBottom_toTopOf="@+id/guideline75"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline74"
app:layout_constraintTop_toTopOf="@+id/guideline32" />
<EditText
android:id="@+id/ed_message"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/brownline"
android:ems="10"
android:gravity="center"
android:hint="請輸入訊息"
android:textColorHint="#3f3f3f"
android:inputType="text"
app:layout_constraintBottom_toTopOf="@+id/guideline75"
app:layout_constraintEnd_toStartOf="@+id/guideline74"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline32" />
</androidx.constraintlayout.widget.ConstraintLayout>
接著在程式中加入setting方法，呼叫就會dialog
public void setting(){
btn_setting.setOnClickListener(v -> {
// 跳出設置對話框
showSettingDialog();
});
}
在dialog的設定中把控件都綁定
public void showSettingDialog() {
// 創建設置Dialog並設置自定義布局
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.setting_dialog_item);
// 獲取自定義布局中的UI元素
Button btn_music = dialog.findViewById(R.id.btn_music);
Button btn_resign = dialog.findViewById(R.id.btn_resign);
Button btn_submit = dialog.findViewById(R.id.btn_submit);
Button btn_sent = dialog.findViewById(R.id.btn_sent);
EditText ed_message = dialog.findViewById(R.id.ed_message);
if(mediaPlayer.isPlaying()){
btn_music.setText("音樂:開啟");
}else{
btn_music.setText("音樂:關閉");
}
// 音樂
btn_music.setOnClickListener(v -> {
if(musicList == null || musicList.size() == 0){
// 如果使用者未選擇音樂，則取第一首加入音樂清單
musicList = new ArrayList<>();
musicList.add(0);
}
// 顯示音樂播放當前狀態
if(mediaPlayer.isPlaying()){
enableMusic = 1;
mediaPlayer.pause();
btn_music.setText("音樂:關閉");
}else{
btn_music.setText("音樂:開啟");
musicCreate();
}
});
// 投降
btn_resign.setOnClickListener(v -> {
dbp.uploadData(roomKey,"WinPlayer","black");
});
// 退出
btn_submit.setOnClickListener(v -> {
dialog.dismiss();
});
// 訊息發送
btn_sent.setOnClickListener(v -> {
dbp.uploadData(roomKey,"Player1message",ed_message.getText().toString());
ed_message.setText("");
});
dialog.setCancelable(false);
dialog.setCanceledOnTouchOutside(false);
// 顯示Dialog
dialog.show();
}
創建音訊資料，我們接收上一個頁面傳的musicList做處理
public void musicCreate(){
// 創建音檔資料
if(enableMusic == 0){
mediaPlayer = MediaPlayer.create(this, musicData.music[(int)musicList.get(musicCount)]);
}
music();
}
播放音樂
public void music(){
// 播放音樂
mediaPlayer.start();
mediaPlayer.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mediaPlayer) {
mediaPlayer.release();
mediaPlayer = null;
handler.postDelayed(() -> {
if(musicCount+1 == musicList.size()){
// 如果播放到最後一首，從第一首開始重新播放
musicCount = 0;
}else{
// 播放下一首
musicCount = musicCount+1;
}
enableMusic = 0;
musicCreate();
},1000);
}
});
}
值得注意的是，我們退出此頁面(下線狀態)時，我們需要強制停止播放音樂，所以我們在onStop中需要做處理
@Override
protected void onStop() {
super.onStop();
// 停止音樂
if(mediaPlayer!=null){
mediaPlayer.stop();
}
Log.d("TAG", "當前頁面已關閉");
// 上線狀態
nowState = false;
// 上傳當前上線狀態
dbp.uploadData(roomKey,"Player1OnlineState",nowState);
}
這樣就完成設置選單中的功能了
成果:
到這裡，我們整個系統已經可以實現雙人連線下棋，以及實作了一些額外功能。而接下來我們將會探討利用生成式AI(Chat GPT)，以及結合本系統，是否可實現如人機對弈一樣，做到高速且有效的思考與效果
iThome鐵人賽
看影片追技術