提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录- 一、实验内容
- 1.效果图
- 2.工程目录结构
- 二、核心技术
- 三、实验步骤
- 1.Top界面
- 布局文件(top.xml)
- 设计界面
- 2.Button界面
- 控件关系
- 资源图片
- 布局文件(button.xml
- 设计界面
- 3.activity_main界面
- 布局文件
- 设计界面
- 控件关系
- 4.Fragment部分
- 需要的类：
- 布局文件目录：
- 布局文件：
- 设计界面（之一）
- 5.编写MainActivity.java
- 四、运行结果
- 五、仓库地址
一、实验内容
实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换。
1.效果图 2.工程目录结构 二、核心技术使用布局（layout）和分段（fragment），对控件进行点击监听。
三、实验步骤主要的实验步骤如下
1.Top界面布局文件(top.xml) 设计界面 2.Button界面
控件关系 资源图片
图片来源阿里巴巴矢量库
设计界面 3.activity_main界面
布局文件
设计界面 控件关系 4.Fragment部分
需要的类： 布局文件目录：
在类简单的重写onCreateView()方法，其他方法可以按需重写!
（如下，其余三个文件改写方法相同）
package com.firsttest.myapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
public class addrFragment extends Fragment {
private View view;
private String content;
public addrFragment(String content){
this.content=content;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view=inflater.inflate(R.layout.fragment_addr,container,false);
TextView textView=(TextView)view.findViewById(R.id.textView_addr);
textView.setText(content);
return view;
}
}
布局文件：
设计界面（之一） 5.编写MainActivity.java
package com.firsttest.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.SurfaceControl;
import android.view.View;
import android.widget.Button;
import android.widget.frameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import static com.firsttest.myapplication.R.id.imageView_1;
import static com.firsttest.myapplication.R.id.imageView_2;
import static com.firsttest.myapplication.R.id.imageView_3;
import static com.firsttest.myapplication.R.id.imageView_4;
import static com.firsttest.myapplication.R.id.textView_1;
import static com.firsttest.myapplication.R.id.textView_2;
import static com.firsttest.myapplication.R.id.textView_3;
import static com.firsttest.myapplication.R.id.textView_4;
public class MainActivity extends AppCompatActivity implements View.onClickListener {
private LinearLayout ll_1;
private LinearLayout ll_2;
private LinearLayout ll_3;
private LinearLayout ll_4;
private TextView tv_1;
private TextView tv_2;
private TextView tv_3;
private TextView tv_4;
private ImageView iv_1;
private ImageView iv_2;
private ImageView iv_3;
private ImageView iv_4;
private TextView txt_setting;
private frameLayout fl_content;
private wechatFragment fg1;
private addrFragment fg2;
private findFragment fg3;
private meFragment fg4;
private FragmentManager fManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager=getSupportFragmentManager();
bindViews();
ll_1.performClick();
}
//事件绑定
private void bindViews() {
tv_1=(TextView) findViewById(textView_1);
tv_2=(TextView)findViewById(textView_2);
tv_3=(TextView)findViewById(textView_3);
tv_4=(TextView)findViewById(textView_4);
iv_1=(ImageView)findViewById(imageView_1);
iv_2=(ImageView)findViewById(imageView_2);
iv_3=(ImageView)findViewById(imageView_3);
iv_4=(ImageView)findViewById(imageView_4);
ll_1=(LinearLayout)findViewById(R.id.linearlayout_1);
ll_2=(LinearLayout)findViewById(R.id.linearlayout_2);
ll_3=(LinearLayout)findViewById(R.id.linearlayout_3);
ll_4=(LinearLayout)findViewById(R.id.linearlayout_4);
fl_content=(frameLayout)findViewById(R.id.fl_content);
ll_1.setOnClickListener(this);//点击事件绑定
ll_2.setOnClickListener(this);
ll_3.setOnClickListener(this);
ll_4.setOnClickListener(this);
}
//重置选中状态
private void setSelected(){
ll_1.setSelected(false);
ll_2.setSelected(false);
ll_3.setSelected(false);
ll_4.setSelected(false);
}
private void hideAllFragment(FragmentTransaction fragmentTransaction){
if(fg1!=null)fragmentTransaction.hide(fg1);
if(fg2!=null)fragmentTransaction.hide(fg2);
if(fg3!=null)fragmentTransaction.hide(fg3);
if(fg4!=null)fragmentTransaction.hide(fg4);
}
//重置颜色，没有选中就为灰色
private void turnColorToGray(){
tv_1.setTextColor(0xd0d0d0d0);//灰色
tv_2.setTextColor(0xd0d0d0d0);
tv_3.setTextColor(0xd0d0d0d0);
tv_4.setTextColor(0xd0d0d0d0);
iv_1.setImageResource(R.drawable.wechat_);//替换为灰色的图片
iv_2.setImageResource(R.drawable.addr_);
iv_3.setImageResource(R.drawable.find_);
iv_4.setImageResource(R.drawable.me_);
}
@Override
public void onClick(View view) {
FragmentTransaction fTransaction=fManager.beginTransaction();
hideAllFragment(fTransaction);turnColorToGray();
switch(view.getId()){
case R.id.linearlayout_1:
setSelected();
tv_1.setTextColor(0xff1B940A);iv_1.setImageResource(R.drawable.wechat);
//选中就着色
ll_1.setSelected(true);
if(fg1==null) {
fg1 = new wechatFragment("这是微信界面");
fTransaction.add(R.id.fl_content,fg1);
}
else{
fTransaction.show(fg1);
}
break;
case R.id.linearlayout_2:
setSelected();
tv_2.setTextColor(0xff1B940A);iv_2.setImageResource(R.drawable.addr);
ll_2.setSelected(true);
if(fg2==null) {
fg2 = new addrFragment("这是通讯录界面");
fTransaction.add(R.id.fl_content,fg2);
}
else{
fTransaction.show(fg2);
}break;
case R.id.linearlayout_3:
setSelected();
tv_3.setTextColor(0xff1B940A);iv_3.setImageResource(R.drawable.find);
ll_3.setSelected(true);
if(fg3==null) {
fg3 = new findFragment("这是发现页");
fTransaction.add(R.id.fl_content,fg3);
}
else{
fTransaction.show(fg3);
}break;
case R.id.linearlayout_4:
setSelected();
tv_4.setTextColor(0xff1B940A);iv_4.setImageResource(R.drawable.me);
ll_4.setSelected(true);
if(fg4==null) {
fg4 = new meFragment("这是个人页");
fTransaction.add(R.id.fl_content,fg4);
}
else{
fTransaction.show(fg4);
}break;
}
fTransaction.commit();
}
}
四、运行结果
gitee
