先准备每组两张图片作为背景颜色的变换(也就是图片的变换),宽展性比较好
实现的效果:
inflate_toolbar_bn.xml:
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content"> </TextView>
制作一个自定义组件:
public class ToolBarUtil { private List<TextView> mTextViews = new ArrayList<>(); public void createToolBar(LinearLayout mBotoom, String[] toolBarTitleArr, int[] iconArr) {
//toolBarTitleArr显示的文本,
for (int i = 0; i<toolBarTitleArr.length;i++) {//int i : toolBarTitleArr TextView tv = (TextView) View.inflate(mBotoom.getContext(), R.layout.inflate_toolbar_tn, null); tv.setText(toolBarTitleArr[i]); tv.setCompoundDrawablesWithIntrinsicBounds(0, iconArr[i], 0, 0); int width = 0; int height = LinearLayout.LayoutParams.MATCH_PARENT; LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, height); params.weight = 1; //设置权重 mBotoom.addView(tv,params); mTextViews.add(tv); //2.需要把ToolBarUtil的position传给MainActivity,这需要接口回调 final int finalI = i; tv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //3.在需要传值得地方,用就扣变量调用接口方法 mOnToolBarClickListener.onToolBarClick(finalI); } }); } } public void changeColor(int position) { for (TextView tv : mTextViews) { tv.setSelectAllOnFocus(false); } mTextViews.get(position).setSelected(true); } public interface onToolBarClickListener{ void onToolBarClick(int position); } //接口变量 onToolBarClickListener mOnToolBarClickListener; //提供一个公共方法,得到的调用 public void setOnToolBarClickListener(onToolBarClickListener onToolBarClickListener) { mOnToolBarClickListener = onToolBarClickListener; } }
activity_main.xml(在这里主要用LinearLayout作为底部导航栏的父布局
<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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="edu.wtu.sj.imdemo.acti.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:background="@color/colorPrimary" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <TextView android:id="@+id/tv_title" android:textColor="#fff" android:text="会 话" android:textSize="24sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content"/> </android.support.v7.widget.Toolbar> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp"> </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/main_bottom" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp"> </LinearLayout> </LinearLayout>
图片选择器:
select_food.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_food" android:state_pressed="true"/> <item android:drawable="@drawable/icon_food" android:state_selected="true"/> <item android:drawable="@drawable/icon_food_nor" android:state_pressed="false"/> </selector>select_friends.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/icon_frend" android:state_pressed="true"/> <item android:drawable="@drawable/icon_frend" android:state_selected="true"/> <item android:drawable="@drawable/icon_frends_nor" android:state_pressed="false"/> </selector>
MainActivity中的引用:
public class MainActivity extends AppCompatActivity { @InjectView(R.id.tv_title) TextView mTvTitle; @InjectView(R.id.toolbar) Toolbar mToolbar; @InjectView(R.id.view_pager) ViewPager mViewPager; @InjectView(R.id.main_bottom) LinearLayout mBottom; private ToolBarUtil mToolBarUtil; private String[] mtoolBarTitleArr = {"美食", "朋友圈"}; private int[] iconArr = {R.drawable.icon_message, R.drawable.icon_contact}; private List<Fragment> mFragments = new ArrayList<>(); private MyPagerAdapter pagerAdapter; //private ViewPager vp; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.inject(this); initView(); initData(); mToolBarUtil = new ToolBarUtil(); mToolBarUtil.createToolBar(mBottom,mtoolBarTitleArr,iconArr); mToolBarUtil.changeColor(0); //设置ViewPager滑动事件处理 initListener(); //设置底部工具栏事件处理 mToolBarUtil.setOnToolBarClickListener(new ToolBarUtil.onToolBarClickListener() { @Override public void onToolBarClick(int position) { mViewPager.setCurrentItem(position); } }); } private void initListener() { mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { /*position-点击滑动的界面位置(viewpager界面排序为0.1.2.3....) positionOffset-点击页面便宜整个屏幕的百分比 positionOffsetPixels-屏幕像素位置*/ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mToolBarUtil.changeColor(position); //记得添加 if (position == 1) { mTvTitle.setText("朋友圈"); } } @Override public void onPageScrollStateChanged(int state) { } }); } private void initView() { mToolbar.setTitle(""); setSupportActionBar(mToolbar); } private void initData(){ SessionFragment sessionFragment = new SessionFragment(); ComtactFragment comtactFragment = new ComtactFragment(); mFragments.add(sessionFragment); mFragments.add(comtactFragment); pagerAdapter = new MyPagerAdapter(getSupportFragmentManager()){ }; mViewPager.setAdapter(pagerAdapter); } class MyPagerAdapter extends FragmentPagerAdapter{ public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } } }