tips: 本文是記錄自己一次開發(fā)中遇到的幾個問題`

登錄注冊.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的根布局設(shè)置layout_height為指定高度無效...如果設(shè)置wrapContent,則無法設(shè)置底部按鈕重疊一半在登錄框上,網(wǎng)上查閱,說是自定義ViewPage,結(jié)果發(fā)現(xiàn),viewPage2是final類型的,無法被繼承與重寫

解決辦法

根布局嵌套一層布局,設(shè)置為指定高度就好了

遇到的問題2

Tablayout中的標(biāo)題無法設(shè)置字體大小.百度搜索都是自定義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選中后變換文字的透明度...并非變換文字顏色...搜索半天沒找到對應(yīng)的api設(shè)置

解決辦法

  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設(shè)計圖的樣子...關(guān)于Tablayout+ViewPage2+Fragment的詳細使用,后面在詳細研究