android实现底部导航栏

<RelativeLayout 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"  tools:context="${relativePackage}.${activityClass}" >   <FrameLayout  android:id="@+id/main_view"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:layout_above="@+id/main_tab"  android:layout_alignParentLeft="true"  android:layout_alignParentTop="true" >  </FrameLayout>   <view  android:id="@+id/main_tab"  android:layout_width="match_parent"  android:layout_height="50dp"  android:layout_alignParentBottom="true"  android:layout_alignParentLeft="true"  class="android.support.v4.app.FragmentTabHost" />  </RelativeLayout> 

<android.support.v4.view.FragmentTabHost > </android.support.v4.view.FragmentTabHost> 

<?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:background="#F6F6F6"  android:gravity="center"  android:orientation="vertical" >   <ImageView  android:id="@+id/foot_iv"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@drawable/home1" />   <TextView  android:id="@+id/foot_tv"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_marginTop="3dp"  android:text="首页"  android:textColor="@color/tab_color" />  </LinearLayout> 

package com.gjn.mynavigation;  import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import android.widget.ImageView; import android.widget.TabWidget; import android.widget.TextView; import android.widget.TabHost.OnTabChangeListener; import android.widget.TabHost.TabSpec;  public class MainActivity extends FragmentActivity implements OnTabChangeListener {   private FragmentTabHost mTabHost;  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  requestWindowFeature(Window.FEATURE_NO_TITLE);  setContentView(R.layout.activity_main);   //初始化FragmentTabHost  initHost();  //初始化底部导航栏  initTab();  //默认选中  mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);  }   private void initTab() {  String[] tabs = TabDb.getTabsTxt();  for (int i = 0; i < tabs.length; i++) {   //新建TabSpec   TabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()[i]);   //设置view   View view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, null);   ((TextView) view.findViewById(R.id.foot_tv)).setText(TabDb.getTabsTxt()[i]);   ((ImageView) view.findViewById(R.id.foot_iv)).setImageResource(TabDb.getTabsImg()[i]);   tabSpec.setIndicator(view);   //加入TabSpec   mTabHost.addTab(tabSpec,TabDb.getFramgent()[i],null);  }  }  /***  * 初始化Host  */  private void initHost() {  mTabHost = (FragmentTabHost) findViewById(R.id.main_tab);  //调用setup方法 设置view  mTabHost.setup(this, getSupportFragmentManager(),R.id.main_view);  //去除分割线  mTabHost.getTabWidget().setDividerDrawable(null);  //监听事件  mTabHost.setOnTabChangedListener(this);  }   @Override  public void onTabChanged(String arg0) {  //从分割线中获得多少个切换界面  TabWidget tabw = mTabHost.getTabWidget();  for (int i = 0; i < tabw.getChildCount(); i++) {   View v = tabw.getChildAt(i);   TextView tv = (TextView) v.findViewById(R.id.foot_tv);   ImageView iv = (ImageView) v.findViewById(R.id.foot_iv);   //修改当前的界面按钮颜色图片   if (i == mTabHost.getCurrentTab()) {   tv.setTextColor(getResources().getColor(R.color.tab_light_color));   iv.setImageResource(TabDb.getTabsImgLight()[i]);   }else{   tv.setTextColor(getResources().getColor(R.color.tab_color));   iv.setImageResource(TabDb.getTabsImg()[i]);   }  }  } } 

package com.gjn.mynavigation;  public class TabDb {  /***  * 获得底部所有项  */  public static String[] getTabsTxt() {  String[] tabs = {"首页","交易","地点","我的"};  return tabs;  }  /***  * 获得所有碎片  */  public static Class[] getFramgent(){  Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class};  return cls ;  }  /***  * 获得所有点击前的图片  */  public static int[] getTabsImg(){  int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1};  return img ;  }  /***  * 获得所有点击后的图片  */  public static int[] getTabsImgLight(){  int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2};  return img ;  } } 

<?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" >   <HorizontalScrollView  android:id="@+id/one_hv"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:scrollbars="none" >   <RadioGroup   android:id="@+id/one_rg"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="horizontal" >  </RadioGroup>  </HorizontalScrollView>   <view  android:id="@+id/one_view"  android:layout_width="match_parent"  android:layout_height="0dp"  android:layout_weight="1"  class="android.support.v4.view.ViewPager" />  </LinearLayout> 

<?xml version="1.0" encoding="utf-8"?> <RadioButton xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:background="@drawable/tab_rb_selector"  android:button="@null"  android:paddingBottom="10dp"  android:paddingLeft="15dp"  android:paddingRight="15dp"  android:paddingTop="10dp"  android:text="今日" > </RadioButton> 

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" >  <!-- 点击 -->  <item android:state_checked="true">  <layer-list >   <item >   <shape android:shape="rectangle">    <stroke android:width="5dp" android:color="@color/tab_light_color"/>   </shape>   </item>   <item android:bottom="5dp">   <shape android:shape="rectangle">    <solid android:color="#fff"/>   </shape>   </item>  </layer-list>  </item>  <!-- 默认 -->  <item >  <shape >   <solid android:color="#fafafa"/>  </shape>  </item> </selector> 

