时间:2021-05-20
本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。
首先来看看布局,就是用HorizontalScrollView控件来实现滑动的效果,里面包含了一个布局。
接下来我们在onCreat方法中加载布局和构建我们需要显示的数据
<code class="hljs avrasm"> @Overrideprotected 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() {@Overridepublic 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;@Overrideprotected 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() {@Overridepublic 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实现类似网易新闻选项卡动态滑动效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡。分享给大家供大家参考。具体如下:这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有
本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果。分享给大家供大家参考。具体如下:这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现
本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码。分享给大家供大家参考。具体如下:这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格
关于实现网易新闻客户端的界面,以前写过很多博客,请参考:Android实现网易新闻客户端效果Android实现网易新闻客户端侧滑菜单(一)Android实现网易
本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码。分享给大家供大家参考,具体如下:今天给大家分享一款基于jQuery的仿百度首页滑动选项卡,可实