自定义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);            }        });