Today, we will continue to explain the second article about the full history of Android jigsaw puzzle games. The task to be completed today is relatively simple: interface layout and resource files.
1. Resource file:
When developing a project, we first need to set the tone of the App, whether it is small fresh or heavy taste, so we need to define some colors, styles, etc.
The first is color and so on:
<?xml version="1.0" encoding="utf-8"?><resources> <color name="app_bg">#000000</color> <color name="title_text">#FFFFFF</color> <color name="record_title_bg">#F56A47</color> <color name="record_title_text">#FFFFFF</color> <color name="record_title_text_dark">#727272</color> <color name="main_bg">#3EC5FF</color> <color name="main_text">#FFFFFF</color> <color name="setting_reg_bg">#A2A2A2</color> <color name="setting_text_light">#C3C3C3</color> <color name="setting_text_dark">#111111</color> <color name="tv_click">#33444444</color></resources>
The above defines the small and fresh style of our App.
And then the string resource.
<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <string name = "app_name"> XPuzzle </string> <string name = "action_settings"> Settings </string> <string name = "hello_world"> Hello world! </String> <string name = "puzzle_main_type"> difficulty: </string> <string name = "puzzle_main_steps"> steps: </string> <string name = "puzzle_main_img"> original figure </string> <string name = "puzzle_main_reset"> Reset </string> <string name = "puzzle_main_back"> return time </string> <string name = "puzzle_main_time">: </string> <string name = "puzzle_main_type_selected"> 2X2 </string> <string name = "puzzle_main_record"> View records </string> <string name = "puzzle_main_more"> learn more </string> </resources>
The next step is to customize a Shape with Selector, so that after the Button uses this background, it will be better suited to a small fresh style.
<? 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 = "5dip"/> <! -- Padding: The interval between the text in the Button and the Button boundary --> <padding android: bottom = "10dp" android: left = "10dp" android: right = "10dp" android: top = "10dp"/> </shape> </item> <shape android: shape = "rectangle"> <! -- Fill color --> <solid android: color = "@ color/title_text"/> <! -- Set the four corners of the button to an arc --> <! -- Android: radius arc radius --> <corners android: radius = "5dip"/> <! -- Padding: The interval between the text in the Button and the Button boundary --> <padding android: bottom = "10dp" android: left = "10dp" android: right = "10dp" android: top = "10dp"/> </shape> </item> </selector>
This is the Button we saw in the previous figure. Is it really nice?
Well, there is also a selector of TextView.
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/tv_click" android:state_pressed="true"></item> <item android:drawable="@android:color/transparent"></item></selector>
Next we will begin to implement our interface:
First, the homepage interface:
The layout is relatively simple. I believe everyone can understand it.
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/main_bg" > <LinearLayout android:id="@+id/ll_puzzle_main_spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_margin="10dip" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/puzzle_main_type" android:textColor="@color/main_text" android:textSize="@dimen/text_title" /> <TextView android:id="@+id/tv_puzzle_main_type_selected" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@drawable/textview_click" android:text="@string/puzzle_main_type_selected" android:textColor="@color/main_text" android:textSize="@dimen/text_title" /> </LinearLayout> <LinearLayout android:id="@+id/ll_xpuzzle_main_functions" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/gv_xpuzzle_main_pic_list" android:layout_alignParentBottom="true" android:gravity="center" android:layout_alignRight="@+id/gv_xpuzzle_main_pic_list" android:layout_margin="@dimen/padding" > <Button android:id="@+id/btn_puzzle_main_record" style="@style/btn_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:background="@drawable/white_button" android:text="@string/puzzle_main_record" /> <Button android:id="@+id/btn_puzzle_main_setting" style="@style/btn_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:background="@drawable/white_button" android:text="@string/puzzle_main_more" /> </LinearLayout> <GridView android:id="@+id/gv_xpuzzle_main_pic_list" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/ll_xpuzzle_main_functions" android:layout_below="@id/ll_puzzle_main_spinner" android:layout_centerHorizontal="true" android:layout_margin="@dimen/padding" android:gravity="center_horizontal" android:horizontalSpacing="@dimen/padding" android:numColumns="4" android:padding="@dimen/padding" android:verticalSpacing="@dimen/padding" > </GridView></RelativeLayout>
This is OK.
The selection difficulty is a popupwindow, so there is a layout File
This .. So easy
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:orientation="horizontal" > <TextView android:id="@+id/tv_main_type_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="8dp" android:text="2x2" android:textColor="@color/main_text" android:textSize="@dimen/text_title_sub" /> <TextView android:id="@+id/tv_main_type_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="8dp" android:text="3x3" android:textColor="@color/main_text" android:textSize="@dimen/text_title_sub" /> <TextView android:id="@+id/tv_main_type_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4x4" android:textColor="@color/main_text" android:textSize="@dimen/text_title_sub" /></LinearLayout>
Finally, the layout interface of the puzzle is as follows:
That's it. The interface is actually quite simple.
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_puzzle_main_main_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/main_bg" > <LinearLayout android:id="@+id/ll_puzzle_main_spinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:gravity="center_horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/puzzle_main_steps" android:textColor="@color/title_text" android:textSize="@dimen/text_title" /> <TextView android:id="@+id/tv_puzzle_main_counts" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingRight="50dip" android:text="1" android:textColor="@color/title_text" android:textSize="@dimen/text_title" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/puzzle_main_time" android:textColor="@color/title_text" android:textSize="@dimen/text_title" /> <TextView android:id="@+id/tv_puzzle_main_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:text="1" android:textColor="@color/title_text" android:textSize="@dimen/text_title" /> </LinearLayout> <LinearLayout android:id="@+id/ll_puzzle_main_btns" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_margin="@dimen/padding" > <Button android:id="@+id/btn_puzzle_main_img" style="@style/btn_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:background="@drawable/white_button" android:text="@string/puzzle_main_img" /> <Button android:id="@+id/btn_puzzle_main_restart" style="@style/btn_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:background="@drawable/white_button" android:text="@string/puzzle_main_reset" /> <Button android:id="@+id/btn_puzzle_main_back" style="@style/btn_style" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/padding" android:background="@drawable/white_button" android:text="@string/puzzle_main_back" /> </LinearLayout> <GridView android:id="@+id/gv_puzzle_main_detail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/ll_puzzle_main_btns" android:layout_below="@id/ll_puzzle_main_spinner" android:layout_centerInParent="true" android:layout_margin="@dimen/padding" > </GridView></RelativeLayout>
Well, today's stuff is all about preparation, so it's easy.