Android炫酷翻页效果Kotlin炫酷翻页效果ViewPager+TabLayout的运用

效果展示

依赖库

    compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
    compile 'com.android.support:design:26.0.0-alpha1'   

方法步骤

1、创建两个Fragment(用于ViewPager)

在这里插入图片描述
在这里插入图片描述
!!记得将Fragment和xml绑定!!
具体方法见上一篇文章
Android液态动态翻页效果Kotlin炫酷翻页效果ViewPager的运用

2、主Activity的xml配置

<androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager_login"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/table_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

3、配置ViewPager的Adapter

class LoginAdapter(fm:FragmentManager): FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
       return when(position){
           0->LoginTabFragment()
           else->SignUpTabFragment()
       }
    }

    override fun getCount(): Int {
        return 2
    }
}

4、主Activity配置

//viewpager_login与适配器关联
viewpager_login.adapter=LoginAdapter(supportFragmentManager)

//将table_layout与viewPager_login关联
 table_layout.setupWithViewPager(viewpager_login)

//table_layout与viewPager_login关联后 文字的添加  数量大是采用数组
table_layout.getTabAt(0)?.text="Login"
table_layout.getTabAt(1)?.text="Sign up"

你可能感兴趣的:(Android学习,android,安卓,viewpager,app,android,studio)