Kotlin實現Android Tab選項卡

740662426 8年前發布 | 10K 次閱讀 Kotlin 安卓開發 Android開發移動開發

在之前兩篇文章中，介紹了Android中網球請求的實現，那么本篇文章中，我們實現下現在APP中最通用的 Tabbar 的實現:

Tabbar1.0

以前的項目中 Tabbar 是使用 Gridview 實現，這里貼出部分代碼：

首先定義一個 Tab 的model類：

open class Tab(var res: Int, 
var selRes: Int, var name: String,
var tag:String,var f: Fragment) {}

Activity中的布局 activity_home 為：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">
    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content">
        <include layout="@layout/toolbar" android:id="@+id/tool"/>
        <GridView android:background="@color/white" android:layout_alignParentBottom="true"
                  android:numColumns="4" android:id="@+id/gridGv"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"/>
        <FrameLayout android:layout_below="@id/tool" android:layout_above="@id/gridGv"
                     android:id="@+id/frameLayout" android:layout_width="match_parent"
                     android:layout_height="match_parent"/>

    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

HomeActivity，其中當用戶未登錄時，則跳到 LoginActivity

class HomeActivity : BaseActivity() {

    internal var items = listOf(
            Tab(R.mipmap.ic_home, R.mipmap.ic_home_sel, "首頁", "index", HomeFragment.getInstance()),
            Tab(R.mipmap.ic_product, R.mipmap.ic_product_sel, "產品", "product", ProductFragment.getInstance()),
            Tab(R.mipmap.ic_cart, R.mipmap.ic_cart_sel, "購物車", "cart", CartFragment.getInstance()),
            Tab(R.mipmap.ic_user, R.mipmap.ic_user_sel, "我的", "me", MeFragment.getInstance()))

    var adapter: TabAdapter? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        adapter = TabAdapter(this)

        adapter!!.addAll(items)
        gridGv.gravity = Gravity.CENTER
        gridGv.selector = ColorDrawable(Color.TRANSPARENT)
        toFragment(items[0].f, R.id.frameLayout)
        gridGv.adapter = adapter
        initTitle("首頁")
        gridGv.onItemClick { adapterView, view, i, l ->
            if (items[i].tag.equals("me") && TextUtils.isEmpty(Preference.with(this).token) ) {
                startActivity<LoginActivity>()
                return@onItemClick
            }
            toFragment(items[i].f, R.id.frameLayout)
            initTitle(items[i].name)
            adapter?.pos = i
            adapter?.notifyDataSetChanged()
        }
        adapter!!.notifyDataSetChanged()

    }

    fun toFragment(f: Fragment, id: Int) {
        val transaction = fragmentManager.beginTransaction()
        transaction.replace(id, f)
        transaction.commit()
    }

}

TabAdapter

/**
 * Created by vslimit on 16/1/15.
 */
class TabAdapter(context: Context) : ArrayAdapter<Tab>(context, 0) {
    val inflater = LayoutInflater.from(context)
    var pos: Int = 0
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val item = getItem(position)
        val view = convertView ?: inflater.inflate(R.layout.item_tab_menu, parent, false)

        val nameView = view.findViewById(R.id.item_text) as TextView
        val imageView = view.findViewById(R.id.item_image) as ImageView

        nameView.text = item.name
        nameView.textColor = if (position == pos) context.resources.getColor(R.color.head_orange) else context.resources.getColor(R.color.product_name_black)
        imageView.imageResource = if (position == pos) item.selRes else item.res

        return view
    }

這樣基于 Gridview 已經實現了，但是，考慮到 RecycleView 比較流行，于是在新的版本中，使用了 RecycleView 來實現，并對其中的部分實現進行了優化，下面我們來看 Tabbar2.0

Tabbar2.0

Tab類是預定好的，并且是有序的，因此，采用 enum 來實現：

package com.vslimit.kotlindemo.model

import com.vslimit.kotlindemo.R
import com.vslimit.kotlindemo.fragment.BaseFragment
import com.vslimit.kotlindemo.fragment.MainFragment
import com.vslimit.kotlindemo.fragment.ProductFragment

/**
 * Created by vslimit on 16/12/2.
 */
enum class TabTagEnum (val text: String, val res: Int, val selRes: Int, val fragment: BaseFragment) {
    HOME("首頁", R.mipmap.ic_home, R.mipmap.ic_home_sel, MainFragment.getInstance()), PRODUCT("發現", R.mipmap.ic_product, R.mipmap.ic_product_sel, ProductFragment.getInstance()), CART("購物車", R.mipmap.ic_cart, R.mipmap.ic_cart_sel, MainFragment.getInstance()), ME("我的", R.mipmap.ic_user, R.mipmap.ic_user_sel, MainFragment.getInstance())
}

Activity布局 activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
                tools:context=".activity.MainActivity">
    <android.support.v7.widget.RecyclerView
            android:id="@+id/tabRv"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            android:layout_alignParentBottom="true"
            android:background="@android:color/white"/>
    <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_above="@id/tabRv" android:id="@+id/line" android:background="@android:color/black"/>
    <FrameLayout android:layout_above="@id/line"
                 android:id="@+id/frameLayout"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"/>
