重写ViewPager实现Android导航栏

最后实现的效果大概是这个样子的

要实现这个效果首先要重写一个PageAdapter

1.PageAdapter

package com.example.noname.learnrecord;/** * Created by NonAme on 2017/5/8. */import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;public class PageAdapter extends PagerAdapter {    private List<View> mViews;    public PageAdapter(List<View> mViews) {        this.mViews = mViews;    }    /**     * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount()     * void destroyItem(ViewGroup container, int position,Object object) Object     * instantiateItem(ViewGroup container, int position)     */    // 从当前container中删除指定位置的view    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mViews.get(position));    }    // 初始化view    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mViews.get(position);        container.addView(view);        return view;    }    @Override    public boolean isViewFromObject(View arg0, Object arg1) {        return arg0 == arg1;    }    // 返回要滑动的view个数    @Override    public int getCount() {        return mViews.size();    }}

然后把需要用的页面放入一个List里面在把这个List放入Adapter中，将ViewPager和Adapter关联起来就可以实现效果了。附上MainActivity的代码

2.MainActivity

package com.example.noname.learnrecord;import android.app.ProgressDialog;import android.content.Intent;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.Button;import android.widget.ImageButton;import android.widget.LinearLayout;import android.widget.ListView;import android.widget.PopupWindow;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private ViewPager mViewPager;    private List<View> mViews=new ArrayList<>();    private PageAdapter mAdapter=new PageAdapter(mViews);    private int currentIndex=0;    // Tab    private LinearLayout mTabToday, mTabList, mTabShop, mTabMsg;    private ImageButton mTodayImg, mListImg, mShopImg, mMsgImg;    //Top    Button btnSearch,btnUserInfo;    TextView tvtoptitle;    PopupWindow mPopWindow;    private void initEvents() {        mTabToday.setOnClickListener(this);        mTabList.setOnClickListener(this);        mTabShop.setOnClickListener(this);        mTabMsg.setOnClickListener(this);        btnSearch.setOnClickListener(this);        btnUserInfo.setOnClickListener(this);        //滑动切换页面        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int arg0) {                resetImg();    //将图片全部默认为不选中                int currentItem = mViewPager.getCurrentItem();                switch (currentItem) {                    case 0://                        initFirstEvent();                        mTodayImg.setBackgroundResource(R.drawable.nav_today_after);                        tvtoptitle.setText("今日");                        break;                    case 1:                        mListImg.setBackgroundResource(R.drawable.nav_list_after);                        tvtoptitle.setText("清单");                        break;                    case 2:                        mShopImg.setBackgroundResource(R.drawable.nav_shop_after);                        tvtoptitle.setText("商城");                        break;                    case 3:                        mMsgImg.setBackgroundResource(R.drawable.nav_info_after);                        tvtoptitle.setText("消息");                        break;                    default:                        break;                }                currentIndex=currentItem;            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });    }    //实例化控件    //以及四个界面的空间    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        // Tab        mTabToday = (LinearLayout) findViewById(R.id.tab_today);        mTabList = (LinearLayout) findViewById(R.id.tab_list);        mTabShop = (LinearLayout) findViewById(R.id.tab_shop);        mTabMsg = (LinearLayout) findViewById(R.id.tab_msg);        // img        mTodayImg = (ImageButton) findViewById(R.id.tab_today_img);        mListImg = (ImageButton) findViewById(R.id.tab_list_img);        mShopImg = (ImageButton) findViewById(R.id.tab_shop_img);        mMsgImg= (ImageButton) findViewById(R.id.tab_msg_img);        //Top        btnSearch=(Button)findViewById(R.id.btn_search);        btnUserInfo=(Button)findViewById(R.id.btn_user_info);        //TopTop        tvtoptitle=(TextView)findViewById(R.id.tv_top_title);        LayoutInflater mInflater = LayoutInflater.from(this);        View tab01 = mInflater.inflate(R.layout.main_layout1, null);        View tab02 = mInflater.inflate(R.layout.main_layout2, null);        View tab03 = mInflater.inflate(R.layout.main_layout3, null);        View tab04 = mInflater.inflate(R.layout.main_layout4, null);        mViews.add(tab01);        mViews.add(tab02);        mViews.add(tab03);        mViews.add(tab04);//        btnAddList= (Button)tab01.findViewById(R.id.btn_add_list); 可以通过findViewById设置每个layout里面的事件        mViewPager.setAdapter(mAdapter);    }    //点击事件    @Override    public void onClick(View view) {        resetImg();        switch (view.getId()) {            case R.id.tab_today:                mViewPager.setCurrentItem(0);// 跳到第一个页面                mTodayImg.setBackgroundResource(R.drawable.nav_today_after);// 图片变为选中                tvtoptitle.setText("今日");                break;            case R.id.tab_list:                mViewPager.setCurrentItem(1);                mListImg.setBackgroundResource(R.drawable.nav_list_after);                btnUserInfo.setPivotX(1);                tvtoptitle.setText("清单");                break;            case R.id.tab_shop:                mViewPager.setCurrentItem(2);                mShopImg.setBackgroundResource(R.drawable.nav_shop_after);                tvtoptitle.setText("商城");                break;            case R.id.tab_msg:                mViewPager.setCurrentItem(3);                mMsgImg.setBackgroundResource(R.drawable.nav_info_after);                tvtoptitle.setText("消息");                break;            default:                break;        }    }    // 将所有的图片切换为未选中    private void resetImg() {        mTodayImg.setBackgroundResource(R.drawable.nav_today_befo);        mListImg.setBackgroundResource(R.drawable.nav_list_befo);        mShopImg.setBackgroundResource(R.drawable.nav_shop_befo);        mMsgImg.setBackgroundResource(R.drawable.nav_info_befo);    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initEvents();    }}

3.Top.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="50dp"    android:background="#80cdea"    android:orientation="horizontal" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="今日"        android:id="@+id/tv_top_title"        android:layout_marginLeft="10dp"        android:textColor="#ffffff"        android:textSize="20sp"        android:layout_gravity="center_vertical"        android:textStyle="bold" />    <Button        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_marginLeft="60dp"        android:layout_gravity="center_vertical"        android:background="@drawable/nav_search_pic"        android:id="@+id/btn_search"/>    <Button        android:layout_width="30dp"        android:layout_height="30dp"        android:background="@drawable/nav_person"        android:layout_gravity="center_vertical"        android:onClick="popmenu"        android:id="@+id/btn_user_info"        android:layout_marginLeft="180dp"/></LinearLayout>

4.Bottom.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="55dp"    android:background="#ffffff"    android:orientation="horizontal" >    <!-- ImageButton没加android:clickable="false"时，点击下方的ImageBuutton不会改变页面，点击TextView才会改变页面，这是因为每个tab是一个LinearLayout，每个LinearLayout都有一个ImageButton，当点击ImageButton位置时，点击事件首先会到LinearLayout上，LinearLayout会去判断，发现内部有一个ImageButton可以解决点击事件，所以就把点击事件交给ImageButton，而ImageButton又没有写点击事件，所以点击事件就失效了。-->    <LinearLayout        android:id="@+id/tab_today"        android:layout_width="0dp"        android:layout_height="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/tab_today_img"            android:layout_width="25dp"            android:layout_height="25dp"            android:layout_gravity="center"            android:clickable="false"            android:background="@drawable/nav_today_after" />    </LinearLayout>    <LinearLayout        android:id="@+id/tab_list"        android:layout_width="0dp"        android:layout_height="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/tab_list_img"            android:layout_width="25dp"            android:layout_height="25dp"            android:clickable="false"            android:background="@drawable/nav_list_befo"/>    </LinearLayout>    <LinearLayout        android:id="@+id/tab_shop"        android:layout_width="0dp"        android:layout_height="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/tab_shop_img"            android:layout_width="25dp"            android:layout_height="25dp"            android:background="@drawable/nav_shop_befo"            android:clickable="false"            />    </LinearLayout>    <LinearLayout        android:id="@+id/tab_msg"        android:layout_width="0dp"        android:layout_height="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/tab_msg_img"            android:layout_width="25dp"            android:layout_height="25dp"            android:background="@drawable/nav_info_befo"            android:clickable="false"            />    </LinearLayout></LinearLayout>