20、Tabs底部导航栏

最新推荐文章于 2024-08-21 18:36:42 发布

weixin_33795743

最新推荐文章于 2024-08-21 18:36:42 发布

阅读量128

点赞数

文章标签：移动开发 java

原文链接：http://www.cnblogs.com/pengjingya/p/5509137.html

版权

一、Tabs基本使用

TabHost的实现有两种方式：

第一种继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。

第二种方式，不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。

1.1、继承TabActivity的方式

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 定义TabHost组件 -->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 　　
    <!-- 定义第一个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <!-- 定义两个TextView用于显示标签页中的内容 -->
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="孙悟空-2011/07/12" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="猪八戒-2011/07/10" />
    </LinearLayout>
 　　
    <!-- 定义第二个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="萨僧-2011/07/11" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="唐僧-2011/07/10" />
    </LinearLayout>
 　　
    <!-- 定义第三个标签页的内容 -->
    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="孙悟空-2011/07/12" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="萨僧-2011/07/08" />
    </LinearLayout>
</TabHost>

MainActivity.java

public class HelloTabHost extends TabActivity {
 　　@Override
　　 public void onCreate(Bundle savedInstanceState) {
 　　　　super.onCreate(savedInstanceState);
 　　　　//调用TabActivity的getTabHost()方法获取TabHost对象
 　　　　TabHost tabHost = getTabHost();
 　　　　//设置使用TabHost布局
 　　　　LayoutInflater.from(this).inflate(R.layout.main, tabHost.getTabContentView(),true);
　　　　 //添加第一个标签页
 　　　　tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("已接电话").setContent(R.id.tab01));
 　　　　//添加第二个标签页,并在其标签上添加一个图片
 　　　　tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("未接电话",getResources().getDrawable(R.drawable.icon)).setContent(R.id.tab02));
 　　　　//添加第三个标签页
 　　　　tabHost.addTab(tabHost.newTabSpec("tab03").setIndicator("已拨电话").setContent(R.id.tab03));
 　　}
　}

运行效果

1.2、不继承TabActivity的方式

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical"
    tools:context=".MainActivity" >
     <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
                <!-- 第一个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="tab1" />
                </LinearLayout>
                <!-- 第二个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="tab2" />
                </LinearLayout>
                <!-- 第三个tab的布局 -->
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="tab3" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost> 
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabHost th=(TabHost)findViewById(R.id.tabhost);
        th.setup();            //初始化TabHost容器
        //在TabHost创建标签，然后设置：标题／图标／标签页布局
        th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));
        th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));
        th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));    
       //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标 
    }
}

1.3、Tab的内容分开，不继承TabActivity

1.第一个tab的布局文件:tab1.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/LinearLayout01" 
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
       <TextView 
            android:text="我是标签1的内容喔"
            android:id="@+id/TextView01" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
       </TextView>
 </LinearLayout>

2.第二个tab的布局文件:tab2.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/LinearLayout02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView android:text="标签2"
                  android:id="@+id/TextView01" 
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content" />
</LinearLayout>

3.主布局文件,activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <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" >
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" > 
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

4.MainActivity.java

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TabHost m = (TabHost)findViewById(R.id.tabhost);
        m.setup();
        LayoutInflater i=LayoutInflater.from(this);
        i.inflate(R.layout.tab1, m.getTabContentView());
        i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML，而不需要Activity
        m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));  
        m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02)); 
    }
}

二、Tabs底部导航

a）activity_main布局文件

布局文件请参看附件demo1

b)MainActivity实现

