Research and Implementation of Baidu Post Bar Layout Framework (Android version)

I still remember that when I first came into contact with the "Baidu Post Bar" application a few months ago, it was instantly attracted by its floating title bar and tag bar, although mm, which had a UI around him, said that the float type was generally designed to have hidden functions, it is usually better to use the straight-through style, here, I will not discuss the advantages and disadvantages of optimization. We can take two screenshots and try them on our own.

Floating title bar and label bar: (Baidu post bar); pass-through title bar and label bar: (QQ space)

The purpose of this article is to study the implementation principle of the title bar and label bar of Baidu Post Bar;

1. Implementation of floating title bars

There are two implementation principles: 1) set the layout_margin attribute of the title bar in the layout file; 2) set a background image in 9-patch format for the title bar, set the gap between the top, bottom, and left of the image. As shown in, the top, left, and right of the background image have a pixel gap, and the bottom is two pixels.

The layout file of the title bar is as follows:

<! -- Title bar --> <linearlayout Android: Id = "@ + ID/home_layout_bar" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_alignparenttop = "true" Android: layout_gravity = "TOP" Android: Background = "@ drawable/title_bg" Android: gravity = "center"> <linearlayout Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "@ drawable/home_topbar_bg" Andro ID: gravity = "center" Android: Orientation = "horizontal"> <! -- My post --> <imagebutton Android: Id = "@ + ID/home_bt_like" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_gravity = "center" Android: layout_margin = "0.0dip" Android: layout_weight = "1.0" Android: Background = "@ null" Android: padding = "0.0dip" Android: paddingbottom = "2.0dip" Android: scaletype = "center" Android: src = "@ drawable/home_bt_like_on"/> <! -- My tag --> <imagebutton Android: Id = "@ + ID/home_bt_mark" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_gravity = "center" Android: layout_margin = "0.0dip" Android: layout_weight = "1.0" Android: Background = "@ null" Android: padding = "0.0dip" Android: paddingbottom = "2.0dip" Android: scaletype = "center" Android: src = "@ drawable/home_bt_mark"/> </linearlayout>

Here, title_bg is the 9-patch background image used to achieve the floating effect. To optimize the visual effect, a layer of image is added to the background image, that is, home_topbar_bg, comparison between addition and non-Addition

The press and release of my posts and my bookmarks are achieved by switching the image resources of Android: Background and Android: SRC, instead of using the usual selector method, click the response function of the set button in the Code. The key code for replacing the button image resource is as follows:

mButtonLike.setBackgroundResource(R.drawable.home_topbar_bt);mButtonLike.setImageResource(R.drawable.home_bt_like_on);mButtonMark.setBackgroundDrawable(null);mButtonMark.setImageResource(R.drawable.home_bt_mark);

2. Implement the floating label bar

There are many combinations of the implementation of the label bar. It is easier to use the tabhost + tabwidget provided by the system. tabhost + radiogroup is preferred. The second method is used below.

The floating effect of the label bar is also achieved through the 9-patch background image, such:

The implementation of the label bar must have three basic elements, as shown in, 1) the <tabhost> tag with ID @ Android: ID/tabhost; 2) the ID is @ Android: ID/tabcontent <framelayout> label; 3) ID is the <tabwidget> label of @ Android: ID/tabs. As shown in:

Here we use tabhost + radiogroup, that is, use radiogroup instead of tabwidget. Therefore, the visibility of tabwidget in the layout file is set to gone, followed by the layout of radiogroup:

        <FrameLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:layout_marginTop="-10.0dip"            android:background="@drawable/maintab_toolbar_bg"            android:paddingLeft="7.0dip"            android:paddingRight="7.0dip" >            <RadioGroup                android:id="@+id/main_radio"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:gravity="center_vertical"                android:orientation="horizontal" >                <RadioButton                    android:id="@+id/radio_home"                    style="@style/main_tab_bottom"                    android:drawableTop="@drawable/tabs_home"                    android:text="@string/bar" />                <RadioButton                    android:id="@+id/radio_mention"                    style="@style/main_tab_bottom"                    android:drawableTop="@drawable/tabs_sort"                    android:text="@string/remind" />                <RadioButton                    android:id="@+id/radio_person_info"                    style="@style/main_tab_bottom"                    android:drawableTop="@drawable/tabs_search"                    android:text="@string/person_info" />                <RadioButton                    android:id="@+id/radio_more"                    style="@style/main_tab_bottom"                    android:drawableTop="@drawable/tabs_more"                    android:text="@string/more" />            </RadioGroup>            <TextView                android:id="@+id/message_mention"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="top|left|center"                android:layout_marginLeft="115.0dip"                android:layout_marginTop="-5.0dip"                android:background="@drawable/message_tips"                android:gravity="center"                android:text=""                android:textColor="#ffffffff"                android:textSize="13.0sp"                android:visibility="visible" />            <TextView                android:id="@+id/message_person"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="top|left|center"                android:layout_marginLeft="190.0dip"                android:layout_marginTop="-5.0dip"                android:background="@drawable/message_tips"                android:gravity="center"                android:text=""                android:textColor="#ffffffff"                android:textSize="13.0sp"                android:visibility="visible" />        </FrameLayout>

Where

1)Maintab_toolbar_bgIs the background image of the label bar to achieve the floating effect;

2) In radiobutton

Android: drawabletop ="@ Drawable/tabs_sort"

Android: text ="@ String/remind"

