Android实现简单底部导航栏 Android仿微信滑动切换效果

/**  * 自定义控件,该控件为底部导航栏中的图标  * Created by MrZheng on 2017/8/2.  */  public class TabView extends LinearLayout {  BotBean mBean;  private TextView title;  private ImageView iconImage;    /**   * 引用此控件,只能通过new 方法;接收一个TabView   * @param context   */  public TabView(Context context, BotBean bean) {   super(context);   this.mBean = bean;   initView();  }   /**   * 初始化布局   */  public void initView() {   setOrientation(VERTICAL);   setGravity(Gravity.CENTER);    //添加小图标   iconImage = new ImageView(getContext());   LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT     , ViewGroup.LayoutParams.WRAP_CONTENT);   iconImage.setLayoutParams(layoutParams);   iconImage.setImageResource(mBean.getUncheckedId());    Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId());   Drawable wrapDrawable = DrawableCompat.wrap(drawable);   DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.BLACK));   iconImage.setImageDrawable(wrapDrawable);    addView(iconImage);    //标题   title = new TextView(getContext());   LinearLayout.LayoutParams titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,     LayoutParams.WRAP_CONTENT);   title.setLayoutParams(titleParams);   title.setText(mBean.getContent());   addView(title);  }   //判断选择状态,改变图标  //供外部调用  public void setSelected(boolean isSelected) {   if (mBean == null) {    return;   }   if (isSelected) {    if (iconImage != null) {     //使用颜色过滤器,改变选中时的颜色     Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId());     Drawable wrapDrawable = DrawableCompat.wrap(drawable);     DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.GREEN));     iconImage.setImageDrawable(wrapDrawable);      title.setTextColor(Color.GREEN);    }   } else {    if (title != null) { //    iconImage.setImageResource(mBean.getUncheckedId());     Drawable drawable = getContext().getResources().getDrawable(mBean.getUncheckedId());     Drawable wrapDrawable = DrawableCompat.wrap(drawable);     DrawableCompat.setTintList(wrapDrawable, ColorStateList.valueOf(Color.BLACK));     iconImage.setImageDrawable(wrapDrawable);      title.setTextColor(Color.GRAY);    }   }  } } 

/**  * 该控件为底部导航栏图标载体  * Created by MrZheng on 2017/8/2.  */  public class bottomView extends LinearLayout {   private ViewPager vp;  BottomPageChangeListener mBottomPageChangeListener;    public bottomView(Context context) {   super(context);  }  public bottomView(Context context, @Nullable AttributeSet attrs) {   super(context, attrs);  }  public bottomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {   super(context, attrs, defStyleAttr);  }   /**   * 同TabLayout用法相似,需要与ViewPager进行绑定   */  public void setViewPager(ViewPager viewPager, ArrayList<BotBean> botBeen,BottomPageChangeListener bottomPageChangeListener) {   if (viewPager == null) {    return;   }   vp = viewPager;   mBottomPageChangeListener = bottomPageChangeListener;   initTabView(botBeen);    //设置ViewPager的点击事件   vp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){    @Override    public void onPageSelected(int position) {     for (int i = 0; i < getChildCount(); i++) {      getChildAt(i).setSelected((position == i ? true : false));     }     if (mBottomPageChangeListener != null) {      mBottomPageChangeListener.onPageChangeListener(position);     }    }   });  }   /**   * 初始化底部导航栏,ViewPager有多少页,就创建多少个图标   */  public void initTabView(ArrayList<BotBean> botBeen) {   setGravity(HORIZONTAL);   for (int i = 0; i < botBeen.size(); i++) {    BotBean bean = botBeen.get(i);    TabView tabView = new TabView(getContext(), bean);    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT      , ViewGroup.LayoutParams.WRAP_CONTENT);    params.weight = 1;    params.gravity = Gravity.CENTER;    tabView.setLayoutParams(params);     //为每个view设置点击事件,点击跳转过去    final int finalI = i;    tabView.setOnClickListener(new OnClickListener() {     @Override     public void onClick(View view) {      vp.setCurrentItem(finalI);     }    });    //设置一开始选中状态    if (i == 0) {     tabView.setSelected(true);     //由于初始化时,onPageSelected()选中方法并没有的到执行,所以主动去调用回调方法     if (mBottomPageChangeListener != null) {      mBottomPageChangeListener.onPageChangeListener(i);     }    }    addView(tabView);   }  }    /**   * 提供接口回调方法,每次滑动都通知外界   */  public interface BottomPageChangeListener{   void onPageChangeListener(int position);  } } 

/**  * 底部导航栏的封装类,该类对象用于在底部导航栏添加对应图标和文字  * Created by MrZheng on 2017/8/2.  */  public class BotBean {  String content;//图标名字  int uncheckedId;//未选中时的图标   public BotBean(String content, int uncheckedId) {   this.content = content;   this.uncheckedId = uncheckedId;  }   public String getContent() {   return content;  }   public void setContent(String content) {   this.content = content;  }   public int getUncheckedId() {   return uncheckedId;  }   public void setUncheckedId(int uncheckedId) {   this.uncheckedId = uncheckedId;  } } 

<zhengyanze.com.bottomdemo.widget.bottomView   android:id="@+id/bottom"   android:layout_width="match_parent"   android:layout_height="60dp">  </zhengyanze.com.bottomdemo.widget.bottomView> 

public class MainActivity extends AppCompatActivity {  ArrayList<Fragment> mFragments;  ArrayList<BotBean> mItemIcon;//存放底部图标和文字  private TextView tv;   @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.activity_main);   mFragments = new ArrayList<>();   mItemIcon = new ArrayList<>();    mFragments.add(new TextFragment());   mFragments.add(new TextFragment());   mFragments.add(new TextFragment());   mFragments.add(new TextFragment());   mItemIcon.add(new BotBean("首页", R.mipmap.ic_home2));   mItemIcon.add(new BotBean("通讯录", R.mipmap.ic_study2));   mItemIcon.add(new BotBean("发现", R.mipmap.ic_found2));   mItemIcon.add(new BotBean("我的", R.mipmap.ic_me2));    ViewPager vp = (ViewPager) findViewById(R.id.vp);   vp.setAdapter(new FAdapter(getSupportFragmentManager()));    tv = (TextView) findViewById(R.id.tv);    bottomView bottom = (bottomView) findViewById(R.id.bottom);   bottom.setViewPager(vp, mItemIcon, new bottomView.BottomPageChangeListener() {    @Override    public void onPageChangeListener(int position) {     //滑动后的回调     tv.setText(mItemIcon.get(position).getContent());    }   });  }   /**   * 适配器   */  class FAdapter extends FragmentPagerAdapter {   public FAdapter(FragmentManager fm) {    super(fm);   }    @Override   public Fragment getItem(int position) {    return mFragments.get(position);   }   @Override   public int getCount() {    return mFragments.size();   }  } }