仿新浪热门微博页面动态添加Tab标签与Fragment联动的实现

大概与新浪热门微博相似我就照着写了，自我感觉很好用，趁公司的人都在测试就给大家分享一下咯。

效果如下图：

 

 

使用控件：HorizontalScrollView和ViewPager

 

代码如下：

xml：

 

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/ly"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"></LinearLayout>
    </HorizontalScrollView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#bdbdbd" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

 

Activity（注意看注释）

 

public class MainActivity extends FragmentActivity {
    private HorizontalScrollView sv;
    private ViewPager vp;
    private TextView tv;
    private LinearLayout ly;
    private FragmentAdapter mFragmentAdapter;
    private CommonFragment fragment;
    private List<String> tabel;
    private List<TextView> tvList;
    private List<Fragment> fList;
    private Drawable drawableLeft;
    private Drawable drawableRight;
    /**
     * ViewPager的当前选中页
     */
    private int currentIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sv= (HorizontalScrollView) findViewById(R.id.sv);
        vp = (ViewPager) findViewById(R.id.viewpager);
        ly = (LinearLayout) findViewById(R.id.ly);
        drawableLeft = getResources().getDrawable(R.mipmap.ico_arrow_right);
        drawableRight = getResources().getDrawable(R.mipmap.ico_arrow_left);
        drawableLeft.setBounds(0, 0, drawableLeft.getMinimumWidth(), drawableLeft.getMinimumHeight()); //设置边界
        drawableRight.setBounds(0, 0, drawableRight.getMinimumWidth(), drawableRight.getMinimumHeight()); //设置边界
        getTabel();


    }

    //得到标签
    public void getTabel() {
        tabel = new ArrayList<>();
        tvList = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            tabel.add("测试" + i);
        }
        // TODO 这里记得判断获得标签的数目不为0才可以获得textview和fragment，此处数据模拟，动态获取需加判断
        for (int i = 0; i < tabel.size(); i++) {
            tv = new TextView(this);
            tv.setText(tabel.get(i));
            tv.setTextSize(16);
            tv.setPadding(35, 15, 35, 15);
            tv.setGravity(Gravity.CENTER);
            tv.setTextColor(0xff333333);
            ly.addView(tv);
            tvList.add(tv);
            final int finalI = i;
            tv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    change(tvList.get(finalI));
                    vp.setCurrentItem(finalI);
                }
            });
        }
        //得到fragment
        getFragment(tabel.size());
    }

    public void getFragment(int num) {
        fList = new ArrayList<>();
        for (int i = 0; i < num; i++) {
            fragment = new CommonFragment();
            Bundle bundle = new Bundle();
            bundle.putString("content", tabel.get(i));
            fragment.setArguments(bundle);
            fList.add(fragment);
        }
        mFragmentAdapter = new FragmentAdapter(
                this.getSupportFragmentManager(), fList);
        vp.setAdapter(mFragmentAdapter);
        vp.setCurrentItem(0);
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**
             * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
             */
            @Override
            public void onPageScrollStateChanged(int state) {

            }

            /**
             * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
             * offsetPixels:当前页面偏移的像素位置
             */
            @Override
            public void onPageScrolled(int position, float offset,
                                       int offsetPixels) {

                /**
                 * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来
                 * 设置mTabLineIv的左边距 滑动场景：
                 * 记3个页面,
                 * 从左到右分别为0,1,2
                 * 0->1; 1->2; 2->1; 1->0
                 */


            }

            @Override
            public void onPageSelected(int position) {
                change(tvList.get(position));
                sv.requestChildFocus(tvList.get(position),tvList.get(position));
            }
        });
        change(tvList.get(0));
    }


    /**
     * 重置颜色
     */
    private void change(TextView v) {
        restoreTabs();
        v.setCompoundDrawables(drawableLeft, null, drawableRight, null);
        v.setCompoundDrawablePadding(16);
        v.setTextColor(0xffda1a17);

    }
    private void restoreTabs() {
        for (int i = 0; i <tvList.size() ; i++) {
            tvList.get(i).setTextColor(0xff333333);
            tvList.get(i).setCompoundDrawables(null, null, null, null);
        }
    }
}

 

 

 

其实代码已经很全了，如果还有不懂得或者想偷懒的可以直接去这里下载http://download.csdn.net/detail/ccstar1/9526141。最后说一个刚刚优化的问题吧，就是当类似edittext和button同时出现的时候，先编辑edittext再点击button时候发现软键盘还在，那么在点击button的监听里加上InputMethodManager imm =(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);  imm.hideSoftInputFromWindow(mEditText.getWindowToken(), 0);  就ok啦！大家不要怪我下载那个需要一个积分，只是平时我要下载其他的老要积分，攒点好下载，嘿嘿，如果想下载没积分可以私信我，到时候给你发。