public class MainActivity extends TabActivity {
    private TabHost mTabHost;
    private ImageView mImgA;
    private ImageView mImgB;
    private ImageView mImgC;
    private ImageView mImgD;   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        mTabHost = getTabHost();
        mTabHost.addTab(mTabHost.newTabSpec("a").setIndicator("A").setContent(new Intent(this, ActivityA.class)));
        mTabHost.addTab(mTabHost.newTabSpec("b").setIndicator("B").setContent(new Intent(this, ActivityB.class)));
        mTabHost.addTab(mTabHost.newTabSpec("c").setIndicator("C").setContent(new Intent(this, ActivityC.class)));
        mTabHost.addTab(mTabHost.newTabSpec("d").setIndicator("D").setContent(new Intent(this, ActivityD.class)));
        mImgA = (ImageView) findViewById(R.id.img_a);
        mImgB = (ImageView) findViewById(R.id.img_b);
        mImgC = (ImageView) findViewById(R.id.img_c);
        mImgD = (ImageView) findViewById(R.id.img_d);
    }
    
    public void onTabClicked(View view){
        switch (view.getId()) {
        case R.id.rl_a:
            mImgA.setImageResource(R.drawable.img_a_press);
            mImgB.setImageResource(R.drawable.img_b);
            mImgC.setImageResource(R.drawable.img_c);
            mImgD.setImageResource(R.drawable.img_b);
            mTabHost.setCurrentTabByTag("a");
            break;
        case R.id.rl_b:
            mImgB.setImageResource(R.drawable.img_b_press);
            mImgA.setImageResource(R.drawable.img_a);
            mImgC.setImageResource(R.drawable.img_c);
            mImgD.setImageResource(R.drawable.img_b);
            mTabHost.setCurrentTabByTag("b");
            break;
        case R.id.rl_c:
            mImgC.setImageResource(R.drawable.img_c_press);
            mImgA.setImageResource(R.drawable.img_a);
            mImgB.setImageResource(R.drawable.img_b);
            mImgD.setImageResource(R.drawable.img_b);
            mTabHost.setCurrentTabByTag("c");
            break;
        case R.id.rl_d:
            mImgD.setImageResource(R.drawable.img_b_press);
            mImgA.setImageResource(R.drawable.img_a);
            mImgB.setImageResource(R.drawable.img_b);
            mImgC.setImageResource(R.drawable.img_c);
            mTabHost.setCurrentTabByTag("d");
            break;
        }
    }
}

1.1、Fragment实现底部导航

a) activity_main

布局文件请参看demo2。

b) 布局中用到的状态选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img_a_press" android:state_selected="true"/>
    <item android:drawable="@drawable/img_a"/>
</selector>

c) fragment示例

public class FragmentA extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a, container,false);
        return view;
    }
}

d) MainActivity的实现

public class MainActivity extends FragmentActivity {
    private Fragment[] mFragments;
    private ImageView[] mImgeViews;
    private TextView[] mTextViews;
    private int mIndex;
    private int mCurrentTabIndex;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        FragmentA fragmentA = new FragmentA();
        FragmentB fragmentB = new FragmentB();
        FragmentC fragmentC = new FragmentC();
        FragmentD fragmentD = new FragmentD();
        mFragments = new Fragment[] { fragmentA, fragmentB,fragmentC, fragmentD };
        mImgeViews = new ImageView[4];
        mImgeViews[0] = (ImageView) findViewById(R.id.iv_a);
        mImgeViews[1] = (ImageView) findViewById(R.id.iv_b);
        mImgeViews[2] = (ImageView) findViewById(R.id.iv_c);
        mImgeViews[3] = (ImageView) findViewById(R.id.iv_d);
        mImgeViews[0].setSelected(true);
        
        mTextViews = new TextView[4];
        mTextViews[0] = (TextView) findViewById(R.id.tv_a);
        mTextViews[1] = (TextView) findViewById(R.id.tv_b);
        mTextViews[2] = (TextView) findViewById(R.id.tv_c);
        mTextViews[3] = (TextView) findViewById(R.id.tv_d);
        mTextViews[0].setTextColor(0xFF45C01A);
        
        FragmentTransaction beginTransaction = getSupportFragmentManager().beginTransaction();
        beginTransaction.replace(R.id.container, mFragments[0]).addToBackStack(null);
        beginTransaction.commit();
    }
    
    public void onTabClicked(View view) {
        switch (view.getId()) {
        case R.id.rl_a:    
            mIndex = 0;
            break;
        case R.id.rl_b:    
            mIndex = 1;
            break;
        case R.id.rl_c:        
            mIndex = 2;
            break;
        case R.id.rl_d:    
            mIndex = 3;
            break;
        }
        
        FragmentTransaction trx = getSupportFragmentManager().beginTransaction();
        trx.replace(R.id.container, mFragments[mIndex]).addToBackStack(null);
        trx.commit();
        
        mImgeViews[mCurrentTabIndex].setSelected(false);
        mImgeViews[mIndex].setSelected(true);
        mTextViews[mCurrentTabIndex].setTextColor(0xFF999999);
        mTextViews[mIndex].setTextColor(0xFF45C01A);
        mCurrentTabIndex = mIndex;
    }
}