package com.gjn.mynavigation;  import java.util.ArrayList; import java.util.List;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.HorizontalScrollView; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.RadioGroup.LayoutParams; import android.widget.RadioGroup.OnCheckedChangeListener;  public class OneFm extends Fragment implements OnPageChangeListener {   private View view;  private RadioGroup rg_;  private ViewPager vp_;  private HorizontalScrollView hv_;  private List<Fragment> newsList = new ArrayList<Fragment>();  private OneFmAdapter adapter;   @Override  public View onCreateView(LayoutInflater inflater,  @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  if (view == null) {   //初始化view   view = inflater.inflate(R.layout.fm_one, container,false);   rg_ = (RadioGroup) view.findViewById(R.id.one_rg);   vp_ = (ViewPager) view.findViewById(R.id.one_view);   hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv);   //设置RadioGroup点击事件   rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() {    @Override   public void onCheckedChanged(RadioGroup group, int id) {    vp_.setCurrentItem(id);   }   }   //初始化顶部导航栏   initTab(inflater);   //初始化viewpager   initView();  }  /** * 底部导航栏切换后 由于没有销毁顶部设置导致如果没有重新设置view  * 导致底部切换后切回顶部页面数据会消失等bug  * 以下设置每次重新创建view即可  */  ViewGroup parent = (ViewGroup) view.getParent();  if (parent != null) {   parent.removeView(view);  }  return view;  }  /***  * 初始化viewpager  */  private void initView() {  List<HTab> hTabs = HTabDb.getSelected();  for (int i = 0; i < hTabs.size(); i++) {   OneFm1 fm1 = new OneFm1();   Bundle bundle = new Bundle();   bundle.putString("name", hTabs.get(i).getName());   fm1.setArguments(bundle);   newsList.add(fm1);  }  //设置viewpager适配器  adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);  vp_.setAdapter(adapter);  //两个viewpager切换不重新加载  vp_.setOffscreenPageLimit(2);  //设置默认  vp_.setCurrentItem(0);  //设置viewpager监听事件  vp_.setOnPageChangeListener(this);  }  /***  * 初始化头部导航栏  * @param inflater  */  private void initTab(LayoutInflater inflater) {  List<HTab> hTabs = HTabDb.getSelected();  for (int i = 0; i < hTabs.size(); i++) {   //设置头部项布局初始化数据   RadioButton rbButton = (RadioButton) inflater.inflate(R.layout.tab_rb, null);   rbButton.setId(i);   rbButton.setText(hTabs.get(i).getName());   LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,   LayoutParams.WRAP_CONTENT);   //加入RadioGroup   rg_.addView(rbButton,params);  }  //默认点击  rg_.check(0);  }  @Override  public void onPageScrollStateChanged(int arg0) {   }  @Override  public void onPageScrolled(int arg0, float arg1, int arg2) {   }  @Override  public void onPageSelected(int id) {  setTab(id);  }  /***  * 页面跳转切换头部偏移设置  * @param id  */  private void setTab(int id) {  RadioButton rbButton = (RadioButton) rg_.getChildAt(id);  //设置标题被点击  rbButton.setChecked(true);  //偏移设置  int left = rbButton.getLeft();  int width = rbButton.getMeasuredWidth();  DisplayMetrics metrics = new DisplayMetrics();  getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);  int screenWidth = metrics.widthPixels;  //移动距离= 左边的位置 + button宽度的一半 - 屏幕宽度的一半  int len = left + width / 2 - screenWidth / 2;  //移动  hv_.smoothScrollTo(len, 0);  } } 

package com.gjn.mynavigation;  /***  * 头部Tab属性  *  */ public class HTab {  private String name;   public HTab(String name) {  super();  this.setName(name);  }   public String getName() {  return name;  }   public void setName(String name) {  this.name = name;  } } 

package com.gjn.mynavigation;  import java.util.ArrayList; import java.util.List;  public class HTabDb {  private static final List<HTab> Selected = new ArrayList<HTab>();  static{  Selected.add(new HTab("今日"));  Selected.add(new HTab("头条"));  Selected.add(new HTab("娱乐"));  Selected.add(new HTab("财经"));  Selected.add(new HTab("军事"));  Selected.add(new HTab("科技"));  Selected.add(new HTab("时尚"));  Selected.add(new HTab("体育"));  }  /***  * 获得头部tab的所有项  */  public static List<HTab> getSelected() {  return Selected;  } } 

package com.gjn.mynavigation;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;  public class OneFm1 extends Fragment {   private String name;   @Override  public void setArguments(Bundle args) {  name = args.getString("name");  }   @Override  public View onCreateView(LayoutInflater inflater,  @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  View view = inflater.inflate(R.layout.fragment, container,false);  ((TextView) view.findViewById(R.id.fm_text)).setText(name);  return view;  } } 

<?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:gravity="center"  android:orientation="vertical" >   <TextView  android:id="@+id/fm_text"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="Large Text"  android:textAppearance="?android:attr/textAppearanceLarge" />  </LinearLayout>