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

首先来看看布局,就是用HorizontalScrollView控件来实现滑动的效果,里面包含了一个布局。

效果:

Android选项卡动态滑动效果_JAVA

特点

 

如丝般顺滑,这是公司产品体验过后的评价;

灵活,可以通过设置几个属性,很容易就能定制可视卡片的数量和卡片的叠加垂直偏移量、缩放比例,透明度比例;

使用方便,直接setadapter就可以使用了,数据更新调用swipeCardsView.notifyDatasetChanged(mList);就行了,下面有使用说明。

 

 

使用说明:

1xml

<?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>

 

2activity全部源码

 

 

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

        }

 

    }

}

https://mp.weixin.qq.com/s/EM-dddvXL22Mh7g2_7YbGg