日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

瑪納斯網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

?? 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

前言

本文將繼續(xù)向大家介紹如何做UI界面美化，以及如何利用輕量級(jí)偏好數(shù)據(jù)庫做數(shù)據(jù)的存儲(chǔ)和讀取。

UI界面美化

MainAbilitySlice

我們可以看到，所有的界面都是采用無框全屏化設(shè)計(jì)，因此第一步是要修改config.json文件，打開文件，將代碼做出如下修改：

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

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

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

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
            ohos:radius="120"/>
            ohos:width="3vp"
        ohos:color="#fbc02d"/>
            ohos:color="#fff8e1"/>

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

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
            ohos:layout_alignment="horizontal_center"
        ohos:width="350vp"
        ohos:height="100vp"
        ohos:image_src="$media:pokemon"
        ohos:scale_mode="zoom_center"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:startBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="開始游戲"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:recordBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#fbc02d"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="歷史記錄"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:aboutBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#fbc02d"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="關(guān)于游戲"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:exitBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:text_color="#fbc02d"
        ohos:background_element="$graphic:button"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="退出游戲"
        ohos:bottom_margin="20vp"
        />

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

SelectSlice

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

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
            ohos:radius="120"/>
            ohos:width="3vp"
        ohos:color="#7cc473"/>
            ohos:color="#e5f0e4"/>

界面的代碼如下：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="center">
            ohos:width="361vp"
        ohos:height="70vp"
        ohos:scale_mode="zoom_center"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:image_src="$media:select"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:firstBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第一關(guān)"
        ohos:bottom_margin="30vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:secondBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第二關(guān)"
        ohos:bottom_margin="30vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:thirdBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第三關(guān)"
        ohos:bottom_margin="20vp"
        />

InitSlice

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

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

            ohos:layout_alignment="center"
        ohos:top_margin="100vp"
        ohos:id="$+id:draweeView"
        ohos:width="360vp"
        ohos:height="360vp"
        />
            ohos:width="291vp"
        ohos:height="53vp"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:scale_mode="zoom_center"
        ohos:image_src="$media:Loading"
        />
            ohos:layout_alignment="center"
        ohos:height="30vp"
        ohos:width="330vp"
        ohos:id="$+id:pb"
        ohos:max="100"
        ohos:min="0"
        ohos:progress_width="330vp"
        ohos:background_element="#edf1bb"
        ohos:progress_element="#f2c867"
        ohos:progress="0"
        />

GameSlice

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

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    >
            ohos:id="$+id:dl"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:bottom_margin="20vp"
        >
                    ohos:id="$+id:backBtn"
            ohos:top_margin="10vp"
            ohos:left_margin="10vp"
            ohos:right_margin="8vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:layout_alignment="left"
            ohos:background_element="$graphic:backbutton"
            />
                    ohos:id="$+id:setBtn"
            ohos:top_margin="10vp"
            ohos:left_margin="8vp"
            ohos:right_margin="10vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:background_element="$graphic:setbutton"
            />
                    ohos:layout_alignment="right"
            ohos:top_margin="10vp"
            ohos:left_margin="85vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:clock"
            />
    
            ohos:layout_alignment="center"
        ohos:width="372vp"
        ohos:height="35vp"
        ohos:scale_mode="zoom_center"
        ohos:image_src="$media:goal"
        ohos:bottom_margin="20vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:gameMap1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:bottom_margin="15vp"
        />
            ohos:height="210vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">
                    ohos:layout_alignment="center"
            ohos:width="158vp"
            ohos:height="170vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:stack"
            ohos:bottom_margin="20vp"
            />
                    ohos:id="$+id:stackBtn"
            ohos:left_margin="15vp"
            ohos:bottom_margin="10vp"
            ohos:width="150vp"
            ohos:height="150vp"
            ohos:background_element="$graphic:button"
            ohos:text="回退"
            ohos:text_size="50fp"
            ohos:text_color="#fbc02d"
            />
    

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

這實(shí)際上是一個(gè)自定義樣式的CommonDialog，如何自定義？首先創(chuàng)建一個(gè)自定義的RecordDialog類和美化用的xml文件，然后在類里面添加自己的xml文件，具體方法可以看代碼：

public class RecordDialog {
    static CommonDialog commonDialog;

    static void showDialog(Context context,String s1,String s2,String s3){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_recordlayout,null,false);
        commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);

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

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

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

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

        Btn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
}

xml文件如下：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="最新通關(guān)記錄："
        ohos:multiple_lines="true"
        ohos:top_margin="20vp"
        ohos:text_size="20fp"
        />
            ohos:id="$+id:firstText"
        ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第一關(guān)：無"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:secondText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第二關(guān)：無"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:thirdText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第三關(guān)：無"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />

            ohos:id="$+id:okBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="確定"
        ohos:bottom_margin="20vp"
        ohos:left_margin="40vp"
        />

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

