tips: 本文是记录自己一次开发中遇到的几个问题`
登录注册.png
思路:Tablayout+ViewPage2+Fragment
1. 基本使用
//控件都是通过butterknife绑定的,就不贴了
mViewPage.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
mFragments.add(LoginFragment.newInstance());
mFragments.add(RegisterContainerFragment.newInstance());
mViewPage.setAdapter(new FragmentStateAdapter(this) {
@NonNull
@Override
public Fragment createFragment(int position) {
return mFragments.get(position);
}
@Override
public int getItemCount() {
return mFragments.size();
}
});
new TabLayoutMediator(mTabLayout, mViewPage, true, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
TextView textView = new TextView(mActivity);
textView.setText(titles[position]);
textView.setTextSize(17);
textView.setTextColor(Color.WHITE);
if (position == 0) {
textView.setAlpha(1);
} else {
textView.setAlpha(0.3f);
}
tab.setCustomView(textView);
}
}).attach();
XML布局如下:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
tools:background="@drawable/bg_login">
<TextView
android:id="@+id/appName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:text="@string/app_name"
android:textColor="@color/white"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorHeight="0dp"
app:tabPaddingEnd="40dp"
app:tabPaddingStart="40dp"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
LoginFragment的XML布局如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="253dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/cl"
android:layout_width="match_parent"
android:layout_height="223dp"
android:alpha="0.6"
android:background="@drawable/shape_blue01_solid_corner29"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="@+id/et_account"
style="@style/style_edit_login_register"
android:layout_marginTop="38dp"
android:hint="请输入手机号码"
android:inputType="phone"
android:maxLength="11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/et_pwd"
style="@style/style_edit_login_register"
android:layout_marginTop="15dp"
android:hint="请输入密码"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_account" />
<TextView
android:id="@+id/tv_forget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="21dp"
android:layout_marginTop="24dp"
android:text="忘记密码？"
android:textColor="@color/white"
android:textSize="@dimen/text_size_12"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/et_pwd" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/tv_login"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/ic_next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</RelativeLayout>
</RelativeLayout>
遇到的问题1
LoginFragment的根布局设置layout_height为指定高度无效...如果设置wrapContent,则无法设置底部按钮重叠一半在登录框上,网上查阅,说是自定义ViewPage,结果发现,viewPage2是final类型的,无法被继承与重写
解决办法
根布局嵌套一层布局,设置为指定高度就好了
遇到的问题2
Tablayout中的标题无法设置字体大小.百度搜索都是自定义style,在androidX中的Tablayout中不管用
解决办法
TextView textView = new TextView(mActivity);
textView.setText(titles[position]);
textView.setTextSize(17);
textView.setTextColor(Color.WHITE);
if (position == 0) {
textView.setAlpha(1);
} else {
textView.setAlpha(0.3f);
}
tab.setCustomView(textView);
遇到的问题3
tabItem选中后变换文字的透明度...并非变换文字颜色...搜索半天没找到对应的api设置
解决办法
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
TextView textView = (TextView) tab.getCustomView();
textView.setAlpha(1);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
TextView textView = (TextView) tab.getCustomView();
textView.setAlpha(0.3f);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
TextView textView = (TextView) tab.getCustomView();
textView.setAlpha(1);
}
});
至此,总算完成了UI设计图的样子...关于Tablayout+ViewPage2+Fragment的详细使用,后面在详细研究
