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
android 首页里布局,android复杂首页布局相关推荐
- Android工具里没有Android,android – AppCompat工具栏没有显示
在主题中声明.NoActionBar之后,以及将工具栏放在布局中,我的工具栏不会显示.我最终得到的正是你在宣布没有动作栏时所期望的 – 没有动作栏.这是布局: activity_home.xml: l ...
- android 动态摄像头权限,Android判断用户是否允许了摄像头权限实例代码
如题,既然是判断用户是否允许了摄像头权限,那么,咱们就忽略是Manifest配置的问题,因为这是开发者的事. 用户在使用APP时,如果首次进入用摄像头的地方,手机会提示是否允许该应用使用摄像头.有些用 ...
- 下载Android SDK tools完成Android SDK 安装、配置环境变量
Table of Contents 一.下载Android SDK tools 二.安装 三.配置变量 四.验证环境变量 开发Android程序必需有Android SDK(Software Deve ...
- 3.Android高仿网易云音乐-首页复杂发现界面布局和功能
0.效果图 效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 1.整 ...
- android支付宝首页布局,类似支付宝首页——RecycleView多布局结构实现
大家都知道,RecycleView默认只能通过setLayoutManager()方法指定一种布局结构,那么像支付宝首页这样复杂的多布局情况如何处理呢?在ListView中,我们也遇到过这种情况,是通 ...
- android仿微博首页布局,Android仿微博首页Tab加号弹窗功能
本文实例为大家分享了Android微博首页Tab加号弹窗展示的具体代码,供大家参考,具体内容如下 Activity部分的代码 package com.ting.tab; import android. ...
- Android之高仿京东APP首页“京东快报”自动向上滚动的广告条
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] ##前言 上次在京东APP上 ...
- Android开发-仿Soul社交应用首页3D星球视图旋转样式
https://blog.csdn.net/fukaimei/article/details/107938681 前 言 前段时间看到Soul社交应用首页的3D星球视图旋转样式(如下图),所以就想自己 ...
- android源代码居中字体,Android (布局优化) TextView实现drawable图标大小 位置与第一行文本居中...
先看大众点评的购买须知 大众.png 如上图,需求在每条提示语句前加一个小圆点,我刚看到需求就想到用 android:drawableLeft 来做,可做完发现:当TextView内容为单行的时候是没 ...
- 云炬Android开发笔记 10主界面-首页UI与数据解析器开发(RecyclerView)
阅读目录 1.创建首页UI 1.1 检查依赖是否存在 1.2 布局 1.3 控件查找 2.首页下拉刷新实现 2.1[初始化] 2.2 封装刷新功能 2.3 加载数据的处理 3. 首页数据结构分析 3. ...
最新文章
- NR 5G NG-RAN 架 构
- intel服务器主板芯片,英特尔® 服务器主板 S2600CW2SR
- JavaWeb之过滤器(Filter)
- Spring SpringMVC SpringBoot SpringCloud概念、关系及区别
- 北斗导航 | 卫星导航基础知识(伪随机噪声码)
- linux-防火墙有关知识积累
- android+使用bmob冲突,bmob开发android遇到的问题
- 用php判断大月小月,php 获取月第一天和最后一天 | 学步园
- 分形:MandelBrot和Julia
- 零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果...
- 「Luogu P2201」数列编辑器 解题报告
- ItelliJ IDEA下载及获取注册码详解
- 中文件编码方式_一文解开java中字符串编码的小秘密
- emu8086——buf 缓冲区的字节数据排序算法程序
- coverity java_coverity检测不到代码 | 学步园
- 病毒分析与防护实验3—— 反汇编工具(Ollydbg)的使用
- 台式计算机大全,电脑品牌大全..3MT产品库
- java开发微信公众号入门指引,jsp(java)开发微信公众平台入门
- android 照相机裁剪,Android拍照、照片选择以及图片裁剪完全解析
- 编译程序原理VS解释程序原理