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