疯狂猜歌实现（11）—— 过关、通关界面及相关逻辑实现

来源：互联网发布：看网络直播用什么软件好编辑：程序博客网时间：2024/05/21 09:26

这一节接着上一节的内容讲过关以及通关界面实现了，并实现过关界面上的相关逻辑。

首先是过关界面的效果图，

过关界面的布局文件代码贴出来，布局文件没有什么特别需要说明的，只要按照效果图上的实现即可，整个界面还是挺简单的。

<!-- 过关布局   --><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/pass_view"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="@color/translucent"    android:visibility="invisible">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_gravity="top|center_horizontal"        android:layout_marginTop="20dip"        android:gravity="center">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/index_medal"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="你已击败"            android:textSize="22sp"            android:textColor="@color/white"/>        <TextView            android:id="@+id/pass_text_defeat"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="98.8%"            android:textSize="22sp"            android:textColor="@color/white"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="的玩家"            android:textSize="22sp"            android:textColor="@color/white"/>    </LinearLayout>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="答案正确"        android:textSize="30sp"        android:textColor="@color/white"        android:textStyle="bold"        android:layout_gravity="center_horizontal"        android:layout_marginTop="15dip"/>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="15dip">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/game_level_title"/>        <TextView            android:id="@+id/pass_text_level"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/white"            android:textSize="18sp"            android:textStyle="bold"            android:layout_gravity="center"/>    </FrameLayout>    <TextView        android:id="@+id/pass_text_song"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:text="征服"        android:textSize="24sp"        android:textStyle="bold"        android:layout_gravity="center"        android:layout_marginTop="15dip"/>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_marginTop="15dip"        android:layout_gravity="center_horizontal"        android:gravity="center">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="奖励 : "            android:textSize="20sp"            android:textColor="@color/white"/>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/game_coin_icon"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="X"            android:layout_marginLeft="10dip"            android:textSize="20sp"            android:textColor="@color/white"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="3"            android:layout_marginLeft="10dip"            android:textSize="20sp"            android:textColor="@color/white"/>    </LinearLayout>    <ImageButton        android:id="@+id/pass_button_next"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/next_selector"        android:layout_marginTop="30dip"        android:layout_gravity="center_horizontal"/>    <ImageButton        android:id="@+id/pass_button_share"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/share_wx_selector"        android:layout_marginTop="15dip"        android:layout_gravity="center_horizontal"/></LinearLayout>

下面接着讲通关界面实现了，还是先看效果图。

通关界面的布局代码如下

<!-- 通关布局   --><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="@mipmap/index_background">    <include layout="@layout/top_bar"/>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="70dip"        android:layout_gravity="center_horizontal"        android:layout_marginLeft="10dip"        android:layout_marginRight="10dip"        android:background="@mipmap/allpass_back0">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/allpass_text0"            android:layout_gravity="center"/>    </FrameLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dip"        android:layout_marginRight="10dip">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/game_wx_text"            android:layout_gravity="center_vertical"/>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/game_coin_icon"            android:layout_marginLeft="5dip"/>    </LinearLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="180dip"        android:layout_gravity="center_horizontal"        android:layout_marginLeft="10dip"        android:layout_marginRight="10dip"        android:background="@mipmap/allpass_back1">        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:background="@drawable/wx_selector"/>    </FrameLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dip"        android:layout_marginRight="10dip">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/about_rank_text"            android:layout_gravity="center_vertical"/>        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/game_coin_icon"            android:layout_marginLeft="5dip"/>    </LinearLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="180dip"        android:layout_gravity="center_horizontal"        android:layout_marginLeft="10dip"        android:layout_marginRight="10dip"        android:background="@mipmap/allpass_back1">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@mipmap/allpass_text2"            android:layout_gravity="center"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="right|bottom"            android:background="@drawable/contact_selector"/>    </FrameLayout></LinearLayout>

两个界面都没有什么难点，照着效果图实现就好。

下面来介绍下过关布局界面上的相关代码逻辑实现，也就是当用户点击“下一题”时过关界面会有相关的变化，以及在主界面上一些ui的变化，比如关卡数，歌曲名称都会发生变化，而用户点击过的wordbutton会恢复原状。

由于过关界面是采用FrameLayout所以他与主界面之间的关系也是层次之间的上下关系，当显示主界面时即用户进行答题时过关界面不可见，而当判断用户过关时，显示过关界面。这个逻辑只需要在每次加载主布局文件时将过关界面隐藏即可。

下面是点击过关界面时的逻辑

@Override    public void onClick(View view) {        switch (view.getId()){            //播放            case R.id.pan_button_start:                handlePlayStart();              break;            //下一关            case R.id.pass_button_next:                if(judgeIsCompleteGame()){                    //已通关                    Util.startActivity(MainActivity.this,CompleteActivity.class);                }else{                    mCurrentStageIndex++;                    clearAnimations();                    mPassLayoutView.setVisibility(View.INVISIBLE);                    initCurrentStageData();                }                break;        }    }

我们可以看到用户点“下一关”时首先判断是否通关，如果通关则显示通关界面，否则进行下一关主界面的显示，而判断是否通关的代码也比较简单，即判断当前的关卡数是否和歌曲数目的长度一致即可，即

private boolean judgeIsCompleteGame(){        return mCurrentStageIndex == Constants.SONGS_INFO.length - 1 ? true : false;    }

当判断为还没有通关后则当前关卡数＋1，并清除动画效果，讲过关界面消失，并初始化下一关的数据。而在初始化下一关的数据时注意需要将mLinearLayoutCatainer中的控件需要先清空，否则加入的时候会保留上一关已经添加过的控件。

下面是几张实现过关的效果图可供参考。

源码下载

0 0