首先自定义一个TableView继承LinearLayout//
/** * 因为底部导航栏下面的四个小模块都一样的布局 * 所以此自定义类是四个小模块中的一个 */ public class TableView extends LinearLayout { //选中的图片id private int chooseResId; //未选中的图片id private int normalResId; //自定义的TextView private TextView title; //自定义的ImageView private ImageView icon; //TextView中的内容 String mTitleStr; //从调用者那里获取图片及文字内容 public TableView(Context context,int choooseResId, int normalResId, String title) { super(context); this.chooseResId = choooseResId; this.normalResId = normalResId; this.mTitleStr = title; intiView(); } /** * 设置自定义布局 */ public void intiView(){ //设置布局为垂直 setOrientation(VERTICAL); //设置每个小模块剧中 setGravity(Gravity.CENTER); icon=new ImageView(getContext()); //图标属性 LayoutParams icParams=new LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT ); //设置图片的属性 icon.setLayoutParams(icParams); //一开始添加的是正常的图片 icon.setImageResource(normalResId); //然后把设置好的图片添加到子布局中 addView(icon); //标题 title=new TextView(getContext()); LayoutParams titleParams=new LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT ); //设置内容属性 title.setLayoutParams(titleParams); //添加传进来的内容 title.setText(mTitleStr); //然后把设置好的内容添加到子布局中 addView(title); } /** * 设置选中和未选中状态的颜色情况 * @param selected */ @Override public void setSelected(boolean selected) { if(selected){ //选中 if(icon!=null){ icon.setImageResource(chooseResId); }if(title!=null){ title.setTextColor(Color.GREEN); } }else{ if(icon!=null){ icon.setImageResource(normalResId); }if(title!=null){ title.setTextColor(Color.GRAY); } } } }
然后写一个TableBean类来存放内容和图片
public class TableBean { //内容 String title; //选中的图片 int chooseResId; //未选中的图片 int normalResId; public TableBean(String title, int chooseResId, int normalResId) { this.title = title; this.chooseResId = chooseResId; this.normalResId = normalResId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public int getChooseResId() { return chooseResId; } public void setChooseResId(int chooseResId) { this.chooseResId = chooseResId; } public int getNormalResId() { return normalResId; } public void setNormalResId(int normalResId) { this.normalResId = normalResId; } }
再然后自定义一个底部导航的BottomLayout继承LinearLayout的类
然后设置布局/** *这个自定义类是实现底部导航栏 */ public class BottomLayout extends LinearLayout { public BottomLayout(Context context) { super(context); } public BottomLayout(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public BottomLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } ViewPager viewPager; public void setViewPager(ViewPager viewPager, ArrayList<TableBean> tableBeens){ this.viewPager=viewPager; initTableView(tableBeens); //创建完每个小模块之后,使viewPager和下面的每个小模块配合起来 viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { for(int i=0;i<getChildCount();i++){ //得到子View设置点击状态 getChildAt(i).setSelected(position==i?true:false); if(mBottomLayoutChageListener!=null){ mBottomLayoutChageListener.onPagerSelect(position); } } } }); }private BottomLayoutChageListener mBottomLayoutChageListener; public void setmBottomLayoutChageListener(BottomLayoutChageListener mBottomLayoutChageListener) { this.mBottomLayoutChageListener = mBottomLayoutChageListener; } public interface BottomLayoutChageListener{ void onPagerSelect(int position); } /** * 此方法是自定义的底部导航栏 * @param tableBean */ public void initTableView(ArrayList<TableBean> tableBean){ //根据ViewPager的Adapter的个数来添加自定义的TableView for(int i=0;i<viewPager.getAdapter().getCount();i++){ //往TableView中添加数据 TableView tableView=new TableView(getContext(),tableBean.get(i).getChooseResId(),tableBean.get(i).getNormalResId(), tableBean.get(i).getTitle()); //设置每个小模块的属性 LayoutParams layoutParams=new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.gravity= Gravity.CENTER; layoutParams.weight=1; tableView.setLayoutParams(layoutParams); final int final1=i; //每个小模块的点击事件,点击就跳转到相应的界面 tableView.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { viewPager.setCurrentItem(final1); } }); //设置如果是第一个界面就设置为选中状态 if(i==0){ tableView.setSelected(true); } //然后把子tableView添加进去 addView(tableView); } }}//此接口回调是进行首页的toolbar的内容就是小模块的内容
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.jf.test.MainActivity"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorAccent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent"> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="首页" android:textColor="@android:color/white" android:gravity="center_vertical"/> </LinearLayout> </android.support.v7.widget.Toolbar> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"> </android.support.v4.view.ViewPager> <com.example.jf.test.BottomLayout android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="60dp"> </com.example.jf.test.BottomLayout> </LinearLayout>
最后在主方法中添加代码
public class MainActivity extends AppCompatActivity { @BindView(R.id.tv_name) TextView tvName; @BindView(R.id.vp) ViewPager vp; @BindView(R.id.bottom) BottomLayout bottom; ArrayList<TableBean> mTableBeens; private ArrayList<Fragment> fragments; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); mTableBeens=new ArrayList<>(); fragments = new ArrayList<>(); fragments.add(new Fragment1()); fragments.add(new Fragment2()); fragments.add(new Fragment3()); fragments.add(new Fragment4()); mTableBeens.add(new TableBean("首页",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); mTableBeens.add(new TableBean("学习",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); mTableBeens.add(new TableBean("发现",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); mTableBeens.add(new TableBean("我的",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); vp.setAdapter(new BottomAdapter(getSupportFragmentManager())); //设置vp的个数,防止加载崩溃 vp.setOffscreenPageLimit(fragments.size()); //把vp和底部导航的数据传过去 bottom.setViewPager(vp,mTableBeens); BottomLayout.BottomLayoutChageListener bottomLayoutChageListener=new BottomLayout.BottomLayoutChageListener() { @Override public void onPagerSelect(int position) { //设置顶部的名字 tvName.setText(mTableBeens.get(position).getTitle()); } }; // bottom.setmBottomLayoutChageListener(bottomLayoutChageListener); } public class BottomAdapter extends FragmentPagerAdapter { public BottomAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } } }