刚开始要实现这个功能时,我去谷歌搜了一下,谷歌的建议是不要模仿其他的平台底部导航栏的实现,而是推荐ActionBar来实现顶端导航栏的实现,但是既然很多App都是通过实现底部导航栏来引导用户,所以我搜了这个底部导航栏功能的实现,发现网上也有很多种版本,本人参考了http://www.cnblogs.com/xiaofeixiang/p/4156732.html博客,研究了其前辈的写实现,下面是自己对前辈的实现代码做一些了简化和更改。
代码:
values/activity_main_bottom_tab_rbstyle.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="activity_main_bottom_tab_rbstyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:background">@drawable/activity_main_bottom_tab_bgstate</item>
<item name="android:button">@null</item>
<item name="android:gravity">center_horizontal|bottom</item>
<item name="android:paddingTop">2dp</item>
<item name="android:textColor">@color/activity_main_bottom_tab_tvstate</item>
<item name="android:onClick">onClick</item>
</style>
</resources>
drawable/activity_main_bottom_tab_bgstate.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/navigation_bar_tab_normal" android:state_checked="false"/>
<item android:drawable="@drawable/navigation_bar_tab_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/navigation_bar_tab_selected" android:state_checked="true"/>
</selector>
layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/title_bar_textView"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="20sp"
android:text="@string/activity_main_bottom_tab_home"
android:background="@color/material_blue_grey_800"
android:layout_width="match_parent"
android:layout_height="45dp" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
<RadioGroup
android:id="@+id/bottom_tab_radiogroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:orientation="horizontal">
<RadioButton
android:id="@+id/bottom_tab_home"
android:checked="true"
style="@style/activity_main_bottom_tab_rbstyle"
android:drawableTop="@drawable/tab_home"
android:text="@string/activity_main_bottom_tab_home"/>
<RadioButton
android:id="@+id/bottom_tab_letter"
style="@style/activity_main_bottom_tab_rbstyle"
android:drawableTop="@drawable/tab_letter"
android:text="@string/activity_main_bottom_tab_letter"/>
<RadioButton
android:id="@+id/bottom_tab_reference"
style="@style/activity_main_bottom_tab_rbstyle"
android:drawableTop="@drawable/tab_reference"
android:text="@string/activity_main_bottom_tab_reference"/>
<RadioButton
android:id="@+id/bottom_tab_setting"
style="@style/activity_main_bottom_tab_rbstyle"
android:drawableTop="@drawable/tab_setting"
android:text="@string/activity_main_bottom_tab_setting"/>
</RadioGroup>
</LinearLayout>
com.scau.beyondboy.weibo.MainActivity
/**
* Author:beyondboy
* Gmail:xuguoli.scau@gmail.com
* Date: 2015-05-30
* Time: 11:15
*/
package com.scau.beyondboy.weibo;
import android.os.Environment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends ActionBarActivity
{
private static final String TAG =MainActivity.class.getName();
/**分别装载ViewPager主页,消息,搜索,我四个Fragment*/
private static List<Fragment> sFragments=new ArrayList<Fragment>(4);
/**标题栏的字符标题的ID*/
private static final int[] STITLE_IDS =new int[]
{R.string.activity_main_bottom_tab_home,
R.string.activity_main_bottom_tab_letter,
R.string.activity_main_bottom_tab_reference,
R.string.activity_main_bottom_tab_setting};
private RadioGroup mBottomTabRadioGroup;
private ViewPager mViewPager;
private TextView mtitleTextView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager)findViewById(R.id.viewpager);
mtitleTextView=(TextView)findViewById(R.id.title_bar_textView);
mBottomTabRadioGroup=(RadioGroup)findViewById(R.id.bottom_tab_radiogroup);
sFragments.add(new Fragment());
sFragments.add(new Fragment());
sFragments.add(new Fragment());
sFragments.add(new Fragment());
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
{
@Override
public Fragment getItem(int position)
{
return sFragments.get(position);
}
@Override
public int getCount()
{
return sFragments.size();
}
});
/**监听页面的滑动,以改变标题栏的标题*/
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
}
@Override
public void onPageSelected(int position)
{
mtitleTextView.setText(STITLE_IDS[position]);
((RadioButton)mBottomTabRadioGroup.getChildAt(position)).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state)
{
}
});
// HttpClientUtils.postText(this,"hafhla");
}
/**
* 监听底部导航栏那个选项被点击,以改变标题栏的标题
*/
public void onClick(View view)
{
int id=mBottomTabRadioGroup.indexOfChild(view);
mtitleTextView.setText(STITLE_IDS[id]);
}
}
运行结果: