Android-3 Kotlin实现Tab选项卡

在之前两篇文章中，介绍了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已经实现，效果如图：

tabbar.png

RecycleView的代码详见：https://github.com/vslimit/kotlindemo

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,658评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,482评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,213评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,395评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,487评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,523评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,525评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,300评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,753评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,905评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,541评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2赞 352

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,977评论 25赞 707
  • STP分析
    STP分析定义：STP分析即市场细分、选择目标市场和产品定位。STP分析是整个营销建设的基础，STP法则对各自的市...
    猫你在哪里阅读 16,652评论 0赞 6
  • 生而为人，我很抱歉吗
    梦想，是自由的。但是，实现梦想，度过幸福一生的，是少之又少的。因此，绝大多数人，没那么幸运，要么伤心地长吁短叹，...
    流水桃花阅读 323评论 0赞 2