Kotlin实战笔记——RadioGroup&ViewPager

RadioGroup&ViewPager

既然学习了Kotlin，那么就用Kotlin实现一个简单的常见Android APP的布局框架。

首先在MainActivity布局文件中，添加我们需要用到的的控件

其实这里的RadioButton中很多相同的属性我们可以抽出来放在Style中，在真实的项目开发中，我们有必要这么做；真实项目开发中这些很多东西很少在布局中心写死，这里要注意！！！

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent" android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
            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_toTopOf="@id/rg_main"
            android:id="@+id/vp_main">

    </android.support.v4.view.ViewPager>

    <RadioGroup
            android:layout_width="0dp"
            android:layout_height="45dp"
            android:orientation="horizontal"
            app:layout_constraintTop_toBottomOf="@id/vp_main"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:id="@+id/rg_main">

        <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:textColor="@drawable/rb_checked"
                android:gravity="center"
                android:background="#F67"
                android:button="@null"
                android:layout_weight="1"
                android:checked="true"
                android:id="@+id/rb_index"
                android:textSize="18sp"
                android:text="首页"
        />
        <RadioButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#a67"
                android:id="@+id/rb_circle"
                android:button="@null"
                android:textColor="@drawable/rb_checked"
                android:textSize="18sp"
                android:gravity="center"
                android:text="圈子"
        />
        <RadioButton
                android:id="@+id/rb_my"
                android:layout_width="0dp"
                android:textSize="18sp"
                android:layout_weight="1"
                android:background="#888"
                android:button="@null"
                android:textColor="@drawable/rb_checked"
                android:gravity="center"
                android:layout_height="match_parent"
                android:text="我的"
        />

    </RadioGroup>

</android.support.constraint.ConstraintLayout>

创建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.constraintlayouttest01.R

/**
 * Created by Sin on 2019/1/10
 */
class IndexFragment:Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        var fmView:View = inflater.inflate(R.layout.fragment_index,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.constraintlayouttest01.R

/**
 * Created by Sin on 2019/1/10
 */
class CircleFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var fmView: View = inflater.inflate(R.layout.fragment_circle, 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.constraintlayouttest01.R

/**
 * Created by Sin on 2019/1/10
 */
class MyFragment:Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var fmView:View = inflater.inflate(R.layout.fragment_my,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.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter

/**
 * Created by Sin on 2019/1/10
 */
class ViewPagerAdapter(var fmlist: List<Fragment>, fm: FragmentManager?) : FragmentStatePagerAdapter(fm) {

    override fun getItem(p0: Int) = fmlist[p0]

    override fun getCount() = fmlist.size

}

接下来我们就可以直接在MainActivity中使用了

import android.os.Bundle
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import com.example.allen.constraintlayouttest01.adapter.ViewPagerAdapter
import com.example.allen.constraintlayouttest01.fragment.CircleFragment
import com.example.allen.constraintlayouttest01.fragment.IndexFragment
import com.example.allen.constraintlayouttest01.fragment.MyFragment
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        initView()
        setFragment()
        setEvent()
    }

    private fun setEvent() {
        rg_main.setOnCheckedChangeListener { group, checkedId ->
            when (checkedId) {
                R.id.rb_index -> vp_main.setCurrentItem(0)
                R.id.rb_circle -> vp_main.setCurrentItem(1)
                R.id.rb_my -> vp_main.setCurrentItem(2)
            }
        }
        vp_main.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {

            }

            override fun onPageSelected(p0: Int) = rg_main.check(rg_main.getChildAt(p0).id)

            override fun onPageScrollStateChanged(p0: Int) {

            }
        })
    }

    private fun setFragment() {
        val fm1 = IndexFragment()
        val fm2 = CircleFragment()
        val fm3 = MyFragment()
        val list = listOf(fm1, fm2, fm3)

        vp_main.adapter = ViewPagerAdapter(list, supportFragmentManager)

    }

    private fun initView() {

        setContentView(R.layout.activity_main)
    }
}

效果图

com.example.allen.constraintlayouttest01.gif