Android选项卡动态滑动效果

最新推荐文章于 2024-08-04 03:35:21 发布
最新推荐文章于 2024-08-04 03:35:21 发布
阅读量362 收藏
点赞数

本文会实现一个类似网易新闻（不说网易新闻大家可能不知道大概是什么样子）点击超多选项卡，选项卡动态滑动的效果。
首先来看看布局，就是用HorizontalScrollView控件来实现滑动的效果，里面包含了一个布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TabbarActivity">

    <LinearLayout
        android:id="@+id/ll_activity_tabbar_all"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <HorizontalScrollView
            android:id="@+id/hs_activity_tabbar"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="@android:color/white"
            android:fadingEdge="none"
            android:scrollbars="none">
                <LinearLayout
                    android:id="@+id/ll_activity_tabbar_content"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                </LinearLayout>
        </HorizontalScrollView>

    </LinearLayout>
    <TextView
        android:id="@+id/tv_tabname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

接下来我们在onCreat方法中加载布局和构建我们需要显示的数据

   @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("汽车");
        }

加载布局，用RadioGroup动态的加载多个自定义的RadioButton 

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);
        }

最后也就点击选项卡的时候会有一个动态滑动的效果，其实就是利用HorizontalScrollView的smoothScrollTo方法来实现的

    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());
        }

dp2px方法如下用来将dp转换为px：

 public static float dp2px(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (dp * scale);
    }

全部代码为：

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());
        }

    }
}

来看看效果
这里写图片描述

源码下载



转自：http://blog.csdn.net/itachi85/article/details/50358102

