目录
功能需求
完成一个类似微信页面的布局,要求:
- 页面最上方是标题
- 页面中间有显示框
- 页面最下方有四个按钮
- 点击按钮后,按钮图标会变换颜色,且显示框变换文字
功能实现步骤
一、 页面布局设置
1. 顶部标题页面设置:
创建layout文件top.xml中,添加文本框,添加文字,设置为居中,修改文字颜色和LinearLayout背景颜色。效果如下
2. 底部按钮页面设置
先将图片文件导入到/res/drawable中
新建layout布局文件button.xml。
先添加一个LinearLayout(vertical),修改LinearLayout大小和颜色:修改gravity所对应的配置信息为center,再修改大小,添加id。
在刚刚添加的LinearLayout(vertical)下添加ImageButton,选择要放入的图片,
再添加一个textView,修改textView中的文字和字体的颜色。
复制三个修改好的LinearLayout,修改ImageButton的资源路径,分别修改LinearLayout、ImageButton和textView的id。
效果如下
3. 中间内容页面设置
新建四个layout.xml文件,分别添加一个textView,修改文字内容,并将textView设置居中(先将LinearLayout的orientation设置为vertical,再将textView的gravity设为center)
效果如下:
4. 合并各个部分
我们想要的效果是页面最上方是标题,中间显示文本,最下方有四个按钮,故在activity_main.xml中先添加一个LinearLayout
在LinearLayout中按顺序添加三个部分:
通过include标签添加top.xml和button.xml
由于四个显示文本的页面都是在中间,故选择通过放一个FrameLayout在top和button的中间
页面布局完毕,效果如图:
5. 创建Fragment.java文件
首先添加一条语句,去掉自动生成的项目名称的文字框
requestWindowFeature(Window.FEATURE_NO_TITLE);
我们的目标是实现点击四个button分别切换到不同的四个页面的跳转控制,所以选择使用Fragment类:将四个布局文件压缩分别到fragment类里,成为类的实例对象,将页面对象化
新建四个fragment文件分别在return中修改要返回的布局文件
return inflater.inflate(R.layout.tab03, container, false);
6. 修改MainActivity.java文件
先为fragment类创建实例对象
定义一个FragmentManager来控制Fragment
private FragmentManager fm;
再写一个初始化Fragment的函数,将四个fragment放到FrameLayout中
private void initFragment(){
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.id_content, mTab01);
transaction.add(R.id.id_content, mTab02);
transaction.add(R.id.id_content, mTab03);
transaction.add(R.id.id_content, mTab04);
transaction.commit();
}
注意:实例化fragmentmanager时,使用的函数不是getFragmentManager(),而是getSupportFragmentManager()。若使用产生getFragmentManager()由于版本原因会报错
至此,所有的布局部分也已经完成
二、页面跳转控制
接下来,实现页面跳转控制:
我们需要实现的是,点击按钮,按钮会变色,并且跳转到相应的页面。所以我们需要对ImageButton所属的LinearLayout来进行监听,但是ImageButton和LinearLayout都属于布局文件中的一部分,我们不能直接调用,所以需要创建一个函数initView()来实现对ImageButton和LinearLayout控件实例化,方便我们后续调用
为实现点击按钮之后可以跳转到相应的页面,我们可以先隐藏四个界面,在点击button后再显示出选择的页面。可以选择自定义一个**HideFragment()**函数,调用hide()函数隐藏四个界面。
为实现点击按钮后变色,我们可以定义一个selectFragment()函数来实现:传入一个参数,通过调用transaction的show()函数,展示对应的页面,并通过setImageResource()函数将ImageButton的文件路径改变。
我们需要被点击的图片变化,而其他图标保持灰色,所以被点亮过的图标在另一图标被点亮时需要重新变成灰色,所以定义一个resetimg()函数,在某一图标被点击后亮起来之前,将所有图标都变成原始的灰色。
为实现点击按钮跳转页面,我们需要对进行监听。在最开头的MainActivity后添加implements View.OnClickListener,
public class MainActivity extends AppCompatActivity implements View.OnClickListener
重写onClick函数。通过getId()函数获取被点击的按钮的id,并调用selectFragment()函数。
最后优化一下监听:
定义一个**initEvent()**函数,调用setOnClickListener()函数,设置监听范围为各个button的LinearLayout
运行界面展示