php仿微信底部菜单,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 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 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. 在布局文件中添加:
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="60dp">
2. 在活动或碎片中添加:
public class MainActivity extends AppCompatActivity {
ArrayList mFragments;
ArrayList 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();
}
}
}
总结:该代码耦合度较高,有些代码可能不太合理;欢迎大牛们给出合理建议;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果相关推荐
- Android短视频app开发中如何实现上下滑动切换效果
在大部分短视频app开发中,都会在app内增加上下滑动切换视频的功能,即下滑切换到下一条短视频,上滑切回到上一条.这种机制可以给用户带来良好的视觉体验,云豹作为优秀的app源码供应商,在该效果的实现上 ...
- android 打造炫酷导航栏(仿UC头条)
年后开始上班甚是清闲,所以想捣鼓一些东西.在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI 的时候看到下面有一条评论说,如果导航栏能滑动就更好了. ...
- Android中实现类似探探中图片左右滑动切换效果
偶然之间发现探探的左右滑动的图片挺好玩,试着去做了下,再到后来,看到许多大神也推出了同样仿探探效果的博客,从头到尾阅读下来,写得通俗易懂,基本上没什么问题.于是,实现仿探探效果的想法再次出现在脑海中. ...
- android app实现系统导航栏设置图片起到沉浸式效果
1:在oncreate中,调用以下代码块,注:因为继承了自己封装的BaseActivity,故写在了重写方法provideBindView()中,其实和在oncreate中一样.(代码在最下面,图为展 ...
- Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言 大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fra ...
- android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果 发布时间:2020-10-09 19:48:00 来源:脚本之家 阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab ...
- 史上最完美的Android沉浸式状态导航栏攻略
前言 最近我在小破站开发一款新App,叫高能链.我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的.这次我将我踩坑,适配各机 ...
- android 窗口导航,Android全面屏虚拟导航栏适配
手机正朝着全面屏的方向演进,与此同时也给开发者带来了很多适配上的新问题,虚拟导航栏就是其中一个.最近在糗百的项目中,就有相关的适配问题,我查阅了目前关于虚拟导航栏适配的相关文章,基本上在全面屏手机里都 ...
- android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...
在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android- ...
最新文章
- 俞敏洪:创业者应该避开的10个坑
- 金鑫是著名高校计算机,金鑫 个人简历
- linux导入函数包失败,使用qsub运行shellscript时出现apos;文件意外结束apos;和apos;错误导入函数定义apos;错误 中国服务器网...
- Python用泰勒公式模拟函数
- java 8 方法引用(method references)
- PRML-系列一之1.5.5~1.5.6
- xutils使用流程
- Linux学习总结(51)——25个Linux服务器安全小贴士
- 刚刚,任正非为姚安娜商标事件道歉
- 行内元素、块级元素和行内块级元素
- 清除stoped impdp/expdp job的方法
- python -屏保
- CListCtrl使用指南
- CNN 卷积神经网络 池化层Pooling 动手学深度学习v2 pytorch
- 怎样给家庭组计算机授权,steam如何设置家庭共享?steam设置家庭共享方法
- 并发原理及php高并发解决方案
- K3 Cloud BOS设计 增加表单按钮 修改状态
- bat并行调用打包bat总结
- 【转】谷俊丽:基于大数据的深度学习
- 本地图文直接复制到dedecms编辑器中