使用Kotlin Fragments 进行底部导航

在底部导航中有三个不同的片段用于三个不同的选项卡
在这里插入图片描述

1)创建片段布局1:fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Home"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_home_black_24dp"/>

    <EditText
        android:id="@+id/editTextHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

2)创建片段布局2:fragment_dashboard.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewDashboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Dashboard"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_dashboard_black_24dp"/>

    <EditText
        android:id="@+id/editTextDashboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

3)创建片段布局3:fragment_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewNotifiation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Notification"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_notifications_black_24dp"/>

    <EditText
        android:id="@+id/editTextNotification"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

4)为HomeFragment创建Fragment文件:FragmentHome.kt

package fragment

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.EditText
import com.example.chirag.kotlindemo.R

class FragmentHome : Fragment() {
    /**
     * 初始化newInstance以传递paameters 
     */
    companion object {
        fun newInstance(): FragmentHome {
            var fragmentHome = FragmentHome()
            var args = Bundle()
            fragmentHome.arguments = args
            return fragmentHome
        }

    }

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


    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_home, container, false)
        return rootView
    }

    override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        var editTextHome = view!!.findViewById(R.id.editTextHome) as EditText
    }
}

5)为DashboardFragment创建Fragment文件:FragmentDashboard.kt

package 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.chirag.kotlindemo.R

class FragmentDashboard : Fragment(){

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

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_dashboard, container, false)
        return rootView
    }
}

6)为notificationFragment创建Fragment文件:FragmentNotification.kt

package 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.chirag.kotlindemo.R

class FragmentNotification : Fragment(){

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

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_notification, container, false)
        return rootView
    }
}

7)最后创建MainActivity布局文件:activity_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.chirag.kotlindemo.BottomNavigationActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

8)在res / menu / navigation.xml下创建底部导航选项的菜单文件:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

9)创建活动BottomNavigationActivity.kt

package com.example.chirag.kotlindemo

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import android.view.MenuItem
import android.widget.FrameLayout
import fragment.FragmentDashboard
import fragment.FragmentHome
import fragment.FragmentNotification


class BottomNavigationActivity : AppCompatActivity() {

    private var content: FrameLayout? = null

    private val mOnNavigationItemSelectedListener = object : BottomNavigationView.OnNavigationItemSelectedListener {

        override fun onNavigationItemSelected(item: MenuItem): Boolean {
            when (item.itemId) {
                R.id.navigation_home -> {

                    val fragment = FragmentHome.Companion.newInstance()
                    addFragment(fragment)

                    return true
                }
                R.id.navigation_dashboard -> {
                    val fragment = FragmentDashboard()
                    addFragment(fragment)
                    return true
                }
                R.id.navigation_notifications -> {
                    var fragment = FragmentNotification()
                    addFragment(fragment)
                    return true
                }
            }
            return false
        }

    }

    /**
     * 在容器中添加/替换片段[framelayout] 
     */
    private fun addFragment(fragment: Fragment) {
        supportFragmentManager
                .beginTransaction()
                .setCustomAnimations(R.anim.design_bottom_sheet_slide_in, R.anim.design_bottom_sheet_slide_out)
                .replace(R.id.content, fragment, fragment.javaClass.getSimpleName())
                .addToBackStack(fragment.javaClass.getSimpleName())
                .commit()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom_navigation)

        content = findViewById(R.id.content) as FrameLayout
        val navigation = findViewById(R.id.navigation) as BottomNavigationView
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)


        val fragment = FragmentHome.Companion.newInstance()
        addFragment(fragment)
    }

}

猜你喜欢

转载自blog.csdn.net/lojloj/article/details/99686601