欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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实现类似网易新闻选项卡动态滑动效果

以上所述是小编给大家介绍的android实现类似网易新闻选项卡动态滑动效果,希望对大家有所帮助