频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
Android UI设计——ViewPage中自定义标题栏(四)
2015-09-07 08:54:58         来源:To_be_Designer  
收藏   我要投稿

  我们在上一篇博客《Android UI设计——ViewPage中PagerTabStrip与PagerTitleStrip添加标题栏(三)》 中学习了如何为ViewPager添加标题,划分类目,我们使用的是Google给我们提供的PagerTabStrip与PagerTitleStrip两个控件。通过博客中我们也可以看到,使用PagerTabStrip与PagerTitleStrip控件添加的标题栏在实际的开发中很少见到。大部分还是使用自定义的标题栏,接下来我们看看如何添加自定义的标题栏……

1. 定义总体布局。我们使用相对布局,使用前我们首先要知道相对布局的布局方式有先来后到,如果两个布局重叠的话,先定义的控件会被放在布局的下面。这里我们定义一个ViewPager充满相对布局,在相对布局的顶端Top处再放置一个线性布局,分别来放置ViewPager不同页面的Title,在线性布局的下面放置一个ImageView用于实现滚动条动画的滚动。



 
        
    

2. 这一步大家都很熟悉,自定义MyPagerAdapter,继承PagerAdapter实现其中的四个方法:
getCount()
isViewFromObject(View, Object)
instantiateItem(ViewGroup, int)
destroyItem(ViewGroup, int, Object)

public class MyPagerAdapter extends PagerAdapter {
    private List mViews;//三个布局的集合
    /*
    通过构造器获得数据
     */
    public MyPagerAdapter(List mViews) {
        this.mViews = mViews;
    }

    @Override
    public int getCount() {
        return mViews.size();//显示的布局的数量,我们这里为三个。
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //增加View
        container.addView(mViews.get(position));
        return mViews.get(position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //删除View
        container.removeView(mViews.get(position));
    }
}

3. Activity中定义ViewPager对象,将三个布局页面通过适配器MyPagerAdapter添加到ViewPager中。通过监听ViewPager的动作,来实现滚动条动画的切换。县贴出全部代码,随后逐步讲解。

public class DefineTitleActivity extends Activity {

    private List mViews;
    private LayoutInflater mInflater;
    private ViewPager mViewPager;
    private ImageView mImageCursor;//滚动条的动画。
    private int mCursorWidth;//动画的宽度。
    private int mOffset;//动画图片的偏移量。
    private int currIndex = 0;//当前页码编号
    private MyPagerAdapter myPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_define_title);

        mViewPager = (ViewPager) findViewById(R.id.viewpager_define_title);
        mInflater = getLayoutInflater();
        //初始化页面数据。
        mViews = new ArrayList();
        View view1 = mInflater.inflate(R.layout.item_frist, null);
        View view2 = mInflater.inflate(R.layout.item_second, null);
        View view3 = mInflater.inflate(R.layout.item_third, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);

        initCursorPos();
        myPagerAdapter = new MyPagerAdapter(mViews);
        mViewPager.setAdapter(myPagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            int one = mOffset * 2 + mCursorWidth;// 页卡1 -> 页卡2 偏移量
            int two = one * 2;// 页卡1 -> 页卡3 偏移量
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            /*
            通过事件的监听,实现动画的切换
             */
            @Override
            public void onPageSelected(int position) {
                Animation animation = null;
                switch (position) {
                    case 0:
                        if (currIndex == 1) {
                            animation = new TranslateAnimation(one, 0, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, 0, 0, 0);
                        }
                        break;
                    case 1:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, one, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, one, 0, 0);
                        }
                        break;
                    case 2:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, two, 0, 0);
                        } else if (currIndex == 1) {
                            animation = new TranslateAnimation(one, two, 0, 0);
                        }
                        break;
                }
                currIndex = position;
                animation.setFillAfter(true);// True:图片停在动画结束位置
                animation.setDuration(300);
                mImageCursor.startAnimation(animation);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    /*
    初始化动画的方法
     */
    private void initCursorPos() {
        // 初始化动画
        mImageCursor = (ImageView) findViewById(R.id.imageview_cursor);
        mCursorWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.image).getWidth();// 获取图片宽度
        //获得屏幕的宽度
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        int screenW = metrics.widthPixels;
        // 计算偏移量
        mOffset = (screenW / mViews.size() - mCursorWidth) / 2;
        // 设置动画初始位置
        Matrix matrix = new Matrix();
        matrix.postTranslate(mOffset, 0);
        mImageCursor.setImageMatrix(matrix);
    }
}

  这一块稍微有点难理解,在Activity中我们首先进行了页面数据的初始化,然后将页面通过适配器添加到ViewPager中。然后我们通过监听ViewPager对象,当页面变化时,我们需要将滚动条图片移动位置。然后,难点来了,我们如何移动位置?移动多少?
  
  我们通过下面这个图片来理解滚动条动画的设置。
  
这里写图片描述
这里写图片描述
(此处图片引用于<喎"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPsG0vdM8c3Ryb25nPqOpPC9zdHJvbmc+PC9wPg0KPHA+PHN0cm9uZz7J6NbDs/XKvLavu621xM671sM8L3N0cm9uZz48L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;"> private void initCursorPos() { // 初始化动画 mImageCursor = (ImageView) findViewById(R.id.imageview_cursor); mCursorWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.image).getWidth();// 获取图片宽度 //获得屏幕的宽度 DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); int screenW = metrics.widthPixels; // 计算偏移量 mOffset = (screenW / mViews.size() - mCursorWidth) / 2; // 设置动画初始位置 Matrix matrix = new Matrix(); matrix.postTranslate(mOffset, 0); mImageCursor.setImageMatrix(matrix); }

在监听中通过重写onPageSelected(int position)方法,实现动画的切换。

             /*
            通过事件的监听,实现动画的切换
             */
            @Override
            public void onPageSelected(int position) {
                Animation animation = null;
                switch (position) {
                    case 0:
                        if (currIndex == 1) {
                            animation = new TranslateAnimation(one, 0, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, 0, 0, 0);
                        }
                        break;
                    case 1:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, one, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, one, 0, 0);
                        }
                        break;
                    case 2:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, two, 0, 0);
                        } else if (currIndex == 1) {
                            animation = new TranslateAnimation(one, two, 0, 0);
                        }
                        break;
                }
                currIndex = position;
                animation.setFillAfter(true);// True:图片停在动画结束位置
                animation.setDuration(300);
                mImageCursor.startAnimation(animation);
            }

结果展示:

这里写图片描述

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 标题
上一篇:android开发之记录ListView滚动位置
下一篇:Android UI设计——ViewPage中PagerTabStrip与PagerTitleStrip添加标题栏(三)
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站