代碼如下：

public class MyDialog {
    private static Text version;
    static void showDialog(Context context){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_mydialoglayout,null,false);
        CommonDialog commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);
        Button knowBtn = (Button) dl.findComponentById(ResourceTable.Id_knowBtn);
        knowBtn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
    static String getVersion(){
        return version.getText();
    }
}

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical"
    ohos:alignment="center">
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戲目標(biāo)：收服在場的所有寶可夢(mèng)！"
        ohos:multiple_lines="true"
        ohos:top_margin="20vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戲玩法：通過滑動(dòng)屏幕控制人物，推動(dòng)精靈球收服寶可夢(mèng)，當(dāng)收服完所有寶可夢(mèng)時(shí)獲得游戲勝利！"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:versionText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戲版本號(hào)：V1.0.0"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:showText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="開發(fā)人員：木棉花藍(lán)銳鑫"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:id="$+id:knowBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="已了解"
        ohos:bottom_margin="20vp"
        />

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

public class SetDialog {
    static void showDialog(Context context){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_setlayout,null,false);
        CommonDialog commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);

        Button sureBtn = (Button) dl.findComponentById(ResourceTable.Id_sureBtn);
        Switch choose = (Switch) dl.findComponentById(ResourceTable.Id_choose);

        String value = MyDB.getString(dl.getContext(),"save");
        if(value != null){
            if(value.compareTo("開") == 0){
                choose.setChecked(true);
            }
            else if(value.compareTo("關(guān)") == 0){
                choose.setChecked(false);
            }
        }
        choose.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(AbsButton absButton, boolean b) {
                String key = "save";
                if(b){
                    MyDB.putString(dl.getContext(),key,"開");
                }
                else {
                    MyDB.putString(dl.getContext(), key,"關(guān)");
                }
            }
        });
        sureBtn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
}

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
            ohos:id="$+id:dl"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="horizontal"
        >
                    ohos:left_margin="70vp"
            ohos:right_margin="25vp"
            ohos:layout_alignment="left"
            ohos:id="$+id:thirdText"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="自動(dòng)保存 "
            ohos:multiple_lines="true"
            ohos:top_margin="10vp"
            ohos:text_size="30fp"
            />
                    ohos:id="$+id:choose"
            ohos:height="40vp"
            ohos:width="100vp"
            ohos:top_margin="10vp"
            ohos:text_state_on="開"
            ohos:text_state_off="關(guān)"
            ohos:text_color="#ffffff"
            ohos:text_size="20fp"
            ohos:thumb_element="#eff1f8"
            ohos:track_element="#f9bf2d"
            />
        
            ohos:id="$+id:sureBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="確定"
        ohos:bottom_margin="20vp"
        ohos:left_margin="40vp"
        />

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

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

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

public class MyDB {
    private static final String PREFERENCE_FILE_NAME = "DB";
    private static Preferences preferences;
    private static DatabaseHelper databaseHelper;
    private static Preferences.PreferencesObserver mPreferencesObserver;

    private static void initPreference(Context context){
        if(databaseHelper==null){
            databaseHelper = new DatabaseHelper(context);
        }
        if(preferences==null){
            preferences = databaseHelper.getPreferences(PREFERENCE_FILE_NAME);
        }
    }
    public static void putString(Context context, String key, String value) {
        initPreference(context);
        preferences.putString(key, value);
        preferences.flush();
    }
    public static String getString(Context context, String key) {
        initPreference(context);
        return preferences.getString(key, null);
    }
    public static boolean deletePreferences(Context context) {
        initPreference(context);
        boolean isDelete= databaseHelper.deletePreferences(PREFERENCE_FILE_NAME);
        return isDelete;
    }
    public static void registerObserver(Context context, Preferences.PreferencesObserver preferencesObserver){
        initPreference(context);
        mPreferencesObserver=preferencesObserver;
        preferences.registerObserver(mPreferencesObserver);
    }
    public static void unregisterObserver(){
        if(mPreferencesObserver!=null){
            // 向preferences實(shí)例注銷觀察者
            preferences.unregisterObserver(mPreferencesObserver);
        }
    }
}

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

if(gameMap.isWin()){
                            tickTimer.stop();
                            CommonDialog commonDialog = new CommonDialog(getContext());
                            commonDialog.setSize(800,400);
                                                    

                                                網(wǎng)頁題目：基于JavaUI開發(fā)的小游戲—推箱子（下）                                                

                                                瀏覽路徑：http://www.dlmjj.cn/article/dpgddip.html