自定义ViewPager标签条

最新推荐文章于 2021-05-26 15:14:42 发布

Humble先生

最新推荐文章于 2021-05-26 15:14:42 发布

阅读量453

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u012504392/article/details/52703916

本文介绍了一种自定义ViewPager标签条的方法，通过手动定义布局和编写代码实现了标签条跟随ViewPager滑动并停留在屏幕内的功能。

自定义这个标签条的初衷在于我想让ViewPager的标签条不滑出屏幕之外，我记得之前有过一个属性设置了就可以了，但是我现在找不到了...于是我就费劲的定义了一个，在此记录下来。

首先，看布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/myGray"
              android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="15dp"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/viewPagerText1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_active_pager_title_back"
            android:gravity="center"
            android:clickable="true"
            android:text="@string/active_viewpager_title1"
            android:textSize="16sp"
            android:textColor="@drawable/selector_active_pager_title_text"/>

        <TextView
            android:id="@+id/viewPagerText2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_active_pager_title_back"
            android:gravity="center"
            android:clickable="true"
            android:text="@string/active_viewpager_title2"
            android:textSize="16sp"
            android:textColor="@drawable/selector_active_pager_title_text"
            />

        <TextView
            android:id="@+id/viewPagerText3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_active_pager_title_back"
            android:gravity="center"
            android:clickable="true"
            android:text="@string/active_viewpager_title3"
            android:textSize="16sp"
            android:textColor="@drawable/selector_active_pager_title_text"
            />
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="3dp">

        <TextView
            android:id="@+id/cursor"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/active_viewpager_cursor"/>
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/activeViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        >
    </android.support.v4.view.ViewPager>

</LinearLayout>

上面的LinearLayout是盛放显示标签名字的TextView的，可以看到每个TextView的textColor属性和background属性都设置成了selector形式的drawable对象，可以实现选中时产生选中效果，这里注意，当设置textColor时，颜色需要这么定义，不过这个color属性alt+/自动出不来，只能自己手打。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/active_ing"/>
    <item android:state_selected="false" android:color="@color/active_title_text"/>
</selector>

而当设置background属性时，颜色需要这么定义

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/active_ing_back"/>
    <item android:state_selected="false" android:drawable="@color/white"/>
</selector>

注意一个是color，一个是drawable，不一样的，否则会出现Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #3: <item> tag requires a 'android:color' attribute.这个错误，或者Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #3: <item> tag requires a 'android:drawable' attribute.这个错误。

上面就是整个标签加ViewPager的完整控件，用的时候直接拿过去用就行了。

然后，来看代码：

package com.hardy.person.propertymanagecompany.fragments;

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.hardy.person.propertymanagecompany.R;
import com.hardy.person.propertymanagecompany.data.Main_Second_Frame;
import com.hardy.person.propertymanagecompany.net.NetConnectionException;
import com.hardy.person.propertymanagecompany.views.NoticeList;

import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.List;

/**
 * @author 马鹏昊
 * @date {2016-9-28}
 * @des 主界面的活动fragment
 * @updateAuthor
 * @updateDate
 * @updateDes
 */
public class Main_Second extends Fragment implements View.OnClickListener {

    //ViewPager
    private ViewPager mViewPager;
    //用于标志viewpager滑动的cursor
    private TextView mCursor;
    //cursor的宽度
    private int cursorWidth;
    //用于移动cursor的动画
    private TranslateAnimation mTranslateAnimation;
    //ViewPager的适配器
    private MyPagerAdapter mPagerAdapter;
    //ViewPager含有的View数
    private final static int viewsNum = 3;
    //盛放ViewPager的所有View
    private List<View> refreshers;
    //ViewPager含有的各个View
    private View mNoticeList1;
    private View mNoticeList2;
    private View mNoticeList3;
    //切换的标题标签
    private TextView mViewPagerText1;
    private TextView mViewPagerText2;
    private TextView mViewPagerText3;


