[置顶] TabHost ~ 仿微信底部菜单

简介

Container for a tabbed window view. This object holds two children: a set of tab labels that the
user clicks to select a specific tab, and a FrameLayout object that displays the contents of that
page. The individual elements are typically controlled using this container object, rather than
setting values on the child elements themselves.
TabHost ，标签视图的容器。容器包含两个孩子节点，一个用来存放一系列的标签，点击来选择对应的窗口；一个是FrameLayout用来存放页面具体内容。这些独立的元素通常用TabHost来控制，而不是在视图内部通过设置值来实现

类结构

方法	意义
addTab	添加一个tab
clearAllTabs	移除所有的tab
dispatchKeyEvent	下发keyevent
dispatchWindowFocusChanged	下发windowsfocusChanged事件
newTabSpec	创建一个新的TabSpec，关联到具体内容
onTouchModeChanged	NA
setup（）	不和TabActivity关联，通过findViewById获取的TabHost需要调用setup(),如果是在TabActivity中通过getTabHost()的方式获取的不需要调用这个方法
setup(LocalActivityManager activityGroup)	setContent中传入intent的时候才关注下这个方法
getCurrentTab()/setCurrentTab()	获取/设置当前需要显示的tab，通过index
setCurrentTabByTag/getCurrentTabTag	通过tag设置当前需要显示的Tab,tag就是创建TabSpec的时候传入的字符串
getCurrentTabView	设置/获取当前在TabWidget中显示的View,也就是作为标签的View而非内容
getCurrentView	获取当前显示的内容
setOnTabChangedListener	设置标签页切换事件监听
getTabContentView	获取内容页面的容器FrameLayout
getTabWidget	获取TabWidget

基本使用

1. 布局文件(content_fragment.xml)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">    <android.support.v7.widget.Toolbar  android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorTopBackGround"></android.support.v7.widget.Toolbar>    <TabHost  android:id="@+id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent">        <LinearLayout  android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">            <!-- 设置的id必须是 "@android:id/tabcontent"-->            <FrameLayout  android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="9">                <TextView  android:id="@+id/tv_one" android:layout_width="match_parent" android:layout_height="match_parent" android:text="This is one" android:textColor="@color/colorAccent" android:textSize="20sp" />                <TextView  android:id="@+id/tv_two" android:layout_width="match_parent" android:layout_height="match_parent" android:text="This is two" android:textColor="@color/colorPrimary" android:textSize="25sp" />                <TextView  android:id="@+id/tv_three" android:layout_width="match_parent" android:layout_height="match_parent" android:text="This is three" android:textColor="@color/colorPrimaryDark" android:textSize="30sp" />                <TextView  android:id="@+id/tv_four" android:layout_width="match_parent" android:layout_height="match_parent" android:text="This is Four" android:textColor="@color/colorBlack" android:textSize="35sp" />            </FrameLayout>            <!-- 设置的id必须是android:id="@android:id/tabs" -->            <TabWidget  android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/colorWhite" android:padding="5dp" android:showDividers="none"></TabWidget>        </LinearLayout>    </TabHost></LinearLayout>

2. 自定义底部标签布局(myindicator.xml)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">    <ImageView  android:id="@+id/iv_indicator" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="5"></ImageView>    <TextView  android:id="@+id/tv_indicator" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2.5" android:gravity="center" android:textSize="5pt" /></LinearLayout>

底部一个图标下面一段文字
3. 代码使用(MainActivity.java)，不使用TabActivity

public class MainActivity extends AppCompatActivity {    float initx = 0.0f, currentx = 0.0f;    TabHost tabHost = null;    Toolbar toolbar = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.content_fragment);        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);//设置ActionBar        toolbar.setTitleTextColor(getResources().getColor(R.color.colorWhite));//设置背景色        tabHost = (TabHost) findViewById(R.id.tabhost);        tabHost.setup();//初始化TabHost        /*添加tab*/        for (int i = 0; i < 4; i++) {            View view = LayoutInflater.from(this).inflate(R.layout.myindicator, null, false);            TextView textView = (TextView) view.findViewById(R.id.tv_indicator);            ImageView imageView = (ImageView) view.findViewById(R.id.iv_indicator);            switch (i) {                case 0:                    textView.setText("微信");                    imageView.setImageResource(R.drawable.weixin);                    tabHost.addTab(tabHost.newTabSpec("1").setIndicator(view).setContent(R.id.tv_one));                    break;                case 1:                    textView.setText("通讯录");                    imageView.setImageResource(R.drawable.contact);                    tabHost.addTab(tabHost.newTabSpec("2").setIndicator(view).setContent(R.id.tv_two));                    break;                case 2:                    textView.setText("发现");                    imageView.setImageResource(R.drawable.find);                    tabHost.addTab(tabHost.newTabSpec("3").setIndicator(view).setContent(R.id.tv_three));                    break;                case 3:                    textView.setText("我");                    imageView.setImageResource(R.drawable.profile);                    tabHost.addTab(tabHost.newTabSpec("4").setIndicator(view).setContent(R.id.tv_four));                    break;            }        }        /*设置标签切换监听器*/        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {            @Override            public void onTabChanged(String tabId) {                for (int i = 0; i < 4; i++) {//颜色全部重置                    ((TextView) tabHost.getTabWidget().getChildTabViewAt(i).findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorBlack));                }                if (tabHost.getCurrentTabTag() == tabId) {                    ((TextView) tabHost.getCurrentTabView().findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorSelected));                }//选中的那个Tab文字颜色修改            }        });        ((TextView) tabHost.getCurrentTabView().findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorSelected));//第一次进入的时候讲选中的Tab修改文字颜色    }    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                initx = event.getX();                break;            case MotionEvent.ACTION_MOVE:                currentx = event.getX();                break;            case MotionEvent.ACTION_UP:                /*左右滑动事件处理*/                  if ((currentx - initx) > 25) {                    if (tabHost.getCurrentTab() != 0) {                      tabHost.setCurrentTab(tabHost.getCurrentTab() - 1);                    }                } else if ((currentx - initx) < -25) {                    if (tabHost.getCurrentTab() != tabHost.getTabContentView().getChildCount()) {                        tabHost.setCurrentTab(tabHost.getCurrentTab() + 1);                    }                }                break;        }        return true;    }   /*菜单创建*/    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar, menu);        return true;    }}

4. 代码使用(MainActivity.java)，继承TabActivity
TabActivity已经被废弃很久了，但是还是可以使用，在布局中将TabHost的id改成android:id=”@android:id/tabhost”，然后在继承了TabActivity的MainActivity.java中使用
tabHost = getTabHost();
然后基本使用方法就和上面一样了

实际效果

写在最后

TabHost在TabActivity中的使用现在开发过程中使用的不多，推荐使用ViewPager和Fragment的方式

个人微信公众号，欢迎大家扫码关注，Android技术交流或者咨询。

简介

类结构

基本使用

实际效果

写在最后

更多相关文章

随机推荐