鴻蒙推箱子小游戲：UI界面美化

在上文筆者向大家分享了推箱子小游戲基礎(chǔ)功能的實(shí)現(xiàn)，本文將繼續(xù)向大家介紹如何做 UI 界面美化，以及如何利用輕量級(jí)偏好數(shù)據(jù)庫(kù)做數(shù)據(jù)的存儲(chǔ)和讀取。

UI 界面美化

①M(fèi)ainAbilitySlice

我們可以看到，所有的界面都是采用無(wú)框全屏化設(shè)計(jì)，因此第一步是要修改 config.json 文件。

打開(kāi)文件，將代碼做出如下修改：

......
"launchType":"standard"
}
],
"metaData":{
"customizeData":[
{
"name":"hwc-theme",
"value":"androidhwext:style/Theme.Emui.Light.NoTitleBar",
"extra":""
}
]
}
}
}

然后設(shè)計(jì)按鈕樣式，首先新建一個(gè) graphic 文件：

接著在里面添加美化代碼：

現(xiàn)在分析界面需求，其中帶有“Pokemon”字樣的是本地圖片，因此我們需要的控件有四個(gè)按鈕以及一張圖片，布局采用 DirectionalLayout 即可。 代碼如下：

至此第一個(gè)界面就美化完成了。

②SelectSlice



這個(gè)界面的布局跟第一個(gè)界面大同小異，只是少了一個(gè)按鈕，還有就是按鈕的樣式有點(diǎn)不同，因此需要再寫(xiě)一個(gè) graphic 文件，方法同上。

這里直接給出代碼：

界面的代碼如下：

③InitSlice

在加載界面中，只是用到了一個(gè)播放 gif 的第三方組件，以及一張圖片（文字圖片）一個(gè)進(jìn)度條組件，布局也使用最常規(guī)的 DirectionalLayout 即可實(shí)現(xiàn)。

④GameSlice



游戲界面的 UI 就稍微復(fù)雜一點(diǎn)，需要用到嵌套，之前說(shuō)過(guò)，地圖類(lèi)繼承自布局，所以實(shí)際上地圖也是一個(gè)組件，理解了這一點(diǎn)之后，再來(lái)看代碼會(huì)容易理解很多。 整體布局用了 DirectionalLayout 縱向布局，在里面有需要橫向布局的，則添加 DirectionalLayout 的橫向布局，做一個(gè)簡(jiǎn)單的嵌套。

四個(gè)界面美化完畢！接下來(lái)做一些細(xì)節(jié)的調(diào)整。在按下歷史記錄按鈕時(shí)，會(huì)顯示每個(gè)關(guān)卡最近的一次歷史記錄，效果如下：



這實(shí)際上是一個(gè)自定義樣式的 CommonDialog，如何自定義？首先創(chuàng)建一個(gè)自定義的 RecordDialog 類(lèi)和美化用的 xml 文件，然后在類(lèi)里面添加自己的 xml 文件。

具體方法可以看代碼：

publicclassRecordDialog{
staticCommonDialogcommonDialog;

staticvoidshowDialog(Contextcontext,Strings1,Strings2,Strings3){
DirectionalLayoutdl=(DirectionalLayout)LayoutScatter.getInstance(context)
.parse(ResourceTable.Layout_recordlayout,null,false);
commonDialog=newCommonDialog(context);
commonDialog.setAutoClosable(true);

ButtonBtn=(Button)dl.findComponentById(ResourceTable.Id_Btn);

Textfirst=(Text)dl.findComponentById(ResourceTable.Id_firstText);
first.setText(s1);

Textsecond=(Text)dl.findComponentById(ResourceTable.Id_secondText);
second.setText(s2);

Textthird=(Text)dl.findComponentById(ResourceTable.Id_thirdText);
third.setText(s3);

Btn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
commonDialog.destroy();
}
});
commonDialog.setCornerRadius(15);
commonDialog.setContentCustomComponent(dl).show();
}
}

xml 文件如下：

關(guān)于這樣的設(shè)計(jì)，這個(gè)小游戲中還有一處，點(diǎn)擊關(guān)于游戲彈出的界面同樣也是這么實(shí)現(xiàn)的：

代碼如下：

publicclassMyDialog{
privatestaticTextversion;
staticvoidshowDialog(Contextcontext){
DirectionalLayoutdl=(DirectionalLayout)LayoutScatter.getInstance(context)
.parse(ResourceTable.Layout_mydialoglayout,null,false);
CommonDialogcommonDialog=newCommonDialog(context);
commonDialog.setAutoClosable(true);

ButtonknowBtn=(Button)dl.findComponentById(ResourceTable.Id_knowBtn);



knowBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
commonDialog.destroy();
}
});



commonDialog.setCornerRadius(15);
commonDialog.setContentCustomComponent(dl).show();
}
staticStringgetVersion(){
returnversion.getText();
}
}

游戲中最后一處 UI 設(shè)計(jì)，就是點(diǎn)擊設(shè)置按鈕時(shí)出現(xiàn)的一個(gè)滑動(dòng)塊組件，可以保存一些全局設(shè)置：

publicclassSetDialog{
staticvoidshowDialog(Contextcontext){
DirectionalLayoutdl=(DirectionalLayout)LayoutScatter.getInstance(context)
.parse(ResourceTable.Layout_setlayout,null,false);
CommonDialogcommonDialog=newCommonDialog(context);
commonDialog.setAutoClosable(true);

ButtonsureBtn=(Button)dl.findComponentById(ResourceTable.Id_sureBtn);
Switchchoose=(Switch)dl.findComponentById(ResourceTable.Id_choose);

Stringvalue=MyDB.getString(dl.getContext(),"save");
if(value!=null){
if(value.compareTo("開(kāi)")==0){
choose.setChecked(true);
}
elseif(value.compareTo("關(guān)")==0){
choose.setChecked(false);
}
}

choose.setCheckedStateChangedListener(newAbsButton.CheckedStateChangedListener(){
@Override
publicvoidonCheckedChanged(AbsButtonabsButton,booleanb){
Stringkey="save";
if(b){
MyDB.putString(dl.getContext(),key,"開(kāi)");
}
else{
MyDB.putString(dl.getContext(),key,"關(guān)");
}
}
});


sureBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
commonDialog.destroy();
}
});

