Learning notes for open-source Chinese Android (3) XML files in the layout folder (B)

Source: Internet
Author: User

In the layout folder, there are four XML files whose initials are B. In fact, you can see that the prefix is the details of the blog, followed by footer, header ), detail (body) and listitem (reference). These four files construct a page for displaying a blog. Next we will introduce them one by one:

1. blog_detail_footer: The footer of the blog. The following code is used to understand it:

It is still a linear layout, followed by a <viewswitcher> label, which is used to display an animation during conversion between two views. Next, nine image files are saved in a linearlayout, which are the comment box, split line, browse body, split line, comment, split line, add to favorites, split line, and share, it is worth mentioning that these images are saved in drawable-hdpi, and there are two types of images: pressed and not pressed. The following is a linear layout that stores the text input boxes and buttons changed after you press the comment box. This is the role of the <viewswitcher> label. The <edittext> label has three interesting attributes: focusable, focusablejavaschmode, and visibility. They respectively set whether to obtain the focus, you can use the touch event to get the focus (which will be discussed later) and set whether the view displays these features. It is not difficult to understand these attributes after understanding the meaning.

2. blog_detail_header: the blog header. The following figure is provided:


The framelayout layout is used. Considering the coverage, I found an interesting problem:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/blog_detail_header"   android:layout_width="fill_parent"   android:layout_height="wrap_content"   android:paddingLeft="2dip"   android:paddingRight="2dip"   android:gravity="center_vertical"   android:orientation="horizontal"   android:background="@drawable/head_bg">

The last sentence of this Code shows the background, that is, head_bg. However, when I look for it in the drawable_hdpi folder, I find that the source image looks like this:

Obviously, this image is zoomed in and rotated when it is used. It is proposed here and its code will be searched later.

OK, go back to the hierarchical layout, where there are images, text, progress bars, and images in sequence. In order, they are returned and the "blog body" is displayed ", the progress bar and refresh page shown in the figure (this is the same as the progress bar ). It's hard to understand. Next one.

3. blog_detail: the body of the blog, which can be understood as follows:


This is complicated. It starts with a popular linearlayout layout.

<include layout="@layout/blog_detail_header"/>

This code inserts the previously mentioned page to implement code reuse. All the subsequent code is included in viewswitcher to achieve the split-screen animation effect (the specific function is not clear ), after that, these are included in a scrollview label, which is used to add a vertical scroll bar for the layout. Another linearlayout contains an image and text. The former displays the document type (original or reprinted) and the latter is the article name. Next, a linearlayout, based on the picture to see the code, you can find that they are the author name, "published on", the release time, the commented icon, and the number of comments.

<View style="@style/detail_cut_line"/>

 
The above code is the blue split line in the figure.

<WebView android:id="@+id/blog_detail_webview"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@color/white"/>

This code is a network view used to display online articles.

 <include layout="@layout/comment_list"/>

I haven't found any use of this Code. Do you have any comments?

   <include layout="@layout/blog_detail_footer"/>

The end is to use the footer code. This is the complete blog body page.

4. blog_detail_lisitem: reference. To be honest, I think this code should be placed on the body, because the specific function of this Code is to display the content between the header and the network view, however, unlike blog_detail_footer and blog_detail_header, in the body, he does not want the former to be referenced by the include tag, but does not know why it can simplify the Code but is not used, then I carefully compared the two sections of code and found that there are many differences in the data, probably because we need to narrow down the text properly. Because the content is the same as that in the text, it is not described in detail.

OK, not finished yet.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.