1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；
top.xml设置效果为：
在微信界面顶部的中间位置设置“微信”中文标识，颜色为白色，背景为黑色背景。
其中xml文件中代码的意义为：
（1）android:layout_width=“wrap_content”
width表示top布局的宽度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；
（2）android:layout_height=“wrap_content”
width表示top布局的高度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；
（3）android:layout_height=“wrap_content”
width表示top布局的高度，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器；
（4）android:layout_weight=“1”
layout_weight = 1表示平均分配长度无法充满父布局；
（5）android:background="#000000"
background表示为组件设置一个背景颜色，结合现实app，我们采用黑色背景白色文字书写；
（6）android:gravity=“center”
gravity表示textView中的文字相对于TextView的对齐方式，中心对齐；
（7）android:text=“微信”
text表示top中要显示的文字“微信”；
（8）android:textColor="@color/white"
结合（5），我们设置“微信”文字的颜色为白色（背景为黑色）；
其中：
（1）LinearLayout
android:orientation=“horizontal”表示水平排列；
（2）ImageView
表示对内部图片的高度和宽度的处理方式，详见代码说明；
activity_main.xml 文件表示对主页面显示的内容布局。我们要将制作好的top.xml和bottom.xml文件导入进来，除了顶部图像和底部按钮之外，我们还需要写一个中间内容content，content文本表示中间界面的介绍，content是应对Fragment，所以要使用frameLayout作为容器。
2.4配置Fragment类（以第一个片段为例）
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_weixin, container, false);
}
}
以微信界面为例，将Fragment文件底部的函数改成R.layout.fragment_weixin用来将weixin.xml文件与bottom.xml和top.xml连接起来。后面三个按键相类似。
2.5控制逻辑部分
1.定义fragment对象
// 定义四个tab的实例
private Fragment weixinFragment=new weixinFragment();
private Fragment tongxunluFragment=new tongxunluFragment();
private Fragment faxianFragment=new faxianFragment();
private Fragment shezhiFragment=new shezhiFragment();
2.将四个按键实例放入manager栈中
// 将四个tab实例，压入到FragmentManager栈中
private void initFragment() {
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.id_content, weiixn);
transaction.add(R.id.id_content, tongxunlu);
transaction.add(R.id.id_content, faxian);
transaction.add(R.id.id_content, shezhi);
transaction.commit();
hideFragment(transaction);
}
3.隐藏fragment
由于系统界面启动时，我们默认隐藏4个fragment片段
// 隐藏四个fragment
private void hideFragment(FragmentTransaction transaction){
transaction.hide(tab1);
transaction.hide(tab2);
transaction.hide(tab3);
transaction.hide(tab4);
}
4.存储bottom中4个LinearLayout的对象
// 声明存储bottom中四个LinearLayout的对象
private LinearLayout LinearLayout1;
private LinearLayout LinearLayout2;
private LinearLayout LinearLayout3;
private LinearLayout LinearLayout4;
private TextView text1;
private TextView text2;
private TextView text3;
private TextView text4;
private ImageView imageWeixin;
private ImageView imagetongxunlu;
private ImageView imagefaxian;
private ImageView imageshezhi;
2.6设置监听
1.初始化监听函数
// 初始化监听事件
private void initEvent() {
LinearLayout1.setOnClickListener(this);
LinearLayout2.setOnClickListener(this);
LinearLayout3.setOnClickListener(this);
LinearLayout4.setOnClickListener(this);
}
2.重写监听函数
public void onClick(View v) {
//用户点击任一按钮时，将所有按钮重置为原来的颜色
resetImage();
switch (v.getId()){
case R.id.tab_weixin:
setSelect(0);
break;
case R.id.tab_tongxunlu:
setSelect(1);
break;
case R.id.tab_faxian:
setSelect(2);
break;
case R.id.tab_shezhi:
setSelect(3);
break;
default:
break;
}
}
3.定义监听函数setSlect
// 定义监听的处理函数
private void setSelect(int i){
FragmentTransaction transaction = fm.beginTransaction();
// 检测到点击事件，则隐藏所有片段，仅显示用户点击的片段
hideFragment(transaction);
switch (i){
case 0:
transaction.show(weixinFragment);
text1.setTextColor(Color.parseColor("#07C160"));
imageView.setImageResource(R.drawable.duihua2);
break;
case 1:
transaction.show(tongxunluFragment);
text2.setTextColor(Color.parseColor("#07C160"));
imageView2.setImageResource(R.drawable.pengyoufill2);
break;
case 2:
transaction.show(faxianFragment);
text3.setTextColor(Color.parseColor("#07C160"));
imageView3.setImageResource(R.drawable.tongxunlutianchong2);
break;
case 3:
transaction.show(shezhiFragment);
text4.setTextColor(Color.parseColor("#07C160"));
imageView4.setImageResource(R.drawable.shezhi2);
break;
default:
break;
}
transaction.commit();
}
4.定义清空函数
// 定义将所有图片与文字重置为原来颜色的函数
public void resetImgText() {
text1.setTextColor(Color.parseColor("#FFFFFF"));
text2.setTextColor(Color.parseColor("#FFFFFF"));
text3.setTextColor(Color.parseColor("#FFFFFF"));
text4.setTextColor(Color.parseColor("#FFFFFF"));
imageView.setImageResource(R.drawable.duihua);
imageView2.setImageResource(R.drawable.pengyoufill);
imageView3.setImageResource(R.drawable.tongxunlutianchong);
imageView4.setImageResource(R.drawable.shezhi);
}
5.调用相关函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 取消标题栏
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// 调用相关函数
initFragment();
initView();
initEvent();
}
三、运行效果
1、打开APP（绿色光标）
2、点击按钮显示“发现”界面（绿色光标）
https://gitee.com/qdasdzz/wechat-interface-design.git
