ViewPager可滑动页面+点击标题栏切换视图

功能:

  1. 滑动切换视图、标题栏。
  2. 标题栏字体颜色随当前视图改变而改变。
  3. 点击标题栏可切换视图。

1.主页面布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidui.ViewPagerFixedTitleActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题1" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题2" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="标题3" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="15dp" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

2.为显示每个ViewPager页面新建xml文件:vp_page1.xml,vp_page2.xml,vp_page3.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="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="TextView2" />

</LinearLayout>

3.字体颜色配置文件colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="selected">#99D7FF</color>
    <color name="unselected">#FA646C</color>

</resources>

4.Activity类:

public class ViewPagerFixedTitleActivity extends Activity implements OnClickListener {
    private TextView tv1;
    private TextView tv2;
    private TextView tv3;
    private ViewPager viewPager;
    private int selectedColor;
    private int unSelectedColor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_fixed_title);

        tv1 = (TextView) findViewById(R.id.textView1);
        tv2 = (TextView) findViewById(R.id.textView2);
        tv3 = (TextView) findViewById(R.id.textView3);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);

        // 获取颜色资源
        selectedColor = getResources().getColor(R.color.selected);
        unSelectedColor = getResources().getColor(R.color.unselected);

        // 设置初次显示时字体颜色
        tv1.setBackgroundColor(unSelectedColor);
        tv2.setBackgroundColor(unSelectedColor);
        tv3.setBackgroundColor(unSelectedColor);

        viewPager = (ViewPager) findViewById(R.id.vp_pager);

        // 初始化子页面
        LayoutInflater inflater = getLayoutInflater();
        View view1 = inflater.inflate(R.layout.vp_page1, null);
        View view2 = inflater.inflate(R.layout.vp_page2, null);
        View view3 = inflater.inflate(R.layout.vp_page3, null);

        // 添加进list
        List<View> views = new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);

        MyViewPagerAdapter adapter = new MyViewPagerAdapter(views);
        viewPager.setAdapter(adapter);

        // 为ViewPager添加监听器
        viewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    // 设置标题1被选中,其他的不选中
                    tv1.setBackgroundColor(selectedColor);
                    tv2.setBackgroundColor(unSelectedColor);
                    tv3.setBackgroundColor(unSelectedColor);
                } else if (position == 1) {
                    // 标题2
                    tv2.setBackgroundColor(selectedColor);
                    tv1.setBackgroundColor(unSelectedColor);
                    tv3.setBackgroundColor(unSelectedColor);

                } else if (position == 2) {
                    // 标题3
                    tv3.setBackgroundColor(selectedColor);
                    tv2.setBackgroundColor(unSelectedColor);
                    tv1.setBackgroundColor(unSelectedColor);
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    class MyViewPagerAdapter extends PagerAdapter {
        private List<View> views;

        public MyViewPagerAdapter() {

        }

        public MyViewPagerAdapter(List<View> views) {
            this.views = views;
        }

        @Override
        public int getCount() {
            return views.size();
        }

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

        @Override
        public Object instantiateItem(View container, int position) {
            View view = views.get(position);
            ViewPager viewPager = (ViewPager) container;
            viewPager.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = views.get(position);
            ViewPager viewPager = (ViewPager) container;
            viewPager.removeView(view);
        }

    }

    // 标题栏点击事件
    @Override
    public void onClick(View v) {
        int id = v.getId();
        switch (id) {
        case R.id.textView1:
            viewPager.setCurrentItem(0);
            break;
        case R.id.textView2:
            viewPager.setCurrentItem(1);
            break;
        case R.id.textView3:
            viewPager.setCurrentItem(2);
            break;
        default:
            break;
        }
    }
}

重写public Object instantiateItem(View container, int position)方法还是重写 public Object instantiateItem(ViewGroup container, int position)方法没有实际区别,因为public Object instantiateItem(ViewGroup container, int position)方法内部调用的还是public Object instantiateItem(View container, int position)

时间: 09-21

ViewPager可滑动页面+点击标题栏切换视图的相关文章

ViewPager可滑动页面+PagerTitleStrip标题

功能:滑动切换视图,具有标题栏. 1.在布局文件中加入android.support.v4.view.ViewPager: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&qu

android滑动页面

使用android-support-v4.jar里面的ViewPager实现滑动页面. 基本包含三个部分: 1. 导航控件 2. 游标(指示当前页面) 3. 一个ViewPager. 例子做的比较简单就几个控件换来换去的, 每个人的想法都不同相应的实现方法也就不一样呢,关键还是思想什么的. 所谓积少成多每天看一些小例子再用自己的思想 去实现一些小例子再记录下来很有帮助的. 源码下载: http://pan.baidu.com/s/1o6NpBtS android滑动页面,布布扣,bubuko.c

ViewPager之Fragment页面切换

一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPager更为通用的实践:ViewPager搭配Fragment实现页面切换. 这种实现方式相对于上篇文章而言,可以更好的支持不同页面各自的复杂逻辑,与此同时,也能够保障页面之间的耦合度尽可能的低. 按照惯例,先晒出效果图:        二.实现思路 首先分析一下不同区域的交互需求: 中间灰色区域除了要支持三套

ViewPager+PagerTabStrip实现页面选项卡滑动

经过一个简单的Demo,基本上做出了个可以实现功能的滑动页面,但是这个东西复用性差,而且还有一些小bug,不喜欢,再改! /* * 功能:改进滑动页面效果 * 作者:刘慧超 * 时间:2015年11月16日01:18:07 * */ public class Main2Activity extends AppCompatActivity { ViewPager pager=null; PagerTabStrip tabStrip=null; ArrayList<View> viewContai

Android重写ViewPager修改滑动灵敏度

使用ViewPager作为一个页面进行切换,里面可以存放很多View,但有时在操作View时不小心滑动一下就有可能跳到下一页,这并不是我们想要的,这里就需要重写ViewPager修改它的滑动条件 效果图 程序目录结构 BTViewPager.java package com.example.viewpagerdemo; import android.content.Context; import android.support.v4.view.ViewPager; import android.

H5单页面手势滑屏切换原理

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v

Android 小问题整理1 ViewPagerIndicator和ViewPager的滑动监听

2015-10-30 今天使用ViewPagerIndicator时遇到个小问题,使用ViewPagerIndicator和ViewPager关联之后,再对ViewPager的滑动事件进行监听viewpager.setOnPageChangeListener(),然后监听失效了. 1 mViewPager.setAdapter(new MyAdapter()); 2 mIndicator.setViewPager(mViewPager);//关联ViewpagerIndicator和ViewPa

WP8_区分滑动和点击(在图片列表中)

在windows phone中,对于一个页面中 有图片列表的,滑动的时候,很容易被误认为是点击了图片,而打开图片详细信息等,原意是滑动列表,由此对图片添加2个事件,来控制其点击行为(滑动的时候,基本不会执行到do clicked something处)   private bool _isClickEnable = false; private DateTime _clickedTime;   private void Img1_OnMouseLeftButtonDown(object send

ViewDragHelper实现QQ5.0侧滑并处理与ViewPager的滑动冲突

QQ5.0的侧滑效果有多种实现方式, 如http://blog.csdn.net/lmj623565791/article/details/39257409   就是利用HorizontalScrollView实现的,简单实用; 如http://blog.csdn.net/manoel/article/details/39013095/   通过改造SlidingMenu实现,没有改变原有SlidingMenu功能,屏幕边缘侧滑也可以.... 相对来说ViewDragHelper实现方式最为复杂