TabLayout&ViewPager
在我们开发的过程中，在某个页面中TabLayout&ViewPager这种布局也是很常见，并且ConstraintLayout是个很强大的布局，比RelativeLayout更加强大现在默认布局都是ConstraintLayout，而且用ConstraintLayout去实现布局层数会比LinearLayout少很多，用Kotlin实现一下。
首先引入TabLayout远程依赖
implementation "com.android.support:design:28.0.0"
在MainActivity布局文件中，添加我们需要用到的的控件
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent">
<include layout="@layout/include_title_bar"
android:id="@+id/i_bar"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:background="#ffcdcd"
android:id="@+id/tl_table"
app:layout_constraintTop_toBottomOf="@id/i_bar"
app:tabTextColor="#FFFFFF"
app:tabSelectedTextColor="#ff0000"
app:tabIndicatorColor="#ff0040"
app:tabRippleColor="#ffb1b1"
android:layout_height="35dp"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
app:layout_constraintTop_toBottomOf="@id/tl_table"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
</android.support.constraint.ConstraintLayout>
引入的自定义标题栏
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
android:text="小粉书"
android:textColor="#FFFFFF"
android:gravity="center"
android:background="#F67"
android:layout_width="match_parent"
android:layout_height="30dp"/>
创建Fragment，并且直接通过提示把布局创建出来
- 推荐
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R
class RecommendFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val fmview : View = inflater.inflate(R.layout.fragment_recommend,container,false)
return fmview
}
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent">
<TextView android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="推荐界面"
android:gravity="center"
android:textSize="30sp"/>
</android.support.constraint.ConstraintLayout>
- 订阅
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R
class SubscriptionFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val fmview: View = inflater.inflate(R.layout.fragment_subscription, container, false)
return fmview
}
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent">
<TextView android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="订阅界面"
android:gravity="center"
android:textSize="30sp"/>
</android.support.constraint.ConstraintLayout>
- 收藏
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.allen.constraintLayouttest02.R
/**
* Created by Sin on 2019/1/10
*/
class CollectionFragment:Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val fmview : View = inflater.inflate(R.layout.fragment_collection,container,false)
return fmview
}
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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="match_parent">
<TextView android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="收藏界面"
android:gravity="center"
android:textSize="30sp"/>
</android.support.constraint.ConstraintLayout>
创建Adapter
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter
/**
* Created by Sin on 2019/1/10
*/
class TitleFragmentPagesAdapter(var fmList: List<Fragment>, fm: FragmentManager?) : FragmentStatePagerAdapter(fm) {
override fun getItem(p0: Int) = fmList[p0]
override fun getCount() = fmList.size
}
准备工作做好之后，我们就可以使用了
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import com.example.allen.constraintLayouttest02.adapter.TitleFragmentPagesAdapter
import com.example.allen.constraintLayouttest02.fragment.CollectionFragment
import com.example.allen.constraintLayouttest02.fragment.RecommendFragment
import com.example.allen.constraintLayouttest02.fragment.SubscriptionFragment
import kotlinx.android.synthetic.main.activity_main.*
/**
* Created by Sin on 2019/1/10
*/
class MainActivity : AppCompatActivity(), TabLayout.OnTabSelectedListener {
override fun onTabReselected(p0: TabLayout.Tab?) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
//Tab重新选择时候回调
}
override fun onTabUnselected(p0: TabLayout.Tab?) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
//Tab未被选择时候回调
}
override fun onTabSelected(p0: TabLayout.Tab?) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
//Tab被选的时候回调
vp_content.currentItem = p0!!.position
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
initView()
setTab()
setItem()
vp_content.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tl_table))
}
//初始化界面
private fun initView() {
setContentView(R.layout.activity_main)
}
//设置Tab
private fun setTab() {
val tab1: RecommendFragment =
RecommendFragment()
val tab2: SubscriptionFragment =
SubscriptionFragment()
val tab3: CollectionFragment =
CollectionFragment()
var list = listOf<Fragment>(tab1, tab2, tab3)
vp_content.adapter = TitleFragmentPagesAdapter(list, supportFragmentManager)
tl_table.setupWithViewPager(vp_content)
}
//设置条目
fun setItem() {
//
val list = listOf<String>("推荐", "订阅", "收藏")
tl_table.getTabAt(0)?.text = list[0]
tl_table.getTabAt(1)?.text = list[1]
tl_table.getTabAt(2)?.text = list[2]
}
}
效果图
com.example.allen.constraintLayouttest02.gif
