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

概述Android仿微信滑动切换最终实现效果：大体思路：1.主要使用两个自定义View配合实现;底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标;

AndroID仿微信滑动切换最终实现效果：

大体思路：

1. 主要使用两个自定义view配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标;
2. 底部导航栏的设置方法类似于TabLayout的关联,VIEw需要创建关联方法,用来关联VIEwPager;
3. 通过关联方法获取VIEwPager实例后,根据VIEwPager页面数创建底部导航栏的图标按钮;

代码实现:

1. 新建第一个自定义view,图标 + 文字 的底部按钮;

/**  * 自定义控件,该控件为底部导航栏中的图标  * 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);       }     }   } } 

2. 创建第二个自定义view,该VIEw为底部导航栏载体,根据 关联的VIEwPager页面 个数创建 底部导航栏图标;

/**  * 该控件为底部导航栏图标载体  * 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);   } } 

3. 添加 图标自定义类,该类封装着底部导航栏中每一个选项的的图标和文字,将该类型对象添加到集合中,用于给底部导航栏设置图标;

/**  * 底部导航栏的封装类,该类对象用于在底部导航栏添加对应图标和文字  * 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;   } } 

自定义view实现完成,在Fragment或Activity中使用该VIEw:

1. 在布局文件中添加:

<zhengyanze.com.bottomdemo.Widget.bottomVIEw     androID:ID="@+ID/bottom"     androID:layout_wIDth="match_parent"     androID:layout_height="60dp">   </zhengyanze.com.bottomdemo.Widget.bottomVIEw> 

2. 在活动或碎片中添加:

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();     }   } } 

总结：该代码耦合度较高,有些代码可能不太合理;欢迎大牛们给出合理建议;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现简单底部导航栏 Android仿微信滑动切换效果全部内容，希望文章能够帮你解决Android实现简单底部导航栏 Android仿微信滑动切换效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。