随笔：tab标签随手势左右滑动的渐变效果，类似微信

随笔：tab标签随手势左右滑动的渐变效果，类似微信

---

效果图：

没有借鉴过其他类似效果的项目，自己琢磨出来后才发现原来有其他人写过这个东西，还有很多可以改进的地方，我只是做个暂时记录，看到的童鞋就看看吧
我比较懒，一切都从简，
我也很笨，代码也许有点复杂。

说正事，首先，自定义一个组件当做tab的item使用这个组件有两张图片组成。这个组件布局xml文件里为一个选中图片一个未选中图片，重叠放置，布局里选中图片组件的透明度设为0。（奏是这么懒，加其他文字什么的方法一样一样的），代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView
        android:id="@+id/navi_unselected_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:contentDescription="@string/img_description"
        android:visibility="visible"/>
    <ImageView
        android:id="@+id/navi_selected_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/img_description"
        android:alpha="0"
        android:visibility="visible"/>
RelativeLayout>

这个组件的java文件吧 加了几个写法，设置状态的两个方法（选中状态和未选中状态，决定哪张图片变透明），还有个是改变两个图片透明度的方法。看代码：

public class NaviTabItemView extends RelativeLayout{
    private Context mContext;
    private AttributeSet attrs;    //自定义的布局文件的属性
    private ImageView unSelectedView;  //未被选中状态的图片控件
    private ImageView selectedView; //被选中状态的图片控件

    //构造函数
    public NaviTabItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext=context;
        this.attrs=attrs;
        LayoutInflater.from(mContext).inflate(R.layout.navi_tab_item_layout, this, true);

        init();
    }

    public NaviTabItemView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NaviTabItemView(Context context) {
        this(context, null);
    }
    //初始化控件和图片
    public void init(){
        unSelectedView=(ImageView) findViewById(R.id.navi_unselected_img);
        selectedView=(ImageView) findViewById(R.id.navi_selected_img);
        //提取资源图片
        TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.NaviTabItemView);
        Drawable drawable1 = a.getDrawable(R.styleable.NaviTabItemView_unSelectedImage);    
        if(drawable1 != null) 
            unSelectedView.setImageDrawable(drawable1);  

        Drawable drawable2 = a.getDrawable(R.styleable.NaviTabItemView_selectedImage);    
        if(drawable2 != null) 
            selectedView.setImageDrawable(drawable2); 
        a.recycle();

    }
    //改变两个图片透明度切换状态 从未被选择->被选
    public void setSelected(){
        unSelectedView.setAlpha(0f);
        selectedView.setAlpha(1f);
    }
    //改变两个图片透明度切换状态 从被选择->未被选
    public void setUnSelected(){
        unSelectedView.setAlpha(1f);
        selectedView.setAlpha(0f);
    }
    //改变选中图片透明度 参数：透明度
    public void setSelectedAlpha(float alpha){
        ViewHelper.setAlpha(selectedView, alpha);
        ViewHelper.setAlpha(unSelectedView, 1-alpha);  
    }

    //getters和setters
    public ImageView getUnSelectedView() {
        return unSelectedView;
    }

    public void setUnSelectedView(ImageView unSelectedView) {
        this.unSelectedView = unSelectedView;
    }

    public ImageView getSelectedView() {
        return selectedView;
    }

    public void setSelectedView(ImageView selectedView) {
        this.selectedView = selectedView;
    }
}

这里也看到给这个控件加了自定义的属性attrs.xml里：

<resources>
    
    <declare-styleable name="NaviTabItemView">  
        <attr name="unSelectedImage" format="reference" />  
        <attr name="selectedImage" format="reference" />  
    declare-styleable>  
resources>

在主函数布局里这么用：
最外层布局控件里加入以下这句
xmlns:myattrs=”http://schemas.android.com/apk/res/com.zjut.zy.mywork001”
表示标签的组件用法其中一个如下（主布局其他不多说了一毛一样的4个item并列排，上面一个ViewPager）：

 <com.zjut.zy.mywork001.view.NaviTabItemView
            android:id="@+id/navigation_item_1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            myattrs:unSelectedImage="@drawable/navigation_1"
            myattrs:selectedImage="@drawable/navigation_1_selected"
            android:contentDescription="@string/icon_description" />

然后是4个页面的填充内容，4个Fragment，布局随便定：

public class DemoFragment1 extends Fragment {
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        this.view=inflater
                .inflate(R.layout.demo_fragment_1, container, false);

        return view;
    }
}

用的是ViewPager+Fragment模式，需要一个适配器：

public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {

    private Context mContext;

    private Fragment[] mFragments;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context, Fragment[] fragments) {
        super(fm);
        mContext = context;
        mFragments = fragments;
    }

    @Override
    public Fragment getItem(int arg0) {
        return mFragments[arg0];
    }

    @Override
    public int getCount() {
        return mFragments.length;
    }

    @Override
    public int getItemPosition(Object object) {
        return PagerAdapter.POSITION_NONE;
    }

    // PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁

    @Override
    public void destroyItem(ViewGroup view, int position, Object object) {

        super.destroyItem(view, position, object);

    }

       @Override
       public Object instantiateItem(View container, int position) {
           // TODO Auto-generated method stub
           return super.instantiateItem(container, position);
       }
}

