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.