完美逆向百度手机助手5.0底部菜单栏 - Android Tabhost 点击动画



先看看百度手机助手5.0的样子：

发现他是用一个CustomTabHost.java来实现底部TabHost点击效果的，很漂亮，点击Tab的时候文字会上跑，图片会从底部跑出来的一个小动画。

下面我用自己的方法逆袭了他的CustomTabHost，感觉用起来比它的好用，而且简单不少！

本文只给出关键代码，需要工程的自行下载：

[java] view plain copy print ?

1. package com.wj.ring5577.ui;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.FragmentActivity;  
5. import android.view.LayoutInflater;  
6. import android.view.Menu;  
7. import android.widget.TabHost;  
8. import android.widget.TabHost.OnTabChangeListener;  
9.   
10. import com.wj.ring5577.R;  
11.   
12. public class MainActivity extends FragmentActivity {  
13.   
14.     @Override  
15.     protected void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.activity_main);  
18.   
19.         TabHost tabHost = (TabHost) findViewById(R.id.tabhost);  
20.         tabHost.setup(); // Call setup() before adding tabs if loading TabHost  
21.                          // using findViewById().  
22.   
23.         final WJTabMenuView mv = (WJTabMenuView) LayoutInflater.from(this)  
24.                 .inflate(R.layout.test, null);  
25.         mv.setText("Tag A");  
26.         final WJTabMenuView mv2 = (WJTabMenuView) LayoutInflater.from(this)  
27.                 .inflate(R.layout.test, null);  
28.         mv2.setText("Tag B");  
29.         final WJTabMenuView mv3 = (WJTabMenuView) LayoutInflater.from(this)  
30.                 .inflate(R.layout.test, null);  
31.         mv3.setText("Tag C");  
32.         final WJTabMenuView mv4 = (WJTabMenuView) LayoutInflater.from(this)  
33.                 .inflate(R.layout.test, null);  
34.         mv4.setText("Tag D");  
35.   
36.         tabHost.setOnTabChangedListener(new OnTabChangeListener() {  
37.             @Override  
38.             public void onTabChanged(String tabId) {  
39.                 mv.unSelected();  
40.                 mv2.unSelected();  
41.                 mv3.unSelected();  
42.                 mv4.unSelected();  
43.                 if (tabId.equals("taba")) {  
44.                     mv.selected();  
45.                 } else if (tabId.equals("tabb")) {  
46.                     mv2.selected();  
47.                 } else if (tabId.equals("tabc")) {  
48.                     mv3.selected();  
49.                 } else if (tabId.equals("tabd")) {  
50.                     mv4.selected();  
51.                 }  
52.             }  
53.         });  
54.   
55.         tabHost.addTab(tabHost.newTabSpec("taba").setIndicator(mv)  
56.                 .setContent(R.id.tab1));  
57.         tabHost.addTab(tabHost.newTabSpec("tabb").setIndicator(mv2)  
58.                 .setContent(R.id.tab2));  
59.         tabHost.addTab(tabHost.newTabSpec("tabc").setIndicator(mv3)  
60.                 .setContent(R.id.tab3));  
61.         tabHost.addTab(tabHost.newTabSpec("tabd").setIndicator(mv4)  
62.                 .setContent(R.id.tab4));  
63.   
64.     }  
65.   
66.     @Override  
67.     public boolean onCreateOptionsMenu(Menu menu) {  
68.         getMenuInflater().inflate(R.menu.main, menu);  
69.         return true;  
70.     }  
71.   
72. }  

package com.wj.ring5577.ui;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

import com.wj.ring5577.R;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
        tabHost.setup(); // Call setup() before adding tabs if loading TabHost
                         // using findViewById().

        final WJTabMenuView mv = (WJTabMenuView) LayoutInflater.from(this)
                .inflate(R.layout.test, null);
        mv.setText("Tag A");
        final WJTabMenuView mv2 = (WJTabMenuView) LayoutInflater.from(this)
                .inflate(R.layout.test, null);
        mv2.setText("Tag B");
        final WJTabMenuView mv3 = (WJTabMenuView) LayoutInflater.from(this)
                .inflate(R.layout.test, null);
        mv3.setText("Tag C");
        final WJTabMenuView mv4 = (WJTabMenuView) LayoutInflater.from(this)
                .inflate(R.layout.test, null);
        mv4.setText("Tag D");

        tabHost.setOnTabChangedListener(new OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                mv.unSelected();
                mv2.unSelected();
                mv3.unSelected();
                mv4.unSelected();
                if (tabId.equals("taba")) {
                    mv.selected();
                } else if (tabId.equals("tabb")) {
                    mv2.selected();
                } else if (tabId.equals("tabc")) {
                    mv3.selected();
                } else if (tabId.equals("tabd")) {
                    mv4.selected();
                }
            }
        });

        tabHost.addTab(tabHost.newTabSpec("taba").setIndicator(mv)
                .setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("tabb").setIndicator(mv2)
                .setContent(R.id.tab2));
        tabHost.addTab(tabHost.newTabSpec("tabc").setIndicator(mv3)
                .setContent(R.id.tab3));
        tabHost.addTab(tabHost.newTabSpec("tabd").setIndicator(mv4)
                .setContent(R.id.tab4));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

