要点难点:切换四个Tab
实验思路:首先构思布局整个页面,实现视图层,再考虑实现逻辑层。
实验步骤:
1 将整个页面划分为三个部分:顶部top,底部bottom、中间content
首先是布局,将页面划分为三个部分。
划分思路:
根据想要达到的切换效果,显然顶部是静态的,只需要布局就可以实现了。底部和中间有一层逻辑,也就是底部点击相应的按钮,就要切换成相应的界面。那么中间content部分就得达到一个切换页面的效果,而且里面得有四个xml对应相关的页面,所以可以考虑使用FragmentTransaction这个类。而底部按钮则需要达到点击一个切换为点亮图片,而其他图片变灰,并且切换到相应的页面,这里显然得监听四个按钮,然后对监听的四个按钮绑定触发事件。
2 完成页面布局
2.1 顶部页面效果
2.2 底部页面效果
2.3 内容页面效果
2.4 将顶部、底部、内容三个模块组成一个页面
至此,页面的视图层完成
3 完成页面切换效果
完成的页面的视图层,就要开始完成逻辑层。对于页面切换,就是监听图片按钮,触发事件。
3.1 切换页面
切换页面可以使用FragmentTransaction,并且在initFragment()函数中使用add()方法将四个切换页面添加到FrameLayout中,然后通过show()就可以展示对应的页面,而hide()可以隐藏相应的页面。所以这里可以想到,在show之前调用hide隐藏所有被add的页面,就可以达到切换页面的效果。
3.2 绑定事件
实现View.OnClickListener接口,implements View.OnClickListener,然后调用实现的方法initEvent(),再对相应的组件使用setOnClickListener()方法进行监听点击事件。
3.3 定义事件
对组件绑定好事件后,就得定义触发后会执行的事件onClick(View v)。这里想达到点击后切换页面,点击图标变亮,并且其他图标变灰的效果。
大致思路为:点击后,会从v传入对应的组件,先获取组件的id,知道是哪个按钮,然后将所有图片变灰,再判断传入的id,切换到这个按钮对应的页面,并将这个页面的按钮变亮。
至此,逻辑层也完成,实验完成。
4 源代码仓库地址以及实验结果
仓库地址:https://gitee.com/hu_hong_tao/android-development-experiment