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实现类似网易新闻选项卡动态滑动效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-12-24 08:41:22

Android实现类似网易新闻选项卡动态滑动效果的相关文章

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

 本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果. 首先来看看布局,就是用HorizontalScrollView控件来实现滑动的效果,里面包含了一个布局. 接下来我们在onCreat方法中加载布局和构建我们需要显示的数据 <code class="hljs avrasm"> @Override protected void onCreate(Bundle savedInstanceState) { super.o

Android实现仿网易新闻的顶部导航指示器_Android

我们知道,页面导航器(Navigator)在几乎所有的项目中都会用到,平时大多数时候为了节省时间,都会直接在github上面拿别人的开源项目来用,最近自己在复习自定义View,就尝试封装了一下,源码参考项目PagerSlidingTabStrip 大家先来看一下效果图 基于文字的页面导航器 基于图片的页面导航器 使用方法 主要步骤分为三步 1)在xml文件里面 <com.xujun.viewpagertabindicator.TabPagerIndicator android:id="@+

Android实现仿网易新闻的顶部导航指示器

我们知道,页面导航器(Navigator)在几乎所有的项目中都会用到,平时大多数时候为了节省时间,都会直接在github上面拿别人的开源项目来用,最近自己在复习自定义View,就尝试封装了一下,源码参考项目PagerSlidingTabStrip 大家先来看一下效果图 基于文字的页面导航器 基于图片的页面导航器 使用方法 主要步骤分为三步 1)在xml文件里面 <com.xujun.viewpagertabindicator.TabPagerIndicator android:id="@+

谁有类似网易新闻视听电台播放器的源码啊?

问题描述 谁有类似网易新闻视听电台播放器的源码啊? 5C 求救.很着急.

Android实现类似IOS右滑返回的效果(原因分析及解决办法)

使用类库SwipeBackLayout https://github.com/Issacw0ng/SwipeBackLayout 出现的问题: 1. 主Activity返回时黑屏或者返回只是看到桌面背景而没有看到上一个Activity界面 原因: 使用滑动返回需要在Activity的额主题中声明android:windowIsTranslucent=true,而该属性是设置Activity为是否为透明主题,当主Activity采用透明主题时,由于是app Activity栈中的第一个,所以滑动返

Android实现渐显按钮的左右滑动效果

本示例演示在Android中实现带渐显按钮的左右滑动效果. 关于滑动效果,在我的上一篇博文中提到过,有兴趣的朋友可以访问: http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html 如果大家想实现带指引效果的左右滑动,请访问博文:http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html 先看下运行效果: 程序结构: MainActivity文件中代码:

[Android学UI之二]实现网易新闻客户端左右滑动广告

功能:       左右滑动的广告 使用说明:       这次使用:android.support.v4.view 来实现左右滑动. 这次简单实现了网易广告左右滑动效果.欢迎大家一起来学习讨论!!! 先看图吧,有图有真相!!! 接下来看看代码: 界面Activity: package com.bbswp.netnews; import android.app.Activity; import android.os.Bundle; import android.os.Parcelable; im

Android SlidingMenu 仿网易新闻客户端布局

前面两篇文章中的SlidingMenu都出现在左侧,今天来模仿一下网易新闻客户端左右两边都有SlidingMenu的效果,以下是网易新闻客户端效果:               不扯闲话了,直接进入正题吧   frame_content.xml   [html] view plaincopy   <?xml version="1.0" encoding="utf-8"?>   <FrameLayout xmlns:android="htt

模仿android网易新闻客户端左右动画效果

http://www.cnblogs.com/and_he/archive/2012/03/31/2426248.html 一.摘要 偶然在一个论坛上面看到有人模拟网易新闻客户端首页顶部那个组件效果,一时兴起,也来自己动手完整地模拟一个,包括顶部的特效组件和底部的类似于TabHost的组件.下面就动手一步一步地Coding...二.效果截图 三.底部类似TabHost组件切换效果的实现为了便于大家亲自动手实践,这里的讲解顺序就按照开发的顺序来讲,所以先做这个底部的"TabHost",然