Android development my Sina Weibo client-loading page UI (1.1)

This software sets the user's first access to the page load wait function, which is a waiting page lasting 1 or 2 seconds for the user, while the user is waiting, the program performs some necessary checks and data preparation work. The loading page is divided into the UI and function sections. The first step is the implementation of the UI from the table and in, in addition to functionality, it is also very important for a software to have a glamorous appearance. Although I have a general design level, I have done the following with ps:

1. The next task is to display the effect in android, from the design of this effect, the image is divided into four parts: Background, version number, software name and icon, author name, and blog. In this way, four png images are generated, in the Background section, you need to add an additional background image for horizontal screen and vertical screen switching, and then create an android project. My name here is MySinaWeibo. In the android version, check 2.2, create an Activity named MainActivity as the starting page of the entire software, and save the above images to the res/drawable-mdpi folder of the project, for the differences between the drawable-mdpi, drawable-ldpi, and drawable-hdpi folders under the res directory, the mdpi mainly contains medium-resolution images, such as HVGA (320x480 ). Ldpi mainly uses low-resolution images, such as QVGA (240x320 ). Hdpi mainly contains high-resolution images, such as WVGA (480x800) and FWVGA (480x854 ). The android system will go to these folders to find the corresponding images based on the machine resolution. In order to be compatible with different screens of different platforms, we recommend that you store images of different versions in different folders as needed. I will not take this into consideration here.

2. After preparing image resources, write the layout file and create main in the res/layout folder. xml file. This layout uses the LinearLayout control as the top-level control, the image view control is used to align the top of the version number image to the left, align the software name and Icon image to the center, and align the author name and the bottom of the blog image to the right. Note: Add a RelativeLayout control under the version number Image Display ImageView control as the software name and Icon image ImageVIew and author name and the parent control of the blog image ImageView to control the realization that the center alignment has been aligned at the bottom, the Code is as follows:

 

[Java] <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: id = "@ + id/layout"
Android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/ver"
Android: layout_marginTop = "15dip"
Android: layout_marginLeft = "15dip">
</ImageView>
<RelativeLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/logo"
Android: layout_centerInParent = "true">
</ImageView>

<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/dev"
Android: layout_alignParentBottom = "true"
Android: layout_alignParentRight = "true"
Android: layout_marginRight = "5dip"
Android: layout_marginBottom = "35dip">
</ImageView>
</RelativeLayout>
</LinearLayout>
<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: id = "@ + id/layout"
Android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/ver"
Android: layout_marginTop = "15dip"
Android: layout_marginLeft = "15dip">
</ImageView>
<RelativeLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/logo"
Android: layout_centerInParent = "true">
</ImageView>

<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/dev"
Android: layout_alignParentBottom = "true"
Android: layout_alignParentRight = "true"
Android: layout_marginRight = "5dip"
Android: layout_marginBottom = "35dip">
</ImageView>
</RelativeLayout>
</LinearLayout>
3. Open the Activity source code file MainActivity in ec and edit it. The onCreate code is as follows:

[Java] public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
}
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
}
Then run the project to display it in the simulator. The above pictures are displayed according to the designed position and effect, but only the background of the entire page is black. Next, display the background, in order to achieve horizontal and vertical screen switching, the display of the background image uses code to control the display. First, use the following method to obtain whether the current mobile phone is a horizontal screen or a vertical screen:

[Java] // gets the screen direction
Public static int ScreenOrient (Activity activity)
{
Int orient = activity. getRequestedOrientation ();
If (orient! = ActivityInfo. SCREEN_ORIENTATION_LANDSCAPE & orient! = ActivityInfo. SCREEN_ORIENTATION_PORTRAIT ){
// Width> the height is a horizontal screen, and the portrait screen is used anyway.
WindowManager windowManager = activity. getWindowManager ();
Display display = windowManager. getDefaultDisplay ();
Int screenWidth = display. getWidth ();
Int screenHeight = display. getHeight ();
Orient = screenWidth <screenHeight? ActivityInfo. SCREEN_ORIENTATION_PORTRAIT: ActivityInfo. SCREEN_ORIENTATION_LANDSCAPE;
}
Return orient;
}
// Obtain the screen direction
Public static int ScreenOrient (Activity activity)
{
Int orient = activity. getRequestedOrientation ();
If (orient! = ActivityInfo. SCREEN_ORIENTATION_LANDSCAPE & orient! = ActivityInfo. SCREEN_ORIENTATION_PORTRAIT ){
// Width> the height is a horizontal screen, and the portrait screen is used anyway.
WindowManager windowManager = activity. getWindowManager ();
Display display = windowManager. getDefaultDisplay ();
Int screenWidth = display. getWidth ();
Int screenHeight = display. getHeight ();
Orient = screenWidth <screenHeight? ActivityInfo. SCREEN_ORIENTATION_PORTRAIT: ActivityInfo. SCREEN_ORIENTATION_LANDSCAPE;
}
Return orient;
}
Then, write a public method named AutoBackground to achieve automatic switching of the screen background. This method is required for almost every functional page at the end:

[Java] public static void AutoBackground (Activity activity, View view, int Background_v, int Background_h)
{
Int orient = ScreenOrient (activity );
If (orient = ActivityInfo. SCREEN_ORIENTATION_PORTRAIT) {// portrait
View. setBackgroundResource (Background_v );
} Else {// horizontal
View. setBackgroundResource (Background_h );
}
}
Public static void AutoBackground (Activity activity, View view, int Background_v, int Background_h)
{
Int orient = ScreenOrient (activity );
If (orient = ActivityInfo. SCREEN_ORIENTATION_PORTRAIT) {// portrait
View. setBackgroundResource (Background_v );
} Else {// horizontal
View. setBackgroundResource (Background_h );
}
}
After completing the preceding two methods, call the AutoBackground method in the onCreate method of MainActivity to automatically switch the screen:

[Java] LinearLayout layout = (LinearLayout) findViewById (R. id. layout );
// Automatically adapts to the background
AndroidHelper. AutoBackground (this, layout, R. drawable. bg_v, R. drawable. bg_h );
LinearLayout layout = (LinearLayout) findViewById (R. id. layout );
// Automatically adapts to the background
AndroidHelper. AutoBackground (this, layout, R. drawable. bg_v, R. drawable. bg_h );
This completes the implementation of the UI part of the load page. The test results in the running simulator are basically consistent with the top design. The test is as follows:

From sunset hut