Android Learning Series (23)-Main App interface implementation

In the previous article "Android Learning Series (22)-Comparison of App Main Interface", we analyzed several main interface la S and selected the most popular classic layout.
Today, we will use the code to implement this classic layout.

1. Preview a chart
Let's take a look at the final Interface Design:

The top part is a 9patch background image + title text;
There are five tab labels at the bottom, indicating the five modules of the application.
The intermediate content is the specific content of each module, which can be further classified or directly displayed.

2. Prepare materials
Based on the interface of the previous article, we need to provide two materials in advance: Top + bottom.
The materials on the top are very simple. The most important thing is the background (9 patch image ):

There is a little more material at the bottom:
(1). the background of each tab must be normal and selected. There are 10 images in total;
(2) Each tab has a split line and an image;
(3). In order to adapt to the screen width and keep the image not distorted, the tab background must be consistent with the background color of botton. Therefore, a background image with the same background is required.
As follows:
(1 ).

(2 ).

(3 ).

Here, I have repeatedly considered how to put images and texts together, which can greatly reduce the complexity of the Code and ensure beautiful styles. We use Photoshop to control them, the flexibility is greatly enhanced.
The above shows how many photos I have taken on the Internet and processed them a little as the materials we have implemented below.

3. Implementation Principle
Here, I used the getDecorView method and found that the layout and code of this method are concise, and it looks good (to be checked ).
Use the core code to illustrate the principle:

// MainTabContainer is an empty layout. As the container of each tab, // activity is the activity corresponding to each tab. // getDecorView is the view of the corresponding activity and is added to the tab container, you can achieve the effect of activity switching. removeAllViews (); mainTabIntent = new Intent (this, activity); mainTabContainer. addView (localActivityManager. startActivity (id, mainTabIntent ). getDecorView ());

You can switch the view of a tab by switching the decorView of different activities.

4. Basic Framework
The layout interface is very clear, with the top + bottom + middle tab content
I use relative layout (compared with linear layout, I often choose frame layout and relative layout. I prefer these two small la S ):

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "fill_parent" android: layout_height = "fill_parent"> <LinearLayout android: id = "@ + id/main_tab_banner" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: paddingLeft = "10dip" android: orientation = "horizontal" android: gravity = "center" android: backgroun D = "@ drawable/main_banner_bg" android: layout_alignParentTop = "true"> <! -- Title --> </LinearLayout> <LinearLayout android: id = "@ + id/main_tab" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center" android: background = "@ drawable/tab_bg" android: layout_alignParentBottom = "true"> <! -- Content --> </LinearLayout> <LinearLayout android: id = "@ + id/main_tab_container" android: layout_above = "@ id/main_tab" android: layout_below = "@ id/comment" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "# FFFFE0"> </LinearLayout> </RelativeLayout>