[java] view plain copy print ?

1. package com.wj.ring5577.ui;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.animation.Animation;  
8. import android.view.animation.Animation.AnimationListener;  
9. import android.view.animation.AnimationUtils;  
10. import android.widget.ImageView;  
11. import android.widget.LinearLayout;  
12. import android.widget.TextView;  
13.   
14. import com.wj.ring5577.R;  
15.   
16. /** 
17.  * Tab底部菜单视图 
18.  *  
19.  * @author Harris 
20.  *  
21.  */  
22. public class WJTabMenuView extends LinearLayout {  
23.     private TextView mTextView = null;  
24.     private ImageView mImageView = null;  
25.     private boolean interruptFlag;  
26.     private Context mContext;  
27.     private Animation mAnim_txt;  
28.     private Animation mAnim_img;  
29.   
30.     public WJTabMenuView(Context context) {  
31.         super(context);  
32.         mContext = context;  
33.     }  
34.   
35.     public WJTabMenuView(Context context, AttributeSet attrs) {  
36.         super(context, attrs);  
37.   
38.         LayoutInflater layoutInflater = (LayoutInflater) context  
39.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
40.         layoutInflater.inflate(R.layout.wjtabmenulayout, this);  
41.         mTextView = (TextView) findViewById(R.id.wjtabmenu_tv);  
42.         mImageView = (ImageView) findViewById(R.id.wjtabmenu_iv);  
43.         mContext = context;  
44.         mAnim_txt = AnimationUtils.loadAnimation(mContext,  
45.                 R.anim.bottommenu_txt_anim);  
46.         mAnim_txt.setAnimationListener(new AnimationListener() {  
47.             @Override  
48.             public void onAnimationStart(Animation animation) {  
49.             }  
50.   
51.             @Override  
52.             public void onAnimationRepeat(Animation animation) {  
53.             }  
54.   
55.             @Override  
56.             public void onAnimationEnd(Animation animation) {  
57.                 if (!interruptFlag) {  
58.                     mTextView.setVisibility(View.GONE);  
59.                 }  
60.             }  
61.         });  
62.   
63.         mAnim_img = AnimationUtils.loadAnimation(mContext,  
64.                 R.anim.bottommenu_img_anim);  
65.     }  
66.   
67.     public void setText(String title) {  
68.         mTextView.setText(title);  
69.     }  
70.   
71.     /** 
72.      * 放弃选择 
73.      */  
74.     public void unSelected() {  
75.         interruptFlag = true;  
76.         clearAnimation();  
77.         mTextView.setVisibility(View.VISIBLE);  
78.     }  
79.   
80.     /** 
81.      * 选中 
82.      */  
83.     public void selected() {  
84.         interruptFlag = false;  
85.         mTextView.startAnimation(mAnim_txt);  
86.         mImageView.startAnimation(mAnim_img);  
87.     }  
88. }  

package com.wj.ring5577.ui;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.wj.ring5577.R;

/**
 * Tab底部菜单视图
 * 
 * @author Harris
 * 
 */
public class WJTabMenuView extends LinearLayout {
    private TextView mTextView = null;
    private ImageView mImageView = null;
    private boolean interruptFlag;
    private Context mContext;
    private Animation mAnim_txt;
    private Animation mAnim_img;

    public WJTabMenuView(Context context) {
        super(context);
        mContext = context;
    }

    public WJTabMenuView(Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater layoutInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layoutInflater.inflate(R.layout.wjtabmenulayout, this);
        mTextView = (TextView) findViewById(R.id.wjtabmenu_tv);
        mImageView = (ImageView) findViewById(R.id.wjtabmenu_iv);
        mContext = context;
        mAnim_txt = AnimationUtils.loadAnimation(mContext,
                R.anim.bottommenu_txt_anim);
        mAnim_txt.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                if (!interruptFlag) {
                    mTextView.setVisibility(View.GONE);
                }
            }
        });

        mAnim_img = AnimationUtils.loadAnimation(mContext,
                R.anim.bottommenu_img_anim);
    }

    public void setText(String title) {
        mTextView.setText(title);
    }

    /**
     * 放弃选择
     */
    public void unSelected() {
        interruptFlag = true;
        clearAnimation();
        mTextView.setVisibility(View.VISIBLE);
    }

    /**
     * 选中
     */
    public void selected() {
        interruptFlag = false;
        mTextView.startAnimation(mAnim_txt);
        mImageView.startAnimation(mAnim_img);
    }
}

试一试 点击下载 。
源码：

http://download.csdn.net/detail/h3c4lenovo/5992279