I also want to develop the 2048 main interface design.

In my development practices, I first designed the interface, and those who have read my previous blog should have known it.

Next, the main purpose of today is to design the interface. The main interface is actually relatively simple. Let's first:

The hierarchy is not complex. The difficulty lies in the design of the intermediate game panel. We will keep it detailed next time.

The main layout is a LinearLayout, which is easy to see. It is mainly about the transformation of the Button style. I used a custom shape and selector to implement it. These buttons are mainly about the different shape colors.

The following shows a Shape as an example:

<? Xml version = "1.0" encoding = "UTF-8"?> <Selector xmlns: android = "http://schemas.android.com/apk/res/android"> <item android: state_pressed = "true"> <shape android: shape = "rectangle"> <! -- Fill color --> <solid android: color = "#33444444"/> <! -- Set the four corners of the button to an arc --> <! -- Android: radius arc radius --> <corners android: radius = "10dip"/> <! -- Padding: The interval between the text in the Button and the Button boundary --> <padding android: bottom = "1dp" android: left = "1dp" android: right = "1dp" android: top = "1dp"/> </shape> </item> <shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "rectangle"> <! -- Fill color --> <solid android: color = "# 3EC5FF"/> <! -- Set the four corners of the button to an arc --> <! -- Android: radius arc radius --> <corners android: radius = "10dip"/> <! -- Padding: The interval between the text in the Button and the Button boundary --> <padding android: bottom = "1dp" android: left = "1dp" android: right = "1dp" android: top = "1dp"/> </shape> </item> </selector>

The following is all the code for the main layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/container"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:padding="3dp" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <TextView                android:id="@+id/title"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_margin="3dp"                android:background="@drawable/orange_button"                android:text="2048"                android:textSize="50sp" />        </LinearLayout>        <RelativeLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:orientation="vertical" >            <TextView                android:id="@+id/score_title"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerHorizontal="true"                android:layout_margin="5dp"                android:background="@drawable/gray_button"                android:gravity="center"                android:text="Scroe"                android:textSize="25sp" />            <TextView                android:id="@+id/scroe"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_below="@id/score_title"                android:layout_centerHorizontal="true"                android:layout_margin="5dp"                android:background="@drawable/light_orange_button"                android:gravity="center"                android:text="10000"                android:textSize="15sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_weight="1"            android:orientation="vertical" >            <TextView                android:id="@+id/record_title"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerHorizontal="true"                android:layout_margin="5dp"                android:background="@drawable/gray_button"                android:gravity="center"                android:text="Record"                android:textSize="25sp" />            <TextView                android:id="@+id/record"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_below="@id/record_title"                android:layout_centerHorizontal="true"                android:layout_margin="5dp"                android:background="@drawable/light_orange_button"                android:gravity="center"                android:text="20000"                android:textSize="15sp" />        </RelativeLayout>    </LinearLayout>    <com.xys.game2048.view.GameView        android:id="@+id/gameView"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </com.xys.game2048.view.GameView>    <LinearLayout        style="?android:attr/buttonBarStyle"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:padding="3dp" >        <Button            android:id="@+id/btn_revert"            style="?android:attr/buttonBarButtonStyle"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_margin="3dp"            android:layout_weight="1"            android:background="@drawable/blue_button"            android:text="Revert" />        <Button            android:id="@+id/btn_restart"            style="?android:attr/buttonBarButtonStyle"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_margin="3dp"            android:layout_weight="1"            android:background="@drawable/blue_button"            android:text="Restart" />        <Button            android:id="@+id/btn_option"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_margin="3dp"            android:layout_weight="1"            android:background="@drawable/blue_button"            android:text="Options" />    </LinearLayout></LinearLayout>

I believe you can understand it without many introductions. I will not introduce it much.

The main functions to be implemented in the game are as follows:

1. The title displays the expected target. If you have not reached 2048, 2048 is displayed. If you have exceeded 4096, the next target is displayed, for example ,.

2. Score records the current game Score, and Record records the highest in history

3. The Revert is used to undo the last move. It must have been deeply touched by 2048. When I accidentally moved the wrong step, I couldn't climb out of the trap, however, this function is basically unavailable in 2048 of the market, so this function is added in this preparation.

4. Options. This is an international practice.

The above is basically the case today.

PS users who need source code can leave a message, and all source codes will be published after improvement.