实验内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；
App实现结果展示实现过程 1.基本布局的实现
本次的基本布局由三个部分组成:top,bottom,以及中间的fragment部分
利用下面4个组件对fragment进行切换,从而实现tap页面的切换
1.top.xmltop界面由一个Linearlayout构成,在其中添加一个textview实现title的声明
2.bottom.xml
bottom由四个Linearlayout构成,每个LInearlayout代表一个tap切换组件
每个Linearlayout中有一个Imageview和一个textview控件,来构成组件的图标和名字
3.总布局 activity_main.xml>
在中部添加一个framelayout,并在顶部和底部分别include top和bottom布局,总布局就完成了
总布局结果展示 2.组件功能的实现
app界面组件由fragment实现,通过监听点击4个组件来进行fragment的切换,进而实现4个tap页面的切换
1.四个界面的布局显示与top界面相似,都是linearlayout中包含一个textview,显示切换到了哪个界面
config_weixinfragment.xml
contact_weixinfragment.xml
fragment_weixinfragment.xml
friend_weixinfragment.xml
2.定义调用四个界面的类
使用Inflater，将xml文件压缩到容器中,从而显示xml中的内容
config_weixinfragment.java
package com.example.myapplication2;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class config_weixinfragment extends Fragment {
public config_weixinfragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.config_weixinfragment, container, false);
}
}
contact_weixinfragment.java
package com.example.myapplication2;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class contact_weixinfragment extends Fragment {
public contact_weixinfragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.contact_weixinfragment, container, false);
}
}
friends_weixinfragment.java
package com.example.myapplication2;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class friends_weixinfragment extends Fragment {
public friends_weixinfragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.friend_weixinfragment, container, false);
}
}
weixinfragment.java
package com.example.myapplication2;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class weixinfragment extends Fragment {
public weixinfragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_weixinfragment, container, false);
}
}
3.设计主程序,实现app界面,功能
利用fragmentmanager对fragment的切换进行控制,实现使用一个组件时,隐藏其他组件的显示,只显示正在使用的组件
调用类和控件 private Fragment weixinfragment=new weixinfragment();
private Fragment configWeixinfragment=new config_weixinfragment();
private Fragment contactWeixinfragment=new contact_weixinfragment();
private Fragment friendsWeixinfragment=new friends_weixinfragment();
private FragmentManager fragmentManager;
private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
private ImageView imageView1,imageView2,imageView3,imageView4;
1.onCreate()函数
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main2);
linearLayout1=findViewById(R.id.linearlayout_weixin);
linearLayout2=findViewById(R.id.linearlayout_config);
linearLayout3=findViewById(R.id.linearlayout_contact);
linearLayout4=findViewById(R.id.linearlayout_friend);
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
linearLayout1.setonClickListener(this);
linearLayout2.setonClickListener(this);
linearLayout3.setonClickListener(this);
linearLayout4.setonClickListener(this);
initFragment();
}
2.初始化函数initFragment()
对fragmentManager进行标准化,transaction.add函数的功能是将一个fragment添加至所选的framelayout中,即activity_main.xml中定义的中部的framelayout.
private void initFragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.id_content,weixinfragment);
transaction.add(R.id.id_content,contactWeixinfragment);
transaction.add(R.id.id_content,configWeixinfragment);
transaction.add(R.id.id_content,friendsWeixinfragment);
hideFragment(transaction);
transaction.commit();
}
3.隐藏函数hideFragment()
hideFragment实现了将所有的fragment隐藏
private void hideFragment( FragmentTransaction transaction){
transaction.hide(weixinfragment);
transaction.hide(contactWeixinfragment);
transaction.hide(configWeixinfragment);
transaction.hide(friendsWeixinfragment);
}
4.显示函数showFragment()
每次调用showFragment(),都会先调用hideFragment(),将所有的fragment隐藏,再通过switch语句来实现定向调用组件功能
这个参数i将在OnClick函数中得到,即利用监听点击来获得调用哪个组件的信息
private void showfragment(int i){
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(weixinfragment);
break;
case 1:
transaction.show(configWeixinfragment);
break;
case 2:
transaction.show(contactWeixinfragment);
break;
case 3:
transaction.show(friendsWeixinfragment);
break;
default:
break;
}
transaction.commit();
}
5.OnClick函数
利用点击获得使用哪个组件的信息,使用switch语句,当id与条件匹配,就执行下面的语句
public void onClick(View v){
switch (v.getId()){
case R.id.linearlayout_weixin:
reImage(0);
showfragment(0);
break;
case R.id.linearlayout_config:
reImage(3);
showfragment(1);
break;
case R.id.linearlayout_contact:
reImage(2);
showfragment(2);
break;
case R.id.linearlayout_friend:
reImage(1);
showfragment(3);
break;
default:
break;
}
}
6.图标反馈函数reimage():
通过对图标明暗的改变,来区别正在使用哪个组件
分别准备了正常和点击后的两组图标,在函数开头,将所有的图标初始化,都变为正常,利用switch语句来控制哪个组件变为点击后的图标.
public void reImage(int i)
{
imageView1.setImageResource(R.drawable.tab_weixin_normal);
imageView2.setImageResource(R.drawable.tab_find_frd_normal);
imageView3.setImageResource(R.drawable.tab_address_normal);
imageView4.setImageResource(R.drawable.tab_settings_normal);
switch (i)
{
case 0:
imageView1.setImageResource((R.drawable.tab_weixin_pressed));
break;
case 1:
imageView2.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
imageView3.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
imageView4.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
}
