android 首页里布局,android复杂首页布局

示例图

分析：

通过分析原型图，分为4个模块

1.轮播图

2.公告

3.指示器

4.内容列表

实现：

轮播图使用BGABanner-Android库

公告使用ViewFlipper控件

指示器切换使用MagicIndicator库

内容列表使用ViewPager+Fragment(RecyclerView)

![实现图]

(https://coding.net/u/tea9/p/image/git/raw/master/blog_img/18/03.png)

其他依赖：

anko

BaseRecyclerViewAdapterHelper

glide

gson

源码：

homepage

目录结构：

activity

-HomeViewPagerActivity

adapter

-ViewPagerAdapter

fragment

-TabFragment

代码：

activity_home_viewpager.xml

分析：

使用CoordinatorLayout+AppBarLayout+Toolbar实现tab头部依附效果

![列表图]

(https://coding.net/u/tea9/p/image/git/raw/master/blog_img/18/02.png)

MagicIndicator指示器控件

ViewPager指示器滑动切换

item_banner.xml

item_banner.xml实现了轮播图+公告

BGABanner轮播图

ViewFlipper公告

上下滚动动画：

anim/anim_come_in.xml

anim/anim_get_out.xml

HomeViewPagerActivity.kt

class HomeViewPagerActivity :AppCompatActivity() {

var tabList = arrayListOf("tab1","tab2","tab3","tab4","tab5","tab6","tab7")

var imgList:ArrayList= arrayListOf("https://images.unsplash.com/photo-1531026383433-6ed5a112afbc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c010c700aac502636ad0b579ce1274a4&auto=format&fit=crop&w=1650&q=80","https://images.unsplash.com/photo-1531075515553-b4d1f75ff534?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b3f6b409e70fca36a74369d882e85f49&auto=format&fit=crop&w=1567&q=80","https://images.unsplash.com/photo-1531130744926-1d86103aebeb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28f240aae3de685fc4742f09c922f6f8&auto=format&fit=crop&w=1714&q=80")

var mesList = arrayListOf("您的公告1","您的公告2","您的公告3")

var dataList = arrayListOf("hhhhhh","sssss","aaa","bbb","zzz","aaa","bbb","kkk","aaa","bbb","shaomiao","aaa","bbb","ojj","aaa","bbb","fjkjk","aaa","bbb","dfkdkjk","aaa","bbb")

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_home_viewpager)

setSupportActionBar(toolbar)

initBanner()

initViewFlipper()

initViewpager()

initMagicIndicator()

}

fun initBanner() {

banner.setAdapter(BGABanner.Adapter{ banner, itemView, model, position ->

Glide.with(itemView.context)

.load(model)

.apply(RequestOptions().placeholder(R.mipmap.ic_launcher).error(R.mipmap.ic_launcher).dontAnimate().centerCrop())

.into(itemView)

})

banner.setData(imgList, Arrays.asList("","",""))

// 点击事件

banner.setDelegate { banner, itemView, model, position -> toast(model.toString()+position) }

}

fun initViewFlipper() {

for (i in mesList.indices) {

var view = LayoutInflater.from(this).inflate(R.layout.item_textview,null)

view.findViewById(R.id.text_view).text = mesList[i]

view.setOnClickListener {

toast(mesList[i]+i)

}

view_flipper.addView(view)

}

view_flipper.isAutoStart = true

}

fun initMagicIndicator() {

var commonNavigator = CommonNavigator(this)

commonNavigator.adapter = object : CommonNavigatorAdapter() {

override fun getCount(): Int {

return if (tabList == null)0 else tabList.size

}

override fun getTitleView(p0: Context?, p1: Int): IPagerTitleView {

var colorTransitionPagerTitleView = ColorTransitionPagerTitleView(p0)

colorTransitionPagerTitleView.normalColor= ContextCompat.getColor(p0!!,R.color.abc_btn_colored_borderless_text_material)

colorTransitionPagerTitleView.selectedColor = ContextCompat.getColor(p0!!,R.color.abc_btn_colored_borderless_text_material)

colorTransitionPagerTitleView.text = tabList[p1].toUpperCase()

colorTransitionPagerTitleView.setOnClickListener (View.OnClickListener {

view_pager.currentItem = p1

})

return colorTransitionPagerTitleView

}

override fun getIndicator(p0: Context?): IPagerIndicator {

var indicator: LinePagerIndicator = LinePagerIndicator(p0)

indicator.mode = LinePagerIndicator.MODE_EXACTLY

indicator.setColors(ContextCompat.getColor(p0!!,R.color.abc_btn_colored_borderless_text_material))

return indicator

}

}

magic_indicator.navigator = commonNavigator

ViewPagerHelper.bind(magic_indicator,view_pager)

}

fun initViewpager() {

var adapter = ViewPagerAdapter(supportFragmentManager,tabList, Gson().toJson(dataList))

view_pager.adapter = adapter

}

}

