Kotlin实现Android Tab选项卡
<p>在之前两篇文章中,介绍了Android中网球请求的实现,那么本篇文章中,我们实现下现在APP中最通用的 <strong>Tabbar</strong> 的实现:</p> <h3>Tabbar1.0</h3> <p>以前的项目中 <strong>Tabbar</strong> 是使用 <strong>Gridview</strong> 实现,这里贴出部分代码:</p> <p>首先定义一个 <strong>Tab</strong> 的model类:</p> <pre> <code class="language-java">open class Tab(var res: Int, var selRes: Int, var name: String, var tag:String,var f: Fragment) {}</code></pre> <p>Activity中的布局 <strong>activity_home</strong> 为:</p> <pre> <code class="language-java"><?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></code></pre> <p>HomeActivity,其中当用户未登录时,则跳到 <strong>LoginActivity</strong></p> <pre> <code class="language-java">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() } }</code></pre> <p>TabAdapter</p> <pre> <code class="language-java">/** * 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 }</code></pre> <p>这样基于 <strong>Gridview</strong> 已经实现了,但是,考虑到 <strong>RecycleView</strong> 比较流行,于是在新的版本中,使用了 <strong>RecycleView</strong> 来实现,并对其中的部分实现进行了优化,下面我们来看 <strong>Tabbar2.0</strong></p> <h3>Tabbar2.0</h3> <p>Tab类是预定好的,并且是有序的,因此,采用 <strong>enum</strong> 来实现:</p> <pre> <code class="language-java">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()) }</code></pre> <p>Activity布局 <strong>activity_main</strong></p> <pre> <code class="language-java"><?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></code></pre> <p>MainActivity之前使用 <strong>replace,remove</strong> 来进行 <strong>Fragment</strong> 的替换,但是,考虑到性能优化,改用 <strong>hide,show</strong> 的方式,可这样处理容易导致 <strong>fragment</strong> 重叠问题,这里使用了@YoKey 的文章中的方式进行处理<a href="/misc/goto?guid=4959728016569309375" rel="nofollow,noindex"> </a>。</p> <pre> <code class="language-java">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() } }</code></pre> <p>TabAdapter</p> <pre> <code class="language-java">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) } } } } }</code></pre> <p>至此,基于 <strong>RecycleView</strong> 的 <strong>Tabbar</strong> 已经实现,效果如图:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/52a826febda3bad1f049009ce8ede23f.jpg"></p> <p> </p> <p> </p> <p>来自:http://www.jianshu.com/p/c4c63e43bd00</p> <p> </p>
本文由用户 740662426 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!