1.2、Fragment + ViewPager

a) activity_main

布局文件请参看demo3。

b)布局文件中的状态选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img_a_press" android:state_selected="true"/>
    <item android:drawable="@drawable/img_a"/>
</selector>

c) 使用到的fragment类

public class FragmentA extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a, container,false);
        return view;
    }
}

d) MainActivity中的实现

public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
    private int mIndex;
    private ViewPager mViewPager;
    private MyFragmentPagerAdapter mAdapter;
    private ImageView mImgeA;
    private ImageView mImgeB;
    private ImageView mImgeC;
    private ImageView mImgeD;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        initView();
    }
    private void initView() {
        mImgeA = (ImageView) findViewById(R.id.iv_a);
        mImgeB = (ImageView) findViewById(R.id.iv_b);
        mImgeC = (ImageView) findViewById(R.id.iv_c);
        mImgeD = (ImageView) findViewById(R.id.iv_d);
        
        TextView mTvA = (TextView) findViewById(R.id.tv_a);
        TextView mTvB = (TextView) findViewById(R.id.tv_b);
        TextView mTvC = (TextView) findViewById(R.id.tv_c);
        TextView mTvD = (TextView) findViewById(R.id.tv_d);
        
        mViewPager = (ViewPager) findViewById(R.id.vpager);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mImgeA.setSelected(true);
        mViewPager.setOnPageChangeListener(this);
    }
    
    public void onTabClicked(View view) {
        switch (view.getId()) {
        case R.id.rl_a:    
            mIndex = 0;
            mImgeA.setSelected(true);
            break;
        case R.id.rl_b:    
            mIndex = 1;
            mImgeB.setSelected(true);
            break;
        case R.id.rl_c:        
            mIndex = 2;
            mImgeC.setSelected(true);
            break;
        case R.id.rl_d:    
            mIndex = 3;
            mImgeD.setSelected(true);
            break;
        }
        updateSelect(mIndex);
        mViewPager.setCurrentItem(mIndex);
    }
    
    public void updateSelect(int index){
        if(index == 0){
            mImgeA.setSelected(true);
            mImgeB.setSelected(false);
            mImgeC.setSelected(false);
            mImgeD.setSelected(false);
        }else if (index == 1) {
            mImgeA.setSelected(false);
            mImgeB.setSelected(true);
            mImgeC.setSelected(false);
            mImgeD.setSelected(false);
        }else if (index == 2) {
            mImgeA.setSelected(false);
            mImgeB.setSelected(false);
            mImgeC.setSelected(true);
            mImgeD.setSelected(false);
        }else if (index == 3) {
            mImgeA.setSelected(false);
            mImgeB.setSelected(false);
            mImgeC.setSelected(false);
            mImgeD.setSelected(true);
        }
    }
    
    /**ViewPager监听的方法*/
    @Override
    public void onPageScrollStateChanged(int arg0) {
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }
    @Override
    public void onPageSelected(int index) {
        updateSelect(index);
    }
}

e) 使用到的FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private FragmentA fragmentA;
    private FragmentB fragmentB;
    private FragmentC fragmentC;
    private FragmentD fragmentD;
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        fragmentA = new FragmentA();
        fragmentB = new FragmentB();
        fragmentC = new FragmentC();
        fragmentD = new FragmentD();
    }
    @Override
    public int getCount() {
        return 4;
    }
    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
        case 0:
            fragment = fragmentA;
            break;
        case 1:
            fragment = fragmentB;
            break;
        case 2:
            fragment = fragmentC;
            break;
        case 3:
            fragment = fragmentD;
            break;
        }
        return fragment;
    }
}

源码地址：

链接：http://pan.baidu.com/s/1slCEUG9 密码：nitz

转载于:https://www.cnblogs.com/pengjingya/p/5509137.html

weixin_33795743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20、Tabs底部导航栏

一、Tabs基本使用TabHost的实现有两种方式：第一种继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。第二种方式，不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@a...
复制链接

扫一扫