commonDialog.setCornerRadius(15);
commonDialog.setContentCustomComponent(dl).show();
}
}

至此，UI 美化部分已經(jīng)全部完成。

數(shù)據(jù)存儲(chǔ)

這里用到輕量級(jí)偏好數(shù)據(jù)庫(kù)，關(guān)于數(shù)據(jù)庫(kù)怎么使用，可以看這篇文章，文章寫(xiě)得很詳細(xì)！

https://ost.51cto.com/posts/7911

利用數(shù)據(jù)庫(kù)存儲(chǔ)每個(gè)關(guān)卡的信息，首先要新建一個(gè)數(shù)據(jù)庫(kù)類(lèi) MyDB：

publicclassMyDB{
privatestaticfinalStringPREFERENCE_FILE_NAME="DB";
privatestaticPreferencespreferences;
privatestaticDatabaseHelperdatabaseHelper;
privatestaticPreferences.PreferencesObservermPreferencesObserver;

privatestaticvoidinitPreference(Contextcontext){
if(databaseHelper==null){
databaseHelper=newDatabaseHelper(context);
}
if(preferences==null){
preferences=databaseHelper.getPreferences(PREFERENCE_FILE_NAME);
}

}

publicstaticvoidputString(Contextcontext,Stringkey,Stringvalue){
initPreference(context);
preferences.putString(key,value);
preferences.flush();
}

publicstaticStringgetString(Contextcontext,Stringkey){
initPreference(context);
returnpreferences.getString(key,null);
}

publicstaticbooleandeletePreferences(Contextcontext){
initPreference(context);
booleanisDelete=databaseHelper.deletePreferences(PREFERENCE_FILE_NAME);
returnisDelete;
}

publicstaticvoidregisterObserver(Contextcontext,Preferences.PreferencesObserverpreferencesObserver){
initPreference(context);
mPreferencesObserver=preferencesObserver;
preferences.registerObserver(mPreferencesObserver);
}

publicstaticvoidunregisterObserver(){
if(mPreferencesObserver!=null){
//向preferences實(shí)例注銷(xiāo)觀(guān)察者
preferences.unregisterObserver(mPreferencesObserver);
}
}
}

在結(jié)束游戲時(shí)，如果打開(kāi)了自動(dòng)保存按鈕，則進(jìn)行存儲(chǔ)：

if(gameMap.isWin()){
tickTimer.stop();
CommonDialogcommonDialog=newCommonDialog(getContext());
commonDialog.setSize(800,400);
commonDialog.setTitleText("注意");
commonDialog.setContentText("恭喜您完成游戲！??！");
commonDialog.setButton(0,"確定",newIDialog.ClickedListener(){
@Override
publicvoidonClick(IDialogiDialog,inti){
commonDialog.destroy();
Stringvalue=MyDB.getString(getContext(),"save");
if(value!=null){
if(value.compareTo("開(kāi)")==0){
MyDB.putString(getContext(),key,tickTimer.getText());
}
}
present(newSelectSlice(),newIntent());
terminate();
}
});
commonDialog.show();


}

在點(diǎn)擊歷史記錄時(shí)，會(huì)進(jìn)行數(shù)據(jù)讀?。?

//歷史記錄按鈕
recordBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
String[]s={"第一關(guān)：無(wú)","第二關(guān)：無(wú)","第三關(guān)：無(wú)"};
Stringfirst=MyDB.getString(getContext(),"first");
Stringsecond=MyDB.getString(getContext(),"second");
Stringthird=MyDB.getString(getContext(),"third");

if(first==null){
first=s[0];
}
else{
first="第一關(guān)："+first;
}
if(second==null){
second=s[1];
}
else{
second="第二關(guān)："+second;
}
if(third==null){
third=s[2];
}
else{
third="第三關(guān)："+third;
}

RecordDialog.showDialog(getContext(),first,second,third);
}
});

開(kāi)啟自動(dòng)保存，才會(huì)在游戲結(jié)束時(shí)存進(jìn)數(shù)據(jù)庫(kù)，實(shí)際上也是利用數(shù)據(jù)庫(kù)中某個(gè) key 中的 value 控制。 具體實(shí)現(xiàn)如下：

choose.setCheckedStateChangedListener(newAbsButton.CheckedStateChangedListener(){
@Override
publicvoidonCheckedChanged(AbsButtonabsButton,booleanb){
Stringkey="save";
if(b){
MyDB.putString(dl.getContext(),key,"開(kāi)");
}
else{
MyDB.putString(dl.getContext(),key,"關(guān)");
}
}
});

至此，項(xiàng)目已經(jīng)全部分享完成，由于作品中涉及大量的圖片資源均是網(wǎng)絡(luò)資源（避免侵權(quán)），故僅作學(xué)習(xí)交流使用，實(shí)際上，絕大部分代碼已經(jīng)在文章中了，剩下的就是讀者理解之后動(dòng)手銜接起來(lái)！一定要?jiǎng)邮郑?

后續(xù)作者也會(huì)開(kāi)發(fā)更多的小游戲供大家學(xué)習(xí)交流~（下期可能就是 ArkUI 的小游戲啦?。┢诖c大家一起進(jìn)步?。?！