最重要的主函数，填充viewpager，为它加上滑动监听OnPageChangeListener，监听里面做item的渐变处理（使用前面定义的透明度方法）
比较乱的是要先判断滑动的左右方向，看代码注释吧，解释不清了 ，自己都开始凌乱了-_-|||||||

public class DemoMainActivity extends FragmentActivity{
    ViewPager mViewPager;      
    //底部导航标签
    NaviTabItemView navigation_item_1,navigation_item_2
    ,navigation_item_3,navigation_item_4;
    List naviTabItems;
    int naviItemSum=0;

    private int mCurrentFragment;  //当前页
    private MyFragmentPagerAdapter mAdapter;    //viewPager的适配器
    private Fragment[] fragments = new Fragment[] {
            new DemoFragment1(),
            new DemoFragment2(),
            new DemoFragment3(),
            new DemoFragment4()
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("MYWORK_TAG", "MainActivity.onCreate()");
        setContentView(R.layout.demo_activity_main);
        initView();
        initViewPager();
        resetNavigation();

        navigation_item_1.setSelected();
    }
    private void initView(){
        mViewPager=(ViewPager) findViewById(R.id.main_view_pager);
        navigation_item_1=(NaviTabItemView) findViewById(R.id.navigation_item_1);
        navigation_item_1.setOnClickListener(clickNavigation);

        navigation_item_2=(NaviTabItemView)  findViewById(R.id.navigation_item_2);
        navigation_item_2.setOnClickListener(clickNavigation);

        navigation_item_3=(NaviTabItemView)  findViewById(R.id.navigation_item_3);
        navigation_item_3.setOnClickListener(clickNavigation);

        navigation_item_4=(NaviTabItemView)  findViewById(R.id.navigation_item_4);
        navigation_item_4.setOnClickListener(clickNavigation);

        //所有NaviTabItemView加入naviTabItems队列
        naviTabItems=new ArrayList();
        naviTabItems.add(navigation_item_1);
        naviTabItems.add(navigation_item_2);
        naviTabItems.add(navigation_item_3);
        naviTabItems.add(navigation_item_4);
        naviItemSum=naviTabItems.size();
    }
    private void initViewPager(){
        mAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), this, fragments);
        mViewPager.setOnPageChangeListener(onPageChangeListener);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(mCurrentFragment);
        mViewPager.setOffscreenPageLimit(1);
    }
    private OnClickListener clickNavigation=new OnClickListener(){
        public void onClick(View v){
            if(v==navigation_item_1){
                changePage(0);
            }else if(v==navigation_item_2){
                changePage(1);
            }else if(v==navigation_item_3){
                changePage(2);
            }else if(v==navigation_item_4){
                changePage(3);
            }
        }
    };
    private void changePage(int currentItem){
        if(mViewPager.getCurrentItem()!=currentItem){
            mViewPager.setCurrentItem(currentItem, false);
        }
    }
    private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {
        private int lastValue=0; //判断滑动左右方向用
        private boolean isRight=false;  //是否向右滑动
        private boolean isLeft=false;  //是否向左滑动
        @SuppressWarnings("deprecation")
        @Override
        public void onPageSelected(int arg0) {
            isRight=false; 
            isLeft=false; 
            mCurrentFragment = arg0;        
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
//      "viewPager-当前页：arg0--偏移百分比:arg1--偏移量:arg2");
        //判断左滑右滑
            if(!isLeft && !isRight && arg2!=0 && lastValue!=0){
                if(arg2-lastValue>0){
                    //向左滑，arg1、arg2递增
                    isLeft=true;
                    isRight=false;

                }else if(arg2-lastValue<0  ){
                    //向右滑，arg1、arg2递减               
                    isRight=true;
                    isLeft=false;
                }
            }
            lastValue=arg2;

            //TabItem的颜色渐变
            if(isLeft && arg2>0 && arg0<(naviItemSum-1)){
                //向左,arg1增加
                //naviTabItems.get(arg0) 被选中至未选中
                naviTabItems.get(arg0).setSelectedAlpha(1-arg1);
                naviTabItems.get(arg0+1).setSelectedAlpha(arg1);
            }else if(isRight && arg2>0 &&  arg0<(naviItemSum-1)){
                //向右,arg1减少
                //naviTabItems.get(arg0) 未选中至被选中
                naviTabItems.get(arg0).setSelectedAlpha(1-arg1);
                naviTabItems.get(arg0+1).setSelectedAlpha(arg1);
            }
            if(arg2==0){
                resetNavigation();
                naviTabItems.get(arg0).setSelected();
            }

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    };

    //重置为未选中状态
    private void resetNavigation() {
        navigation_item_1.setUnSelected();
        navigation_item_2.setUnSelected();
        navigation_item_3.setUnSelected();
        navigation_item_4.setUnSelected();
    }
}