导航栏选择器

先准备每组两张图片作为背景颜色的变换(也就是图片的变换),宽展性比较好

实现的效果:


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.需要把ToolBarUtilposition传给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();
        }
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章