Something that looks complicated. It's much easier to break it down.
Add a TextView to the title for display.
In the content area, we need to fill in five Tab backgrounds and one split line. For details, refer to model 4 in "Android Learning Series (5)-simple model of App layout, the layout_weight attribute is used and an average of five tabs are separated.
The layout file is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "fill_parent" android: layout_height = "fill_parent"> <LinearLayout android: id = "@ + id/main_tab_banner" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: paddingLeft = "10dip" android: orientation = "horizontal" android: gravity = "center" android: background = "@ drawable/main_banner_bg" android: layout_alignParentTop = "true"> <TextView android: id = "@ + id/main_tab_banner_title" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "Meihua" android: textSize = "20dip" android: textColor = "#000000"/> </LinearLayout> <LinearLayout android: id = "@ + id/main_tab" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center" android: background = "@ drawable/tab_bg" android: layout_alignParentBottom = "true"> <ImageView android: id = "@ + id/appreciate_tab_btn" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "fill_parent" android: gravity = "center_horizontal | bottom" android: src = "@ drawable/appreciate_press"/> <ImageView android: gravity = "center" android: layout_gravity = "center_vertical" android: layout_width = "5dip" android: layout_height = "wrap_content" android: src = "@ drawable/tab_split"/> <ImageView android: id = "@ + id/discuss_tab_btn" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal | bottom" android: textSize = "16dip" android: src = "@ drawable/discuss_normal" android: textColor = "#000000"/> <ImageView android: gravity = "center" android: layout_gravity = "center_vertical" android: layout_width = "5dip" android: layout_height = "wrap_content" android: src = "@ drawable/tab_split"/> <ImageView android: id = "@ + id/identification_tab_btn" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal | bottom" android: textSize = "16dip" android: src = "@ drawable/identification_normal" android: textColor = "#000000"/> <ImageView android: gravity = "center" android: layout_gravity = "center_vertical" android: layout_width = "5dip" android: layout_height = "wrap_content" android: src = "@ drawable/tab_split"/> <ImageView android: id = "@ + id/favorite_tab_btn" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal | bottom" android: textSize = "16dip" android: textColor = "#000000" android: src = "@ drawable/favorite_normal"/> <ImageView android: gravity = "center" android: layout_gravity = "center_vertical" android: layout_width = "5dip" android: layout_height = "wrap_content" android: src = "@ drawable/tab_split"/> <ImageView android: id = "@ + id/setting_tab_btn" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: gravity = "center_horizontal | bottom" android: textSize = "16dip" android: src = "@ drawable/setting_normal android: textColor = "#000000"/> </LinearLayout> <LinearLayout android: id = "@ + id/main_tab_container" android: layout_above = "@ id/main_tab" android: layout_below = "@ id/comment" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "# FFFFE0"> </LinearLayout> </RelativeLayout>

The main_tab_container is the container layout, which dynamically stores the view of the switched activity.
At this time, it is as follows:

The content in the middle is blank, and clicking tab does not have any effect. We will continue to implement it.
This is the layout file main_tab_frame.xml.

5. Event Effect
Now we will associate the click effect and switch the title.
Select different tabs, display different titles, and switch between different activities.
The following is an example of the main code used for clicking "comment:

// Comment discussImageView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {// Title mainTabTitleTextView. setText ("comment on flowers"); // switch content setContainerView ("discuss", DiscussTabActivity. class); // switch the background of the tab page to appreciateImageView. setImageResource (R. drawable. appreciate_normal); discussImageView. setImageResource (R. drawable. discuss_press); identificationImageView. setImageResource (R. drawable. Identification_normal); favoriteImageView. setImageResource (R. drawable. favorite_normal); settingImageView. setImageResource (R. drawable. setting_normal) ;}}); // switch activity public void setContainerView (String id, Class <?> Activity) {mainTabContainer. removeAllViews (); maintabintintent = new Intent (this, activity); mainTabContainer. addView (localActivityManager. startActivity (id, mainTabIntent). getDecorView ());}

We inherit the ActivityGroup class to implement this complete class MainTabFrame. java:

Public class MainTabFrame extends ActivityGroup {// Tab Activity Layout private LocalActivityManager localActivityManager = null; private LinearLayout mainTabContainer = null; private Intent mainTabIntent = null; // Tab banner title private TextView comment = null; // Tab ImageView private ImageView appreciateImageView = null; private ImageView discussImageView = null; private ImageView IdentificationImageView = null; private ImageView favoriteImageView = null; private ImageView settingImageView = null; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main_tab_frame); mainTabContainer = (LinearLayout) findViewById (R. id. main_tab_container); localActivityManager = getLocalActivityManager (); setContainerView (" Ppreciate ", AppreciateTabActivity. class); initTab ();}/*** initialize the Tab item */private void initTab () {mainTabTitleTextView = (TextView) findViewById (R. id. main_tab_banner_title); appreciateImageView = (ImageView) findViewById (R. id. appreciate_tab_btn); discussImageView = (ImageView) findViewById (R. id. discuss_tab_btn); identificationImageView = (ImageView) findViewById (R. id. identification_tab_btn); favoriteIm AgeView = (ImageView) findViewById (R. id. favorite_tab_btn); settingImageView = (ImageView) findViewById (R. id. setting_tab_btn); // appreciateImageView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {mainTabTitleTextView. setText ("beautiful flowers"); setContainerView ("appreciate", AppreciateTabActivity. class); appreciateImageView. setImageResource (R. drawable. appreciate_press); di ScussImageView. setImageResource (R. drawable. discuss_normal); identificationImageView. setImageResource (R. drawable. identification_normal); favoriteImageView. setImageResource (R. drawable. favorite_normal); settingImageView. setImageResource (R. drawable. setting_normal) ;}}); // comment discussImageView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {mainTabTitleTextView. setTex T ("comment on flowers"); setContainerView ("discuss", DiscussTabActivity. class); appreciateImageView. setImageResource (R. drawable. appreciate_normal); discussImageView. setImageResource (R. drawable. discuss_press); identificationImageView. setImageResource (R. drawable. identification_normal); favoriteImageView. setImageResource (R. drawable. favorite_normal); settingImageView. setImageResource (R. drawable. setting_normal );}} ); // IdentificationImageView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {mainTabTitleTextView. setText ("Eye recognition"); setContainerView ("identification", IdentificationTabActivity. class); appreciateImageView. setImageResource (R. drawable. appreciate_normal); discussImageView. setImageResource (R. drawable. discuss_normal); identificationImageView. setImageResource (R. drawa Ble. identification_press); favoriteImageView. setImageResource (R. drawable. favorite_normal); settingImageView. setImageResource (R. drawable. setting_normal) ;}}); // Add favoriteImageView to favorites. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {mainTabTitleTextView. setText ("My favorites"); setContainerView ("favorite", FavoriteTabActivity. class); appreciateImageView. setImageResource (R. d Rawable. appreciate_normal); discussImageView. setImageResource (R. drawable. discuss_normal); identificationImageView. setImageResource (R. drawable. identification_normal); favoriteImageView. setImageResource (R. drawable. favorite_press); settingImageView. setImageResource (R. drawable. setting_normal) ;}}); // set settingImageView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {MainTabTitleTextView. setText ("definition Settings"); setContainerView ("setting", SettingTabActivity. class); appreciateImageView. setImageResource (R. drawable. appreciate_normal); discussImageView. setImageResource (R. drawable. discuss_normal); identificationImageView. setImageResource (R. drawable. identification_normal); favoriteImageView. setImageResource (R. drawable. favorite_normal); settingImageView. setImageResource (R. Drawable. setting_press) ;}});} public void setContainerView (String id, Class <?> Activity) {mainTabContainer. removeAllViews (); maintabintintent = new Intent (this, activity); mainTabContainer. addView (localActivityManager. startActivity (id, mainTabIntent). getDecorView ());}}

The specific display of each activity is implemented independently through AppreciateTabActivity, DiscussTabActivity, IdentificationTabActivity, FavoriteTabActivity, and SettingTabActivity.

6. Expansion suggestions
Here we add two points:
(1 ). in the above example, the title bar is placed in MainTabFrame. The advantage of this is that it is unified and convenient. The disadvantage of this is that if the title bar of each activity is a different button, different operations may expand. Therefore, place the title bar in the main Acvtivity and sub-Activity. Just think about it.
(2 ). the tab switching effect is very simple. The specific Image Shadow, concave and convex, and text color are not differentiated (I am not familiar with Photoshop), and the beautification can be greatly improved.

7. Summary
By implementing such a simple main interface framework, we can quickly start our projects of interest and provide a popular reference, which is an essential foundation for android learners.
The accumulation and analysis of such things can also improve our aesthetic feeling of application.