Kotlin使用Android Tablayout和Fragments,ViewPager,Material Design

第1步：在Android Studio中创建一个新项目。

在android studio中创建一个全新的项目时，将空活动视为主要活动。

第2步：更新build.gradle（Module：app）文件

在build.gradle（Module：app）文件中添加以下内容：

compile 'com.android.support:design:26.0.1'
compile 'com.android.support:support-v4:26.0.1'

以上两行代码将提供必要的类来使用我们的应用程序中的material design。

build.gradle的完整源代码 （Module：app）

apply plugin: 'com.android.application'
 
apply plugin: 'kotlin-android'
 
apply plugin: 'kotlin-android-extensions'
 
android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.example.parsaniahardik.kotlin_simpletabs"
        minSdkVersion 15
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:26.0.1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
 
    compile 'com.android.support:design:26.0.1'
    compile 'com.android.support:support-v4:26.0.1'
}

第3步：更新colors.xml

转到res-> values-> colors.xml目录

更新colors.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#ca9e2d</color>
    <color name="colorPrimaryDark">#d6b153</color>
    <color name="colorAccent">#fff</color>
</resources>

第4步：准备三个片段（fragments）

现在我们需要为每个选项卡创建片段。

意思是如果你想要三个标签就准备三个片段，如果你想要五个标签就准备五个片段。

我们将添加三个选项卡。

您可以通过向片段的xml或.kt文件添加所需的代码来更新每个选项卡的外观。

创建三个片段并将其命名为“ OneFragment ”，“ TwoFragment ”和“ ThreeFragment”。

在fragment_one.xml中添加以下代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#8cf11f"
        android:textSize="25sp"
        android:textColor="#fff"
        android:text="1. One" />
 
</FrameLayout>

在OneFragment.kt中添加以下内容：

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.parsaniahardik.kotlin_simpletabs.R
 
class OneFragment : Fragment() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
    }
 
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_one, container, false)
    }
}

复制以下代码到fragment_two.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:background="#5824dc"
        android:textColor="#fff"
        android:text="2. Two" />
 
</FrameLayout>

复制以下代码到TwoFragment.kt：

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
 
 
class TwoFragment : Fragment() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
    }
 
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_two, container, false)
    }
 
}

复制以下代码到fragment_three.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:background="#ec3289"
        android:textColor="#fff"
        android:text="3. Three" />
 
</FrameLayout>

复制以下代码到ThreeFragment.kt：

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
 
 
class ThreeFragment : Fragment() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
 
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        return inflater!!.inflate(R.layout.fragment_three, container, false)
    }
}

第5步：更新MainActivity

更新activity_main.xml，如下所示：

<android.support.design.widget.CoordinatorLayout 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">
 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="#fff"
            app:tabSelectedTextColor="#000"
            app:tabGravity="fill"
            app:tabMode="fixed" />
 
    </android.support.design.widget.AppBarLayout>
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
</android.support.design.widget.CoordinatorLayout>

更新MainActivity.kt，如下所示：

import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import java.util.ArrayList
 
class MainActivity : AppCompatActivity() {
 
    private var tabLayout: TabLayout? = null
    var viewPager: ViewPager? = null
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        viewPager = findViewById(R.id.viewpager) as ViewPager
        setupViewPager(viewPager!!)
 
        tabLayout = findViewById(R.id.tabs) as TabLayout
        tabLayout!!.setupWithViewPager(viewPager)
 
    }
 
    private fun setupViewPager(viewPager: ViewPager) {
        val adapter = ViewPagerAdapter(supportFragmentManager)
        adapter.addFragment(OneFragment(), "ONE")
        adapter.addFragment(TwoFragment(), "TWO")
        adapter.addFragment(ThreeFragment(), "THREE")
        viewPager.adapter = adapter
    }
 
    internal inner class ViewPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {
        private val mFragmentList = ArrayList<Fragment>()
        private val mFragmentTitleList = ArrayList<String>()
 
        override fun getItem(position: Int): Fragment {
            return mFragmentList[position]
        }
 
        override fun getCount(): Int {
            return mFragmentList.size
        }
 
        fun addFragment(fragment: Fragment, title: String) {
            mFragmentList.add(fragment)
            mFragmentTitleList.add(title)
        }
 
        override fun getPageTitle(position: Int): CharSequence {
            return mFragmentTitleList[position]
        }
    }
}

Java版本
本教程的Java版本：Android TabLayout

这就是Android tablayout Kotlin的例子。