自定义tab,viewpager实现仿tablayout切换效果

首先书写Xml文件

  <LinearLayout
        android:id="@+id/login_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/login_head"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:orientation="vertical"
        >
       <!-- 和viewpager结合的 tab -->
        <RelativeLayout
            android:id="@+id/login_rl_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:orientation="horizontal"
            android:padding="10dp"
            >
            <TextView
                android:id="@+id/login_tab_name1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/tag"
                android:layout_centerVertical="true"
                android:layout_marginRight="15dp"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:gravity="center"
                android:text="@string/login_tab_name1"
                />
            <TextView
                android:id="@+id/login_tab_name2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/tag"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:gravity="center"
                android:text="@string/login_tab_name2"
                />
            <View
                android:id="@+id/tag"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_centerInParent="true"
                />
            <!-- 下划线 -->
            <View
                android:id="@+id/login_view_divider"
                android:layout_width="10dp"
                android:layout_height="3dp"
                android:layout_alignLeft="@+id/login_tab_name1"
                android:layout_below="@+id/login_tab_name1"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:background="@android:color/black"
                />
        </RelativeLayout>


        <!-- 首页主内容区域 -->
        <android.support.v4.view.ViewPager
            android:id="@+id/login_vp_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            >
        </android.support.v4.view.ViewPager>
    </LinearLayout>

获取到下划线的layout参数

        mDividerParams = (RelativeLayout.LayoutParams) mLoginDivider.getLayoutParams();

初始化适配器

class MyViewPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return 2;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view;
//            使用账号密码登录 加载相应的布局
            if (position == 1) {
                view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_login_userpwd, null);
                UserPwdViewHolder holder = new UserPwdViewHolder(view);
                holder.mLoginToRegister.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        myStartActivity(getApplicationContext(), RegisterActivity.class);
                    }
                });
            } else {
//            使用 手机验证码登录
                view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_login_phone_register, null);
                PhoneViewHolder holder = new PhoneViewHolder(view);
                setHintSize(holder.mRegisterPhone, holder.mLoginPhoneConfirm);
                holder.mLoginToRegister.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        myStartActivity(getApplicationContext(), RegisterActivity.class);
                    }
                });
            }
            container.addView(view);
            return view;
        }

//        单独设置 Editext的 hint文本大小
            private void setHintSize(EditText registerPhone, EditText loginPhoneConfirm) {
                //        新建一个可以添加属性的文本对象
                SpannableString hintPhone = new SpannableString(UIUtils.getString(R.string.login_hint_phone));
                SpannableString hintConfirm = new SpannableString(UIUtils.getString(R.string.login_hint_confirm));
//        新建一个属性对象,设置文字的大小,true为dip
                AbsoluteSizeSpan ass = new AbsoluteSizeSpan(13, true);
//        附加属性到文本
                hintPhone.setSpan(ass, 0, hintPhone.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                hintConfirm.setSpan(ass, 0, hintConfirm.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//        设置hint
                registerPhone.setHint(new SpannedString(hintPhone)); // 一定要进行转换,否则属性会消失
                loginPhoneConfirm.setHint(new SpannedString(hintConfirm));
            }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

    }

初始化page chang监听

 /**
     * 手机号快捷登陆 和 账号密码登录的切换.
     */
    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        public static final int USER_PWD_LOGIN = 1;
        public static final int PHONE_LOGIN = 0;


        @Override
        public void onPageScrolled(int position, float positionOffset, int positiofsetPixels) {
//            获取滑动的最大距离
            int dis = mLogin_rl_tab.getChildAt(1).getLeft() - mLogin_rl_tab.getChildAt(0).getLeft();
//            移动的距离
            float moveDis = position * dis + positionOffset * dis;

            if (moveDis > dis) {
                mDividerParams.leftMargin = dis;
            } else {
                mDividerParams.leftMargin = (int) moveDis;
            }
//            最初的位置,
            if (mDividerMinLeft > mDividerParams.leftMargin) {
                mDividerParams.leftMargin = mDividerMinLeft;
            }
//            左右各少5dp
            mDividerParams.leftMargin += UIUtils.dip2px(5);
            mLoginDivider.setLayoutParams(mDividerParams);
        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
//            当状态为 空闲时, 改变下划线的宽度
            if (state == ViewPager.SCROLL_STATE_IDLE) {
                int item = mLoginVpContent.getCurrentItem();
                switch (item) {
                    case PHONE_LOGIN:
                        mDividerParams.width = mDividerWidthTab1;
                        mDividerParams.leftMargin = UIUtils.dip2px(5);
                        break;
                    case USER_PWD_LOGIN:
                        mDividerParams.width = mDividerWidthTab2;
                        break;
                }
                mLoginDivider.setLayoutParams(mDividerParams);

            }
        }
    }

设置适配器,监听和下划线的宽度

      mLoginVpContent.setAdapter(new MyViewPagerAdapter());
//        设置页面切换监听
        mLoginVpContent.addOnPageChangeListener(new MyOnPageChangeListener());

//        修改分割线的宽度
        mLoginDivider.post(new Runnable() {
            @Override
            public void run() {
                mDividerWidthTab1 = mLoginTabName1.getWidth() - UIUtils.dip2px(10);
                mDividerWidthTab2 = mLoginTabName2.getWidth() - UIUtils.dip2px(10);
                mDividerParams.width = mDividerWidthTab1;
                mLoginDivider.setLayoutParams(mDividerParams);
//                mDividerMinLeft = mLoginDivider.getLeft();
                mDividerMinLeft = mDividerParams.leftMargin;
            }
        });

设置上面两个textview点击监听

//        手机登录
        mLoginTabName1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mLoginVpContent.setCurrentItem(0);
            }
        });
//        账号密码登录
        mLoginTabName2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mLoginVpContent.setCurrentItem(1);
            }
        });