</RelativeLayout>

MainActivity之前使用 replace，remove 來進行 Fragment 的替換，但是，考慮到性能優化，改用 hide，show 的方式，可這樣處理容易導致 fragment 重疊問題，這里使用了@YoKey 的文章中的方式進行處理。

package com.vslimit.kotlindemo.activity

import android.os.Bundle
import android.support.annotation.Nullable
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.GridLayoutManager
import com.vslimit.kotlindemo.R
import com.vslimit.kotlindemo.model.TabTagEnum
import com.vslimit.kotlindemo.adapter.TabAdapter
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.AnkoLogger
import org.jetbrains.anko.info

class MainActivity : AppCompatActivity(), AnkoLogger {

    internal var items = TabTagEnum.values().asList()

    var adapter: TabAdapter? = null

    override fun onCreate(@Nullable savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        if (savedInstanceState == null) {
            initFragment(TabTagEnum.HOME.fragment)
        }
        val layoutManager: GridLayoutManager = GridLayoutManager(this, 4)
        tabRv.layoutManager = layoutManager
        adapter = TabAdapter(items) {
            switchContent(items[adapter!!.pos].fragment, it.fragment)
            adapter!!.pos = it.ordinal
            adapter!!.notifyDataSetChanged()
        }
        tabRv.adapter = adapter
        adapter!!.notifyDataSetChanged()
        info("onCreate")
    }

    override fun onRestoreInstanceState(savedInstanceState: Bundle?) {
        super.onRestoreInstanceState(savedInstanceState)
        info("onRestoreInstanceState")
    }

    override fun onStart() {
        super.onStart()
        info("onStart")
    }

    override fun onResume() {
        super.onResume()
        info("onResume")
    }

    override fun onSaveInstanceState(outState: Bundle?) {
        super.onSaveInstanceState(outState)
        info("onSaveInstanceState")
    }


    override fun onPause() {
        super.onPause()
        info("onPause")
    }

    override fun onStop() {
        super.onStop()
        info("onStop")
    }

    override fun onDestroy() {
        super.onDestroy()
        info("onDestroy")
    }

    fun switchContent(from: Fragment, to: Fragment) {
        val fm: FragmentManager = supportFragmentManager
        //添加漸隱漸現的動畫
        val ft: FragmentTransaction = fm.beginTransaction()
        if (!to.isAdded) {
            // 先判斷是否被add過
            ft.hide(from).add(R.id.frameLayout, to) // 隱藏當前的fragment，add下一個到Activity中
        } else {
            ft.hide(from).show(to) // 隱藏當前的fragment，顯示下一個
        }
        ft.commit()
    }

    fun initFragment(to: Fragment) {
        val fm: FragmentManager = supportFragmentManager
        //添加漸隱漸現的動畫
//        val ft: FragmentTransaction = fm.beginTransaction()
        fm.beginTransaction().add(R.id.frameLayout, to).commit()
    }
}

TabAdapter

package com.vslimit.kotlindemo.adapter

import android.support.v7.widget.RecyclerView
import android.view.View
import android.view.ViewGroup
import com.vslimit.kotlindemo.R
import com.vslimit.kotlindemo.extensions.ctx
import com.vslimit.kotlindemo.model.TabTagEnum
import kotlinx.android.synthetic.main.tab_item_menu.view.*
import org.jetbrains.anko.imageResource
import org.jetbrains.anko.layoutInflater
import org.jetbrains.anko.onClick

/**
 * Created by vslimit on 16/12/2.
 */
class TabAdapter(val items: List<TabTagEnum>, val itemClick: (TabTagEnum) -> Unit) : RecyclerView.Adapter<TabAdapter.ViewHolder>() {

    var pos: Int = TabTagEnum.HOME.ordinal

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = parent.ctx.layoutInflater.inflate(R.layout.tab_item_menu, parent, false)
        return ViewHolder(view, itemClick)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bindForecast(items[position], pos == position)
    }

    override fun getItemCount() = items.size

    class ViewHolder(view: View, val itemClick: (TabTagEnum) -> Unit) : RecyclerView.ViewHolder(view) {

        fun bindForecast(item: TabTagEnum, flag: Boolean) {
            with(item) {
                itemView.item_image.imageResource = if (flag) item.selRes else item.res
                itemView.item_text.text = item.text
                itemView.onClick { itemClick(item) }
            }
        }
    }

}

至此，基于 RecycleView 的 Tabbar 已經實現，效果如圖：

來自：http://www.jianshu.com/p/c4c63e43bd00

本文由用戶 740662426 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1480989615574.html

Kotlin 安卓開發 Android開發移動開發

Kotlin實現Android Tab選項卡

Tabbar1.0

Tabbar2.0

相關經驗

相關資訊

相關文檔

目錄