Combination can easily achieve the effects of text on images;

3) Android: layout_margintop = in framelayout"-10.0dip"Implement the overlap between the label bar and the framelayout part with the ID tabcontent (10.0dip );

4) Two textviews and framelayout are used together to implement the Message count prompt function in the upper-right corner of the tag.

The next step is how to add tags and click the response of tags in the code. You can view the Code directly:

package com.hust.iprai.wen;import android.app.AlertDialog;import android.app.TabActivity;import android.content.DialogInterface;import android.content.Intent;import android.os.Bundle;import android.view.KeyEvent;import android.widget.CompoundButton;import android.widget.RadioButton;import android.widget.TabHost;import android.widget.TextView;public class TiebaActivity extends TabActivity implementsCompoundButton.OnCheckedChangeListener {private static final String HOME_TAB = "home_tab";private static final String MENTION_TAB = "mention_tab";private static final String PERSON_TAB = "person_tab";private static final String MORE_TAB = "more_tab";private Intent mHomeIntent = null;private Intent mMentionIntent = null;private Intent mPersonIntent = null;private Intent mMoreIntent = null;private TabHost mTabHost = null;private TextView mMessageTipsMention = null;private TextView mMessageTipsPerson = null;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.maintabs_activity);mTabHost = getTabHost();initIntents();initTips();initRadios();setupIntents();}private void initIntents() {mHomeIntent = new Intent(this, HomeActivity.class);mMentionIntent = new Intent(this, MentionActivity.class);mPersonIntent = new Intent(this, PersonInfoActivity.class);mMoreIntent = new Intent(this, MoreActivity.class);}private void initTips() {mMessageTipsMention = (TextView) findViewById(R.id.message_mention);mMessageTipsPerson = (TextView) findViewById(R.id.message_person);mMessageTipsMention.setText("2");mMessageTipsPerson.setText("4");}private void initRadios() {((RadioButton) findViewById(R.id.radio_home)).setOnCheckedChangeListener(this);((RadioButton) findViewById(R.id.radio_mention)).setOnCheckedChangeListener(this);((RadioButton) findViewById(R.id.radio_person_info)).setOnCheckedChangeListener(this);((RadioButton) findViewById(R.id.radio_more)).setOnCheckedChangeListener(this);}private void setupIntents() {((RadioButton) findViewById(R.id.radio_home)).setChecked(true);mTabHost.addTab(buildTabSpec(HOME_TAB, mHomeIntent));mTabHost.addTab(buildTabSpec(MENTION_TAB, mMentionIntent));mTabHost.addTab(buildTabSpec(PERSON_TAB, mPersonIntent));mTabHost.addTab(buildTabSpec(MORE_TAB, mMoreIntent));mTabHost.setCurrentTabByTag(HOME_TAB);}private TabHost.TabSpec buildTabSpec(String tag, Intent intent) {TabHost.TabSpec tabSpec = mTabHost.newTabSpec(tag);tabSpec.setContent(intent).setIndicator("",getResources().getDrawable(R.drawable.icon));return tabSpec;}public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked) {switch (buttonView.getId()) {case R.id.radio_home:mTabHost.setCurrentTabByTag(HOME_TAB);break;case R.id.radio_mention:mTabHost.setCurrentTabByTag(MENTION_TAB);break;case R.id.radio_person_info:mTabHost.setCurrentTabByTag(PERSON_TAB);break;case R.id.radio_more:mTabHost.setCurrentTabByTag(MORE_TAB);break;default:break;}}}@Overridepublic boolean dispatchKeyEvent(KeyEvent event) {if ((event.getAction() == KeyEvent.ACTION_DOWN)&& (event.getKeyCode() == KeyEvent.KEYCODE_BACK)) {quitDialog();}return super.dispatchKeyEvent(event);}private void quitDialog() {new AlertDialog.Builder(this).setTitle(R.string.alerm_title).setIcon(null).setCancelable(false).setMessage(R.string.alert_quit_confirm).setPositiveButton(R.string.alert_yes_button,new DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog,int which) {TiebaActivity.this.finish();}}).setNegativeButton(R.string.alert_no_button,new DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog,int which) {dialog.dismiss();}}).create().show();}}

3. Implementation of intermediate loading progress bar

Now that we have introduced the title bar above and the tab bar below, let's talk about the middle part. Let's take loading the progress bar as an example. The effect is shown in:

The activity corresponding to the "my posts" button is likeactivity, and its layout file is as follows. The listview and progressbar are laid out in framelayout, And the progressbar is located at the upper layer of the listview.

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <ListView        android:id="@+id/home_lv_forum"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@color/backgroundcolor"        android:cacheColorHint="@color/backgroundcolor"        android:divider="@drawable/list_divider"        android:fadingEdge="none"        android:listSelector="@drawable/list_selector" />    <ProgressBar        android:id="@+id/home_progress_like"        style="?android:attr/progressBarStyleInverse"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:indeterminateDrawable="@drawable/progressbar"        android:visibility="visible" /></FrameLayout>

Android: indeterminatedrawable ="@ Drawable/progressbar"The figure used to specify the display of the progress bar. The definition of progressbar. XML is as follows:

<?xml version="1.0" encoding="utf-8"?><animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/loading"    android:pivotX="50.0%"android:pivotY="50.0%" />

That is, the image loading rotates around its center. Shows the loading image:

Framework Source: http://download.csdn.net/detail/ace1985/4472460