目录
实现过程
一、界面框架设计思路
1.top.xml
2.bottom.xml
3.整体框架activity_main.xml
二、交互设计思路
1.FragmentManager的创建
2.创建不同的Fragment.java及layout
3.实现Fragment的隐藏和显示
4.完善底部导航
5.对控件进行监听实现交互
最终APP界面效果展示：
总结
项目源代码地址：
本次作业的内容为：根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换。
应用的技术是：使用布局（layouts）和分段（fragment），对控件进行点击监听。
实现过程
一、界面框架设计思路
我们发现对于APP的四个tab页面来说，每个页面都是由三个部分组成的：顶部的固定部分，用来显示自己APP的名字；中间部分的主页面，用来显示不同页面的主内容；底部的导航页面，用来帮助使用者清晰的切换页面。同时由于要实现页面之间的交互（中间的主内容随底部导航切换而切换），因此我们的设计思路为设计三个框架进行拼接：顶部的top、底部的bottom、中间的分段以及最后的总框架。以下是各部分的实现方法：
1.top.xml
该部分的实现方法为：最外层使用一个水平的linearlayout布局，然后使用一个textview即可。
2.bottom.xml
该部分的设计思路如下：在该部分中一共有四个图片以及四个文本，每一个文本和一个图片组成一个垂直方向的元素，四个元素又组成一个水平方向的大框架。因此对于此部分，最外层采用水平的linearlayout的布局，在水平布局下又放四个垂直方向的linearlayout的布局，在每个垂直布局下又放上一个imageview和一个textview（imageview放在textview上层）即可。
注：以上为水平布局的代码及一个垂直布局的代码，另外三个垂直布局代码修改一些参数即可。
3.整体框架activity_main.xml
整体框架就是将top，bottom以及中间的主内容进行拼接，那么最外层就需要使用一个垂直方向的lineaarlayout，然后将top和bottom部分liclude进来（top在上，bottom在下，中间放主内容），同时中间的主内容使用framelayout，以便进行接下来的交互设计。
二、交互设计思路
想要实现四个tab界面的交互，那么就需要activity调用FragmentManager来获取不同的Fragment，因此首先我们需要创建四个不同的Fragment，用于创建不同tab页面的主页面，之后通过一系列的调用实现不同页面的交互，以下为实现过程：
1.FragmentManager的创建
首先定义FragmentManager并创建相应的函数
private FragmentManager fragmentManager;
private void initFragment() {
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.id_content, newsFragment);
transaction.add(R.id.id_content, settingFragment);
transaction.add(R.id.id_content, friendsFragment);
transaction.add(R.id.id_content, discoveryFragment);
transaction.commit();
2.创建不同的Fragment.java及layout
package com.example.myworkyxf;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;
public class discoveryFragment extends Fragment {
public discoveryFragment() {
// 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_discovery, container, false);
}
}
注：其余三个同理，修改参数即可
3.实现Fragment的隐藏和显示
我们需要将四个Fragment隐藏起来，只有在点击相应的导航时才会出现相应的Frgment，而另外三个将会继续隐藏起来，那么实现方法如下：
隐藏Fragment
private void hideFragment(FragmentTransaction transaction) {
transaction.hide(newsFragment);
transaction.hide(settingFragment);
transaction.hide(friendsFragment);
transaction.hide(discoveryFragment);
}
显示Fragment
private void showfragment(int i) {
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(newsFragment);
break;
case 1:
transaction.show(friendsFragment);
break;
case 2:
transaction.show(discoveryFragment);
break;
case 3:
transaction.show(settingFragment);
break;
default:
break;
}
transaction.commit();
}
4.完善底部导航
我们在切换界面的时候，为了提升用户的体验感，会让底部导航的文字和图标也发生相应的变化，那么我们可以通过以下方式实现，选中两组颜色不同的图标，同时设置两组不同的文本颜色，在点击不同的导航时相应layout的图标和文字会发生改变：
private ImageView imageView1,imageView2,imageView3,imageView4;
private TextView textView1,textView2,textView3,textView4;
private void showcolor(int i){
imageView1.setImageResource(R.drawable.news);
textView1.setTextColor(Color.BLACK);
imageView2.setImageResource(R.drawable.friends);
textView2.setTextColor(Color.BLACK);
imageView3.setImageResource(R.drawable.discovery);
textView3.setTextColor(Color.BLACK);
imageView4.setImageResource(R.drawable.setting);
textView4.setTextColor(Color.BLACK);
switch (i){
case 0:
imageView1.setImageResource(R.drawable.news1);
textView1.setTextColor(Color.GREEN);
break;
case 1:
imageView2.setImageResource(R.drawable.friends1);
textView2.setTextColor(Color.GREEN);
break;
case 2:
imageView3.setImageResource(R.drawable.discovery1);
textView3.setTextColor(Color.GREEN);
break;
case 3:
imageView4.setImageResource(R.drawable.setting1);
textView4.setTextColor(Color.GREEN);
break;
default:
break;
}
}
5.对控件进行监听实现交互
对控件的监听放在了onCreate中，同时用到了onclick(),通过利用switch可以使得点击不同的导航可以获得不同layout的id从而实现显示不同的tab页面，实现了交互。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
linearLayout_news=findViewById(R.id.linearLayout_news);
linearLayout_friends=findViewById(R.id.linearLayout_friends);
linearLayout_discovery=findViewById(R.id.linearLayout_discovery);
linearLayout_setting=findViewById(R.id.linearLayout_setting);
linearLayout_news.setonClickListener(this);
linearLayout_friends.setonClickListener(this);
linearLayout_discovery.setonClickListener(this);
linearLayout_setting.setonClickListener(this);
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
textView1=findViewById(R.id.textView1);
textView2=findViewById(R.id.textView2);
textView3=findViewById(R.id.textView3);
textView4=findViewById(R.id.textView4);
initFragment();
}
@Override
public void onClick(View v){
switch (v.getId()){
case R.id.linearLayout_news:
showfragment(0);
showcolor(0);
break;
case R.id.linearLayout_friends:
showfragment(1);
showcolor(1);
break;
case R.id.linearLayout_discovery:
showfragment(2);
showcolor(2);
break;
case R.id.linearLayout_setting:
showfragment(3);
showcolor(3);
break;
default:
break;
}
}
最终APP界面效果展示：
总结
本次作业初步使我接触到了安卓开发并对安卓开发有了初步的了解。
项目源代码地址：
Android Studio: android studio
