- 项目内容
- 主要技术
- 具体过程及代码
- 顶部设计top.xml
- 底部设计bottom.xml
- 主要页面activity_main.xml
- Fragment实现页面切换
- 结果展示
- gitee代码地址
根据课程实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换
主要技术使用布局（layouts）和分段（fragment），对控件进行点击监听
具体过程及代码分为四个板块，包括xml文件设计和java文件设计
顶部设计top.xml点击新建top.xml文件，选择水平排列，拖入组件标题，调整背景颜色，字体颜色和大小，文字居中
代码
效果展示
底部设计共八个板块，包括图片和文字，运用LinearLayout（horizontal）构造外部，内部包括四个Linearlayout（vertical)，每个中包括image和text。为了让内部四板块垂直布局均匀分布，设置android:layout_weight=“1”。文字更改字号，android:gravity="center"居中。
代码
效果展示
运用LinearLayout布局，拖入FragmentLayout，运用include引入顶部界面top.xml和底部界面bottom.xml。
代码
效果展示
- 建立四个fragment java文件，分别对应不同xml界面
2.“微信”界面xml文件代码
效果展示
3.完成文件MainActivity实现监听和切换功能
创建对象并进行初始化
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Fragment wxFragment = new wxFragment();
private Fragment peopleFragment = new peopleFragment();
private Fragment findFragment = new findFragment();
private Fragment myFragment = new myFragment();
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;
private TextView textView1;
private TextView textView2;
private TextView textView3;
private TextView textView4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.vx);
linearLayout2 = findViewById(R.id.people);
linearLayout3 = findViewById(R.id.find);
linearLayout4 = findViewById(R.id.my);
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);
linearLayout1.setOnClickListener((View.OnClickListener) this);
linearLayout2.setOnClickListener((View.OnClickListener) this);
linearLayout3.setOnClickListener((View.OnClickListener) this);
linearLayout4.setOnClickListener((View.OnClickListener) this);
initFragment();
ShowFragment(0);
}
配置对象进行监听
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.vx);
linearLayout2 = findViewById(R.id.people);
linearLayout3 = findViewById(R.id.find);
linearLayout4 = findViewById(R.id.my);
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);
linearLayout1.setOnClickListener((View.OnClickListener) this);
linearLayout2.setOnClickListener((View.OnClickListener) this);
linearLayout3.setOnClickListener((View.OnClickListener) this);
linearLayout4.setOnClickListener((View.OnClickListener) this);
initFragment();
ShowFragment(0);
}
添加切换的三个界面
private void initFragment() {
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.frame,wxFragment);
transaction.add(R.id.frame,peopleFragment);
transaction.add(R.id.frame,findFragment);
transaction.add(R.id.frame,myFragment);
transaction.commit();
}
隐藏除该展示页面外的其他页面
private void hideFragment(FragmentTransaction transaction){
transaction.hide(wxFragment);
transaction.hide(findFragment);
transaction.hide(peopleFragment);
transaction.hide(myFragment);
}
控制展示不同页面
private void ShowFragment(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(wxFragment);
break;
case 1:
transaction.show(peopleFragment);
break;
case 2:
transaction.show(findFragment);
break;
case 3:
transaction.show(myFragment);
break;
default:
break;
}
transaction.commit();
}
选择页面后，还原其他页面的图标和字体
private void hide(){
imageView1.setColorFilter(Color.WHITE);
imageView2.setColorFilter(Color.WHITE);
imageView3.setColorFilter(Color.WHITE);
imageView4.setColorFilter(Color.WHITE);
textView1.setTextColor(Color.BLACK);
textView2.setTextColor(Color.BLACK);
textView3.setTextColor(Color.BLACK);
textView4.setTextColor(Color.BLACK);
}
图标和字体更改颜色
@Override
public void onClick(View view) {
switch(view.getId()){
case R.id.vx:
ShowFragment(0);
hide();
imageView1.setColorFilter(Color.GREEN);
textView1.setTextColor(Color.GREEN);
break;
case R.id.people:
ShowFragment(1);
hide();
imageView2.setColorFilter(Color.GREEN);
textView2.setTextColor(Color.GREEN);
break;
case R.id.find:
ShowFragment(2);
hide();
imageView3.setColorFilter(Color.GREEN);
textView3.setTextColor(Color.GREEN);
break;
case R.id.my:
ShowFragment(3);
hide();
imageView4.setColorFilter(Color.GREEN);
textView4.setTextColor(Color.GREEN);
break;
default:
break;
}
结果展示
项目gitee代码
