Android选项卡动态滑动效果

本文会实现一个类似网易新闻（不说网易新闻大家可能不知道大概是什么样子）点击超多选项卡，选项卡动态滑动的效果。
首先来看看布局，就是用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());        }    }}

来看看效果

源码下载