Android实现类似网易新闻选项卡动态滑动效果
程序员文章站
2024-02-28 09:16:52
本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。
首先来看看布局,就是用horizontalscr...
本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。
首先来看看布局,就是用horizontalscrollview控件来实现滑动的效果,里面包含了一个布局。
接下来我们在oncreat方法中加载布局和构建我们需要显示的数据
<code class="hljs avrasm"> @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_tabbar); tv_tabname= (textview) this.findviewbyid(r.id.tv_tabname); titlelist = new arraylist<string>(); titlelist.add("推荐"); titlelist.add("热点"); titlelist.add("北京"); titlelist.add("体育"); titlelist.add("娱乐"); titlelist.add("足球"); titlelist.add("巴萨"); titlelist.add("汽车"); }</string></code>
加载布局,用radiogroup动态的加载多个自定义的radiobutton
<code class="hljs avrasm">hs_activity_tabbar= (horizontalscrollview) this.findviewbyid(r.id.hs_activity_tabbar); ll_activity_tabbar_content= (linearlayout) this.findviewbyid(r.id.ll_activity_tabbar_content); //选项卡布局 myradiogroup = new radiogroup(this); myradiogroup.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent)); myradiogroup.setorientation(linearlayout.horizontal); ll_activity_tabbar_content.addview(myradiogroup); for (int i = 0; i < titlelist.size(); i++) { string channel = titlelist.get(i); radiobutton radio = new radiobutton(this); radio.setbuttondrawable(android.r.color.transparent); radio.setbackgroundresource(r.drawable.radiobtn_selector); colorstatelist csl = getresources().getcolorstatelist(r.color.radiobtn_text_color); radio.settextcolor(csl); linearlayout.layoutparams l = new linearlayout.layoutparams((int) sizehelper.dp2px(this, 80), viewgroup.layoutparams.match_parent, gravity.center); radio.setlayoutparams(l); radio.settextsize(15); radio.setgravity(gravity.center); radio.settext(channel); radio.settag(channel); myradiogroup.addview(radio); }</code>
最后也就点击选项卡的时候会有一个动态滑动的效果,其实就是利用horizontalscrollview的smoothscrollto方法来实现的
<code class="hljs cs"> myradiogroup.setoncheckedchangelistener(new radiogroup.oncheckedchangelistener() { @override public void oncheckedchanged(radiogroup group, int checkedid) { int radiobuttonid = group.getcheckedradiobuttonid(); //根据id获取radiobutton的实例 radiobutton rb = (radiobutton) findviewbyid(radiobuttonid); channel = (string) rb.gettag(); mcurrentcheckedradioleft = rb.getleft();//更新当前按钮距离左边的距离 int width=(int) sizehelper.dp2px(tabbaractivity.this, 140); hs_activity_tabbar.smoothscrollto((int) mcurrentcheckedradioleft - width, 0); tv_tabname.settext(channel); } }); //设定默认被选中的选项卡为第一项 if (!titlelist.isempty()) { myradiogroup.check(myradiogroup.getchildat(0).getid()); }</code>
dp2px方法如下用来将dp转换为px:
<code class="hljs java"> public static float dp2px(context context, float dp) { final float scale = context.getresources().getdisplaymetrics().density; return (dp * scale); }</code>
全部代码为:
<code class="hljs avrasm">package com.example.liuwangshu.myslidetabbar; import android.content.res.colorstatelist; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.gravity; import android.view.viewgroup; import android.widget.horizontalscrollview; import android.widget.linearlayout; import android.widget.radiobutton; import android.widget.radiogroup; import android.widget.textview; import java.util.arraylist; import java.util.list; public class tabbaractivity extends appcompatactivity { private horizontalscrollview hs_activity_tabbar; private radiogroup myradiogroup; private list<string> titlelist; private linearlayout ll_activity_tabbar_content; private float mcurrentcheckedradioleft;//当前被选中的radiobutton距离左侧的距离 private string channel; private textview tv_tabname; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_tabbar); tv_tabname= (textview) this.findviewbyid(r.id.tv_tabname); titlelist = new arraylist<string>(); titlelist.add("推荐"); titlelist.add("热点"); titlelist.add("北京"); titlelist.add("体育"); titlelist.add("娱乐"); titlelist.add("足球"); titlelist.add("巴萨"); titlelist.add("汽车"); initgroup(); } private void initgroup() { hs_activity_tabbar= (horizontalscrollview) this.findviewbyid(r.id.hs_activity_tabbar); ll_activity_tabbar_content= (linearlayout) this.findviewbyid(r.id.ll_activity_tabbar_content); //选项卡布局 myradiogroup = new radiogroup(this); myradiogroup.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.match_parent)); myradiogroup.setorientation(linearlayout.horizontal); ll_activity_tabbar_content.addview(myradiogroup); for (int i = 0; i < titlelist.size(); i++) { string channel = titlelist.get(i); radiobutton radio = new radiobutton(this); radio.setbuttondrawable(android.r.color.transparent); radio.setbackgroundresource(r.drawable.radiobtn_selector); colorstatelist csl = getresources().getcolorstatelist(r.color.radiobtn_text_color); radio.settextcolor(csl); linearlayout.layoutparams l = new linearlayout.layoutparams((int) sizehelper.dp2px(this, 80), viewgroup.layoutparams.match_parent, gravity.center); radio.setlayoutparams(l); radio.settextsize(15); radio.setgravity(gravity.center); radio.settext(channel); radio.settag(channel); myradiogroup.addview(radio); } myradiogroup.setoncheckedchangelistener(new radiogroup.oncheckedchangelistener() { @override public void oncheckedchanged(radiogroup group, int checkedid) { int radiobuttonid = group.getcheckedradiobuttonid(); //根据id获取radiobutton的实例 radiobutton rb = (radiobutton) findviewbyid(radiobuttonid); channel = (string) rb.gettag(); mcurrentcheckedradioleft = rb.getleft();//更新当前按钮距离左边的距离 int width=(int) sizehelper.dp2px(tabbaractivity.this, 140); hs_activity_tabbar.smoothscrollto((int) mcurrentcheckedradioleft - width, 0); tv_tabname.settext(channel); } }); //设定默认被选中的选项卡为第一项 if (!titlelist.isempty()) { myradiogroup.check(myradiogroup.getchildat(0).getid()); } } } </string></string></code>
来看看效果
以上所述是小编给大家介绍的android实现类似网易新闻选项卡动态滑动效果,希望对大家有所帮助