程序小兵
关注
Android 选项卡
10-19
Android 选项卡，三个选项卡之间可以相互切换。很简单的代码，适合新手学习用。
vue自定义实现tab选项卡切换效果，vue自定义实现tab选项卡切换滚动效果
qq_39695210的博客
02-20 1582
vue自定义实现tab选项卡切换效果，vue自定义实现tab选项卡切换滚动效果
android 实现选项卡
最新发布
weixin_35212670的博客
08-04 72
Android 实现选项卡的全攻略 在 Android 应用开发中，选项卡（Tab）是一种常见的用户界面组件，主要用于在同一界面下实现不同内容的切换。选项卡使得用户能够在多个视图之间快速导航，从而提高应用的可用性和用户体验。本文将展示如何在 Android 中实现选项卡，并提供相应的代码示例。 1. 选项卡的基本概念 选项...
swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果
webnoties的专栏
06-13 757
swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果。
jquery实现选项卡滑动效果
逆风优雅的博客
06-10 578
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Android实现类似网易新闻选项卡动态滑动效果
09-01
虽然上述代码实现了基本的选项卡滑动效果，但还可以进一步优化。例如，为了提高性能，可以考虑使用RecyclerView配合HorizontalLayoutManager，或者使用第三方库如TabLayout（来自Android Design Support Library）...
Android实现选项卡滑动效果
03-16
Android实现选项卡滑动效果，具体来说是左右滑动的页面效果，主要靠切换页面事件监听器来实现，另外还有一个滑动菜单选项类也是挺重要的模块，你完全可以将这些模块用在其它的Android应用程序中，本例实现了在多个...
Android实现横向滑动卡片效果
08-26
Android 实现横向滑动卡片效果 Android 实现横向滑动卡片效果是 Android 开发中常见的效果之一，本文将详细介绍如何实现这个效果。 标题： Android 实现横向滑动卡片效果 描述： 主要为大家详细介绍了 Android ...
Android多个TAB选项卡切换效果
09-02
`PagerSlidingTabStrip`是一个第三方库，它提供了一个美观的、可定制化的选项卡滑动条，它可以与`ViewPager`无缝集成，用于显示当前页和可滑动的页面标题。在布局文件`main_activity.xml`中，可以看到`ViewPager`和`...
Android动画全篇系列（十二）——ViewPager滑动动画
catzifeng的博客
02-23 1690
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而V...
HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
艾恩小灰灰的博客
06-20 1357
字体图标库：font-awesome。实例：Tab选项卡动画切换效果。技术栈：HTML+CSS+JS。
android横向滑动选项卡,ViewPager+Fragment实现水平滑动选项卡【Android】
weixin_39575007的博客
05-26 629
每一次量体重。轻了就对自己说：瘦了。重了就对自己说：胸部大了。选项卡大家并不陌生，即实现多视图选项切换。因为选项卡能够减少同一个页面多视图操作的臃肿，所以选项卡在APP中应用十分广泛，其中ViewPager能够很好地适应Fragment，因此ViewPager+Fragment也是很多开发者常用地一种实现水平滑动选项卡方式。本小节将教会大家如何使用ViewPager+Fragment实现水平滑动选...
Android ViewPager+Fragment滑动选项卡，tab点击选项卡
mmsx
05-23 1万+
有一段时间一直再研究这个，自Android 3.0以后，很少开发者再用以前的TabWidget控件了。那种效果不是很好，也不能滑动。后来陆续出现了各种各样滑动选项卡，每种的出现都各有优势吧。但我还是推荐ViewPager+Fragment滑动选项卡，tab点击选项卡。因为横屏或者竖屏效果都还不错，针对这种效果，还有一种开源框架的出现。接下来会有所介绍。 转载请注明出处：http://blog.csdn.net/qq_16064871 本文demo下载：请点击
Android开发之滑动菜单（八）
qq_62678419的博客
06-26 812
滑动菜单的实现
html选项卡鼠标滑动切换代码,使用js实现tab选项卡滑动切换效果
weixin_29079671的博客
06-03 1825
首先，让我们看看选项卡效果是什么样的。以经常能遇到的QQ新闻为例，它具有以下效果:当鼠标滑过相关标题时，对应于该标题的内容将会出现。这是选项卡的滑动切换效果。选项卡效果还包括延迟切换和自动切换效果。今天，让我们学习选项卡滑动效果。html代码使用两个div来包含标题和内容，因此标题数和内容数必须相同。 详细的html代码和CSS代码如下所示：html代码：友情链接底部导航合肥SEO单页面做优化cs...
Android TabLayout与ViewPager实现动态Tab
巨浪滔天的专栏
04-12 1万+
Android TabLayout与ViewPager实现动态Tab在项目中很少会遇到动态Tab这种需求，但是遇到了也要灵活处理，下面介绍一下实现方法。这里只是实现一个简单的纯文字的Tabs，重点在实现动态效果。 首先需要添加android.support.design依赖才能使用TabLayout这个控件。Android studio 添加如下代码到Gradle文件。
Android UI 之 TabLayout动态添加tab实现筛选及自动偏移（全选，单选）
热门推荐
行动者&&职业化
08-01 1万+
一丶效果展示（代码链接见文末） 二丶概述 1.Android开发，数据的筛选通常由后台处理，网络请求穿不同参数，即可。理论上TabLayout可以实现单选多选的筛选。 2.自动偏移的重要性，1.提醒用户屏幕外有可选项，2.操作简单，体验效果提高。 三丶功能介绍 1.RecyclerView 实现上拉加载下拉刷新 文章参考：http://blog.csdn.net/dt2
Android进阶之利用Tablayout+ViewPager+Fragment实现神奇的滑动效果
bighuan的博客
06-05 2392
一,概述 之前我们使用ViewPager时,往往喜欢与TabPageIndicator配合使用,达到滑动就可以切换页面的效果.但是,TabPageIndicator毕竟是第三方库,多少还是没有谷歌推出的Tablayout好用.Tablayout出来后,估计之前在GitHub上类似的第三方控件都会沉寂下去了.Tablayout还有一个优点就是,它可以最低可以兼容到Android api2.2,
Android仿写知乎选项卡动态隐藏效果
"Android实现知乎选项卡动态隐藏效果实例，通过示例代码详细介绍了如何在Android应用中模仿知乎的选项卡动态隐藏功能。" 在Android开发中，实现类似知乎选项卡的动态隐藏效果是一个常见的需求，尤其是在资讯阅读类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值