此处放一个例子,可以复制四个;
2.头部页面
1.vertical设计
3.中间页面
需要囊括头部和尾部页面,中间使用frame布局
四个切换页面
1.给出一个例子
复制出其他的4个
二.外观展示 三.内部各部分代码编写展示一个模块的代码
public class weixin extends Fragment {
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
private String mParam1;
private String mParam2;
public weixin() {
// Required empty public constructor
}
public static weixin newInstance(String param1, String param2) {
weixin fragment = new weixin();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@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);
}
}
重点是重写以下方法
@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);
}
复制出其他四个
四.内部代码整合
既设计监听器和绑定其他四个界面
先附上代码
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Fragment w=new weixin();
private Fragment s=new settings();
private Fragment c=new contactpeople();
private Fragment f=new friendcircle();
private LinearLayout Lw;
private LinearLayout Ls;
private LinearLayout Lc;
private LinearLayout Lf;
private ImageButton Bw;
private ImageButton Bs;
private ImageButton Bc;
private ImageButton Bf;
private FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE );
setContentView(R.layout.activity_main);
initView();
initFragment();
initevent();
selectFragment(0);
}
@Override
public void onClick(View view) {
switch(view.getId())
{
case R.id.id_tab_weixin:
case R.id.imageButton1:
selectFragment(0);
break;
case R.id.id_tab_contactpeople:
case R.id.imageButton2:
selectFragment(1);
break;
case R.id.id_tab_friendcircle:
case R.id.imageButton3:
selectFragment(2);
break;
case R.id.id_tab_settings:
case R.id.imageButton4:
selectFragment(3);
break;
default:
break;
}
}
private void initFragment(){
fm=getSupportFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_content,w);
transaction.add(R.id.id_content,s);
transaction.add(R.id.id_content,c);
transaction.add(R.id.id_content,f);
transaction.commit();
}
private void initView(){
Lw=findViewById(R.id.id_tab_weixin);
Ls=findViewById(R.id.id_tab_settings);
Lc=findViewById(R.id.id_tab_contactpeople);
Lf=findViewById(R.id.id_tab_friendcircle);
Bw=findViewById(R.id.imageButton1);
Bs=findViewById(R.id.imageButton2);
Bc=findViewById(R.id.imageButton3);
Bf=findViewById(R.id.imageButton4);
}
private void initevent(){
Lw.setonClickListener(this);
Ls.setonClickListener(this);
Lc.setonClickListener(this);
Lf.setonClickListener(this);
}
private void hideview(FragmentTransaction transaction){
transaction.hide(w);
transaction.hide(s);
transaction.hide(c);
transaction.hide(f);
}
private void selectFragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideview(transaction);
switch (i){
case 0:
transaction.show(w);
//mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(s);
//mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(c);
// mImgContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(f);
// mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
}
以下分为几个函数逐一解释
首先是成员变量
private Fragment w=new weixin();
private Fragment s=new settings();
private Fragment c=new contactpeople();
private Fragment f=new friendcircle();
private LinearLayout Lw;
private LinearLayout Ls;
private LinearLayout Lc;
private LinearLayout Lf;
private ImageButton Bw;
private ImageButton Bs;
private ImageButton Bc;
private ImageButton Bf;
首先是绑定的四个中间界面fragment,然后是底部图表的LinearLayout.最后是fragmentmanager
然后是三个初始化
private void initFragment(){
fm=getSupportFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_content,w);
transaction.add(R.id.id_content,s);
transaction.add(R.id.id_content,c);
transaction.add(R.id.id_content,f);
transaction.commit();
}
private void initView(){
Lw=findViewById(R.id.id_tab_weixin);
Ls=findViewById(R.id.id_tab_settings);
Lc=findViewById(R.id.id_tab_contactpeople);
Lf=findViewById(R.id.id_tab_friendcircle);
Bw=findViewById(R.id.imageButton1);
Bs=findViewById(R.id.imageButton2);
Bc=findViewById(R.id.imageButton3);
Bf=findViewById(R.id.imageButton4);
}
private void initevent(){
Lw.setonClickListener(this);
Ls.setonClickListener(this);
Lc.setonClickListener(this);
Lf.setonClickListener(this);
}
分别绑定了对应的view,和设置了监听
private void hideview(FragmentTransaction transaction){
transaction.hide(w);
transaction.hide(s);
transaction.hide(c);
transaction.hide(f);
}
private void selectFragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideview(transaction);
switch (i){
case 0:
transaction.show(w);
break;
case 1:
transaction.show(s);
//mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(c);
// mImgContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(f);
// mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
选择fragment的函数(switch语句)
点击和创建的重写函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE );
setContentView(R.layout.activity_main);
initView();
initFragment();
initevent();
selectFragment(0);
}
@Override
public void onClick(View view) {
switch(view.getId())
{
case R.id.id_tab_weixin:
case R.id.imageButton1:
selectFragment(0);
break;
case R.id.id_tab_contactpeople:
case R.id.imageButton2:
selectFragment(1);
break;
case R.id.id_tab_friendcircle:
case R.id.imageButton3:
selectFragment(2);
break;
case R.id.id_tab_settings:
case R.id.imageButton4:
selectFragment(3);
break;
default:
break;
}
}
在onclick事件内调用selectFragment方法完成逻辑
然后换上自己想要ifont矢量图文件
ps:修正了在bottom中的imagebutton改为imageview
不然会出现图片无法显示完全:
gitee:
