導航欄選擇器

先準備每組兩張圖片作爲背景顏色的變換(也就是圖片的變換),寬展性比較好

實現的效果:


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();
        }
    }
}

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