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

软件编程 Android 分类:[default] 更新日期: 2016-09-23
这篇文章主要为大家详细介绍了Android实现简单底部导航栏,Android仿微信滑动切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Android仿微信滑动切换最终实现效果:

Android实现简单底部导航栏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: 
    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(); 
    } 
  } 
} 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • BootStrap使用popover插件实现鼠标经过显示并保持显示框
    BootStrap使用popover插件实现鼠标经过显示并保持显示框
    这篇文章主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: < ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • jsp输出九九乘法表的简单实例
    jsp输出九九乘法表的简单实例
    下面小编就为大家带来一篇jsp输出九九乘法表的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st += j+"x&q ...
  • 简单谈谈GET和POST有什么区别
    本文给大家总结了下get与post的具体区别,以及网上的那么多答案为什么都是错误的,非常的实用,这里推荐给大家如果有人问你,GET和POST,有什么区别?你会如何回答? 真实案例      前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用.     这个答案好像并不是他想要的.于是他继续追问有没有别的区别?我说这就是 ...
  • gVim,gVimEasy,gVimRead-only的简单区别
    今天打算好好学习一下python,买了一本书看了介绍无语了,gVim, gVim Diff, gVim Easy, gVim Read-only 的简单区别,需要的朋友可以参考下我在Window XP中安装了Gvim7.2,然后桌面上出现了三个快捷方式,gvim72.exe,gvim read-only,gvim easy,大家谁比较熟悉介绍一下啊,谢谢了! ...
  • CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    本文主要分享一个利用CSS3新特性transform,实现3D翻牌的特效,有需要的小伙伴可以参考下.今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望可以跳转),a中包含两个div ...
猜你喜欢