Android实现类似网易新闻选项卡动态滑动效果

 本文会实现一个类似网易新闻（不说网易新闻大家可能不知道大概是什么样子）点击超多选项卡，选项卡动态滑动的效果。

首先来看看布局，就是用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实现类似网易新闻选项卡动态滑动效果，希望对大家有所帮助