根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换;
整体思路:
主要思路为:首先在mainactivity.xml布局文件中设计三个主要分区:包含四个tab的bottom.xml、顶部top.xml、展示对应tab内容的fragmentlayout.xml。
然后在mainactivity.java同一级文件夹中分别创建四个tab对应的fragment.java,同时编辑好对应的fragment.xml布局文件。
此时,基础布局基本就完成了,接下来就是通过代码完成功能。
细节功能函数
首先创建对应的对象:
private weixinFragment weixinFragment = new weixinFragment();
private friendFragment friendFragment = new friendFragment();
private contactFragment contactFragment = new contactFragment();
private configFragment configFragment = new configFragment();
private FragmentManager fragmentManager;
private LinearLayout linearLayout1;
private LinearLayout linearLayout2;
private LinearLayout linearLayout3;
private LinearLayout linearLayout4;
private ImageView imageView1;
private ImageView imageView2;
private ImageView imageView3;
private ImageView imageView4;
然后在oncreate函数中将控件的ID和对象对应起来,同时创建四个点击监听:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.linearlayout_weixin);
linearLayout2 = findViewById(R.id.linearlayout_friend);
linearLayout3 = findViewById(R.id.linearlayout_contact);
linearLayout4 = findViewById(R.id.linearlayout_config);
imageView1 = findViewById(R.id.imageview_weixin);
imageView2 = findViewById(R.id.imageview_friend);
imageView3 = findViewById(R.id.imageview_contact);
imageView4 = findViewById(R.id.imageview_config);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
initFragment();
}
初始化fragment函数:将四个fragment装进容器(fragmentlayout)中:
private void initFragment(){
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.id_content,weixinFragment);
transaction.add(R.id.id_content,friendFragment);
transaction.add(R.id.id_content,contactFragment);
transaction.add(R.id.id_content,configFragment);
hideFragment(transaction);
transaction.show(weixinFragment);
imageView1.setImageResource(R.drawable.green);
transaction.commit();
}
隐藏所有fragment:
private void hideFragment(FragmentTransaction transaction){
transaction.hide(weixinFragment);
transaction.hide(friendFragment);
transaction.hide(contactFragment);
transaction.hide(configFragment);
}
根据参数展示对应的fragment,同时更换对应的图片:
private void showfragment(int i){
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragment(transaction);
switch(i){
case 0:
transaction.show(weixinFragment);
emptyimage();
imageView1.setImageResource(R.drawable.green);
break;
case 1:
transaction.show(friendFragment);
emptyimage();
imageView2.setImageResource(R.drawable.green);
break;
case 2:
transaction.show(contactFragment);
emptyimage();
imageView3.setImageResource(R.drawable.green);
break;
case 3:
transaction.show(configFragment);
emptyimage();
imageView4.setImageResource(R.drawable.green);
break;
default:
break;
}
transaction.commit();
}
点击监听函数:
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.linearlayout_weixin:
showfragment(0);
break;
case R.id.linearlayout_friend:
showfragment(1);
break;
case R.id.linearlayout_contact:
showfragment(2);
break;
case R.id.linearlayout_config:
showfragment(3);
break;
default:
break;
}
将四个tab对应的图片全部换成最初始的图片:
public void emptyimage(){
imageView1.setImageResource(R.drawable.blank);
imageView2.setImageResource(R.drawable.blank);
imageView3.setImageResource(R.drawable.blank);
imageView4.setImageResource(R.drawable.blank);
}
效果展示
点击后会更换显示内容,以及更换图片: