牙叔教程简单易懂
某东的导航栏效果
实现思路
一个可以滚动的容器里面,装一些子控件,点击后,移动令其居中,且文字加粗
UI元素
horizontal横向滚动控件
text文字控件
View底部的红色动画
数据
一个普通的字符串数组
letcategories=["推荐","运动","电脑办公","个护清洁","酒水饮料","家居生活","日用百货","美妆护肤","母婴玩具","食品","厨具","家电","数码","母婴童装","男装","美妆","女装","图书","数码","男鞋","宠物","工业品","奢侈品","生活旅行",];
界面
"ui";ui.layout(verticalhorizontalid="container"/horizontal/vertical);
我又考虑了一下,这里是不是应该用recyclerview
来试一下rv
ui.layout(verticalandroidx.recyclerview.widget.RecyclerViewid="rv"/androidx.recyclerview.widget.RecyclerView;/vertical);
设置布局管理器并且绑定数据
letrv=ui.rv;letlayoutManager=newLinearLayoutManager(context);layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//设置recyclerview布局方式为横向布局rv.setLayoutManager(layoutManager);letrecycleAdapter=createRecyclerViewAdapter(categories);rv.setAdapter(recycleAdapter);
可以正常滚动
为什么间距不一样?
间距不一样的recyclerview条目布局代码
letitemLayout=(framew="wrap_content"margin="8"h="80dp"bg="#b1d5c8"textid="name"textSize="24sp"margin="0"padding="0"textColor="#5ea"gravity="center"/text/frame);
只有父控件是w="wrap_content",我们给子控件也加上,这个间距问题就解决了
letitemLayout=(framew="wrap_content"margin="8"h="80dp"bg="#b1d5c8"textid="name"w="wrap_content"textSize="24sp"margin="0"padding="0"textColor="#5ea"gravity="center"/text/frame);
添加点击事件,点击后文字居中
除了头尾的文字不居中,中间的大部分文字都要居中
我们是先点击子控件,然后把子控件居中,那么既然响应了点击事件,那么子控件一定是可见的;
首先我们判断他在中间的左侧,还是右侧,
然后往左移动或者往右移动一段距离,使其居中,
首先以右侧为例,我们一开始就点击右侧的文字,
那么应该向左移动的距离怎么计算?
如下图,我们把右侧的D控件,移动到中间,这段距离怎么计算?
首先,D可见,不代表D显示完全,他可能只显示了一半,或者一少半,
但是如果要居中,我们必须知道D的宽度,
D在居中的时候,left的值=(recycerview的宽度/2)-(D宽度/2)
要移动的距离=D在右侧的left值-D居中的left值
那么我们需要知道的几个数值是:
D的宽度view.getMeasuredWidth();
rv的宽度rv.getWidth()
右侧D的leftview.getLeft()
我们来执行以下上面的方法,看能不能获取正确的数值
letleft=view.getLeft();log("left="+left);//left=letwidth=view.getWidth();log("width="+width);//width=log("view.width="+view.width);//view.width=letmeasuredWidth=view.getMeasuredWidth();log("measuredWidth="+measuredWidth);//measuredWidth=log("ui.rv.width="+ui.rv.width);//ui.rv.width=
经过测试,宽度获取是正确的
接下来计算距离,接着移动
letcenterViewLeft=(ui.rv.width-view.width)/2;log("centerViewLeft="+centerViewLeft);letmoveDistance=view.getLeft()-centerViewLeft;log("moveDistance="+moveDistance);rv.smoothScrollBy(moveDistance,0);
实现了居中
上面实现了点击右侧控件居中,同理实现左侧居中
判断在左侧还是右侧
通过判断控件的中心点,在rv中心点的左侧还是右侧
letisLeft=view.getLeft()+view.width/2=rv.width/2?true:false;
这个isLeft命名怎么样?有没有更好的名字?
滚动居中实现了,动画有时间再加
环境
手机：小米11proMIUI:13.0.12Android版本:12Autojs版本:9.2.6
名人名言
思路是最重要的,其他的百度,bing,stackoverflow,github,安卓文档,autojs文档,最后才是群里问问---牙叔教程
声明
部分内容来自网络本教程仅用于学习,禁止用于其他用途