tabList:指示器数据

imgList:轮播图数据

mesList:公告数据

dataList:列表数据

initBanner():初始化轮播图

initViewFlipper():初始化公告

initMagicIndicator():初始化指示器

initViewpager():初始化ViewPager

ViewPagerAdapter.kt ViewPager适配器

class ViewPagerAdapter(fm: FragmentManager?, var tabList:ArrayList, var listStr:Any) : FragmentPagerAdapter(fm){

override fun getItemPosition(`object`: Any): Int {

return PagerAdapter.POSITION_NONE

}

override fun instantiateItem(container: ViewGroup, position: Int): Any {

var fragment :TabFragment = super.instantiateItem(container, position) as TabFragment

fragment.updateArguments(position, listStr.toString())

return fragment

}

override fun getCount(): Int {

return tabList.size

}

override fun getPageTitle(position: Int): CharSequence? {

return tabList[position]

}

override fun getItem(position: Int): Fragment {

return TabFragment.create(position, Gson().toJson(listStr))

}

override fun notifyDataSetChanged() {

super.notifyDataSetChanged()

}

}

TabFragment.kt

class TabFragment: Fragment(){

var pageType:Int = 0

var data:String = ""

var adapter:BaseQuickAdapter? = null

companion object TabFragment{

fun create(pageType:Int,data:String) : com.example.homepage.fragment.TabFragment {

var f = TabFragment()

var args = Bundle()

args.putInt("position",pageType)

args.putString("data",data)

f.arguments=args

return f

}

}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

var args: Bundle = arguments!!

if (null!=args) {

pageType = args.getInt("position")

data = args.getString("data")

Log.e("shaomiaodata",data)

}

}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

var view: View = inflater.inflate(R.layout.recycler_view,container,false)

initRecyclerView(view)

return view

}

fun initRecyclerView(view:View) {

var layoutManager = LinearLayoutManager(context)

layoutManager.orientation = OrientationHelper.VERTICAL

var recycler_view = view.findViewById(R.id.recycler_view)

recycler_view.layoutManager = layoutManager

recycler_view.addItemDecoration(DividerItemDecoration(context, LinearLayoutManager.VERTICAL))

var list1= data!!.fromListJson()

adapter = object : BaseQuickAdapter(R.layout.item_layout,list1 as List) {

override fun convert(helper: BaseViewHolder?, item: String?) {

helper!!.setText(R.id.item_tv,item)

helper.addOnClickListener(R.id.item_tv)

}

}

adapter!!.onItemChildClickListener = BaseQuickAdapter.OnItemChildClickListener { adapter, view, position ->

toast("itemclick"+position)

}

recycler_view.adapter = adapter

}

// 解析json数据

inline fun String.fromListJson(charset: Charset = Charset.forName("UTF-8")): ArrayList? {

val gson = GsonBuilder().create()

return gson.fromJson>(this.toByteArray(charset).toString(charset),object : TypeToken>(){}.type)

}

fun updateArguments(pageType:Int,data:String) {

this.pageType = pageType

this.data = data

var args: Bundle = arguments!!

if (null!=args) {

args.putInt("pageType",pageType)

args.putString("data",data)

}

}

}

源码：

homepage