    private void assignViews(View view) {
        //得到cursor的宽度（为屏幕宽度的1/?,?是多少取决于ViewPager含有的view个数）
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        cursorWidth = displayMetrics.widthPixels / viewsNum;

        mViewPagerText1 = (TextView) view.findViewById(R.id.viewPagerText1);
        mViewPagerText1.setOnClickListener(this);
        mViewPagerText2 = (TextView) view.findViewById(R.id.viewPagerText2);
        mViewPagerText2.setOnClickListener(this);
        mViewPagerText3 = (TextView) view.findViewById(R.id.viewPagerText3);
        mViewPagerText3.setOnClickListener(this);

        mCursor = (TextView) view.findViewById(R.id.cursor);
        mCursor.setLayoutParams(new FrameLayout.LayoutParams(cursorWidth, ViewGroup.LayoutParams.MATCH_PARENT));

        mNoticeList1 = //绑定你自己的View;
                mNoticeList2 = //绑定你自己的View;
                        mNoticeList3 = //绑定你自己的View;
                                //添加View        
                                refreshers = new ArrayList<>();
        refreshers.add(mNoticeList1);
        refreshers.add(mNoticeList2);
        refreshers.add(mNoticeList3);

        mViewPager = (ViewPager) view.findViewById(R.id.activeViewPager);
        mPagerAdapter = new MyPagerAdapter();
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                //                int s = position ;
                //滑动的起始位置
                float startPoint = Main_Second_Frame.lastPager * cursorWidth;
                //滑动的终止位置
                float endPoint = cursorWidth * position;
                switch (position) {
                    case 0:
                        //改变标签状态
                        mViewPagerText1.setSelected(true);
                        mViewPagerText2.setSelected(false);
                        mViewPagerText3.setSelected(false);
                        //移动标签指示条
                        mTranslateAnimation = new TranslateAnimation(startPoint, endPoint, 0, 0);
                        mTranslateAnimation.setDuration(300);
                        mTranslateAnimation.setFillAfter(true);
                        mCursor.startAnimation(mTranslateAnimation);
                        break;
                    case 1:
                        //改变标签状态
                        mViewPagerText1.setSelected(false);
                        mViewPagerText2.setSelected(true);
                        mViewPagerText3.setSelected(false);
                        //移动标签指示条
                        mTranslateAnimation = new TranslateAnimation(startPoint, endPoint, 0, 0);
                        mTranslateAnimation.setDuration(300);
                        mTranslateAnimation.setFillAfter(true);
                        mCursor.startAnimation(mTranslateAnimation);
                        break;
                    case 2:
                        //改变标签状态
                        mViewPagerText1.setSelected(false);
                        mViewPagerText2.setSelected(false);
                        mViewPagerText3.setSelected(true);
                        //移动标签指示条
                        mTranslateAnimation = new TranslateAnimation(startPoint, endPoint, 0, 0);
                        mTranslateAnimation.setDuration(300);
                        mTranslateAnimation.setFillAfter(true);
                        mCursor.startAnimation(mTranslateAnimation);
                        break;
                }
                //当前的变成了要保存的
                Main_Second_Frame.lastPager = position ;
            }

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

    }


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_main_second, container, false);
        assignViews(view);
        //初始化
        init();
        return view;
    }

    /*
            初始化操作
        */
    private void init() {
        //初始显示上次退出时的项
        mViewPager.setCurrentItem(Main_Second_Frame.lastPager);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {

            //点击切换的标签1
            case R.id.viewPagerText1:
                mViewPager.setCurrentItem(0);
                break;
            //点击切换的标签2
            case R.id.viewPagerText2:
                mViewPager.setCurrentItem(1);
                break;
            //点击切换的标签3
            case R.id.viewPagerText3:
                mViewPager.setCurrentItem(2);
                break;
        }
    }

    private class MyPagerAdapter extends PagerAdapter {


        @Override
        public int getCount() {
            return viewsNum;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //作用是为了改变当程序第一次加载此Fragment的时候默认选中第一项的标签状态
            if (Main_Second_Frame.lastPager == 0){
                //改变标签状态
                mViewPagerText1.setSelected(true);
                mViewPagerText2.setSelected(false);
                mViewPagerText3.setSelected(false);
            }
            View v = refreshers.get(position);
            container.addView(v);
            return v;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(refreshers.get(position));
        }
    }


}

其中的Main_Second_Frame.lastPager是在一个单独定义的用于保存各种数据的类里定义的一个变量，用于保存滑动前的pager是第几页或者Fragment销毁前的状态，一个作用是为了找到标签条的起始位置，另一个作用是恢复上次显示的pager。

//记录第二页的ViewPager上次滑到了第几页
public static int lastPager = 0 ;

然后就没有然后了，It's Over!