一般App导航布局都是底部菜单栏,效果如下所示
这种效果一般是ViewPager+Fragment打造的,这篇文章是对VF最简单的使用说明,下图是包结构
MyAdapter类
public class MyAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;
public MyAdapter(FragmentManager fm,List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list==null?0:list.size();
}
}
OneFragment类
总共四个Fragment,四个都大致相同,所以其他三个可以参考这一个来写
public class OneFragment extends Fragment {
public OneFragment() {
// 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_one, container, false);
}
}
MainActivity类
最重要的是这个Activity,其实底部导航保证选中的底部菜单和Fragment是一个位置,就是说我点第几个底部按钮就要跳转到第几个Fragment,所以我们才会要定义currentPosition位置,来记录当前选中的位置
package com.viewpager;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.viewpager.adapter.MyAdapter;
import com.viewpager.fragments.FourFragment;
import com.viewpager.fragments.OneFragment;
import com.viewpager.fragments.ThreeFragment;
import com.viewpager.fragments.TwoFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private int currentPosition;
private ViewPager vp;
private List<Fragment> list;
private MyAdapter adapter;
private RadioGroup rg;
private RadioButton n1;
private RadioButton n2;
private RadioButton n3;
private RadioButton n4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp = (ViewPager) findViewById(R.id.vp);
rg = (RadioGroup) findViewById(R.id.rg);
n1 = (RadioButton) findViewById(R.id.n1);
n2 = (RadioButton) findViewById(R.id.n2);
n3 = (RadioButton) findViewById(R.id.n3);
n4 = (RadioButton) findViewById(R.id.n4);
initData();
initView();
}
private void initView() {
adapter = new MyAdapter(getSupportFragmentManager(),list);
vp.setAdapter(adapter);
//RadioGroup设置监听事件
vp.addOnPageChangeListener(onPageChangeListener);
rg.setOnCheckedChangeListener(onCheckedChangeListener);
((RadioButton)rg.getChildAt(0)).setChecked(true);
}
private void initData() {
list = new ArrayList<>();
list.add(new OneFragment());
list.add(new TwoFragment());
list.add(new ThreeFragment());
list.add(new FourFragment());
}
private RadioGroup.OnCheckedChangeListener onCheckedChangeListener=new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
initColor();
switch (checkedId) {
case R.id.n1:
currentPosition=0;
n1.setBackgroundColor(Color.YELLOW);
break;
case R.id.n2:
currentPosition=1;
n2.setBackgroundColor(Color.YELLOW);
break;
case R.id.n3:
currentPosition=2;
n3.setBackgroundColor(Color.YELLOW);
break;
case R.id.n4:
currentPosition=3;
n4.setBackgroundColor(Color.YELLOW);
break;
}
vp.setCurrentItem(currentPosition);
}
};
private void initColor() {
n1.setBackgroundColor(Color.WHITE);
n2.setBackgroundColor(Color.WHITE);
n3.setBackgroundColor(Color.WHITE);
n4.setBackgroundColor(Color.WHITE);
}
private ViewPager.OnPageChangeListener onPageChangeListener=new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
currentPosition = position;
((RadioButton) rg.getChildAt(currentPosition)).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
}
结尾附上这个demo的地址