ViewPager、Fragment、Matrix综合使用实现Tab滑页效果_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > ViewPager、Fragment、Matrix综合使用实现Tab滑页效果

ViewPager、Fragment、Matrix综合使用实现Tab滑页效果

 2013/10/16 23:39:09  Kross  博客园  我要评论(0)
  • 摘要:原文地址:http://www.cnblogs.com/kross/p/3372987.html我们实现一个上面是一个可以左右滑动的页面,下面是三个可点击切换的tab按钮,tab按钮上还有一个激活条。效果如下图所示:----------------我是分割线----------------------------------------------我是分割线,下面的图片表示往右滑动,白条中的小机器人往右滑动--------------------------------------------
  • 标签:实现 使用 view

原文地址:http://www.cnblogs.com/kross/p/3372987.html

我们实现一个上面是一个可以左右滑动的页面,下面是三个可点击切换的tab按钮,tab按钮上还有一个激活条。效果如下图所示:

----------------我是分割线--------------------

--------------------------我是分割线,下面的图片表示往右滑动,白条中的小机器人往右滑动-------------------------

--------------------------我是分割线,切换到第二个页面,tab中的第二个被激活,字呈白色-----------------------

------------------我是分割线-------------------

OK,效果就是如上所示的效果。现在开始一步一步的介绍如何实现。

1.创建好基础的布局文件。

整个页面是一个LinearLayout,如果你用其他的布局也是可以的,在下只是图一个方便了。

根据最终效果,我们将整个布局分为三个部分:

第一部分是上面那一大块有颜色的区域,这是一个ViewPager,里面的内容是通过Fragment加载进来的。

第二部分是那个在白条中间的小机器人这一块,这个作为激活条(自己编的名词,就是表名当前的tab是被激活的),就是一个ImageView

第三部分是最底下的三个tab,是一个水平的LinearLayout,里面每一个tab都是ImageView+TextView构成的。

注意这里tab这个布局是被重复使用的,因为有三个嘛,为了代码重用,我们可以使用<include>标签。

所以,我们先写好每个小tab的布局(/res/layout/tab.xml),代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>
    <TextView
        android:id="@+id/tab_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/tab_text"
        android:gravity="center"
        android:textColor="#cccccc"/>
</LinearLayout>

为了方便,就直接使用启动图标的图片了,啊哈哈……啊哈哈哈……

接下来我们去写主体页面的布局(/res/layout/activity_main.xml),代码如下:

注意<include>标签的使用哦~

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >
    <!-- ViewPager的使用必须是完整的名字哦 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"/>
    <!-- 这是所谓的激活条,为了方便,也直接使用启动图标的图片了 -->
    <ImageView
        android:id="@+id/active_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/ic_launcher"
        android:background="#ffffff"/>
    <!-- 下面的线性布局是三个tab放置的区域 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!-- 使用include标签,可以直接重用xml,这是我在《Android UI 基础教程》中发现的~\(^o^)/~ -->
        <include
            android:id="@+id/tab1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            layout="@layout/tab"/>
        <include
            android:id="@+id/tab2"
            android:layout_weight="1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            layout="@layout/tab"/>
        <include
            android:id="@+id/tab3"
            android:layout_weight="1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            layout="@layout/tab"/>
    </LinearLayout>
</LinearLayout>

OK,这样我们整个页面的框架就有了。

 

2.给ViewPager添加页面

OKOK,在这一步呢,我们要做的是给ViewPager这个控件添加页面,我们从一开始就打算添加三个页面的,所以上面才有3个tab,如果你需要更多,都是一样的道理。

ViewPager这个控件使用起来是非常方便的,在给它添加好页面后,它自身可以实现左右滑动切换的效果,非常滴好用啊。

ViewPager最重要的是给它设置适配器(setAdapter),我们期望的结果是,每个页面里,都有自己的控件,操作这些控件的方法都可以分别写在各自的Fragment中,而不是全部都写在MainActivity中。所以,我们要让ViewPager里面装载的是Fragment,因此,我们需要去拓展(extends)一个FragmentPagerAdapter

实现FragmentPagerAdapter又需要事先准备好三个Fragment,三个Fragment又需要三个独立的布局。

因此我们需要做的第一件事是准备三个我们期望的布局。

为了简单起见,我们准备layout1、layout2、layout3(/res/layout/layout*.xml)这样三个布局,这三个布局的背景颜色都是不一样的,里面都放了一个按钮,为了能够在后面实现每个页面独立的功能。

布局文件的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<!-- 这是layout1.xml的布局代码,另外两个布局文件就是背景颜色和按钮的id,text改变了而已 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#ff0000">
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button1"/>
</LinearLayout>

接下来,我们要拓展(extends)三个Fragment,分别是Fragment1.java、Fragment2.java、Fragment3.java(/src/fragment/Fragment*.java)。代码如下:

推荐不同功能的类,建立不同的包来进行分类管理。

public class Fragment1 extends Fragment {
    
    private View layout = null;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        this.layout = inflater.inflate(R.layout.layout1, null);
        
        //从这里到return之间,你可以为这个Fragment添加其功能。
        Button b = (Button)this.layout.findViewById(R.id.button1);
        b.setOnClickListener(new ButtonListener());
        
        return this.layout;
    }
    
    public class ButtonListener implements OnClickListener {

        @Override
        public void onClick(View v) {
            
            Toast.makeText(getActivity(), "button1", Toast.LENGTH_SHORT).show();
        }
    }
}

OKOK,三个Fragment也准备好了,接下来实现一个FragmentPagerAdapter(/src/adapter/FragmentAdapter.java),代码如下:

public class FragmentAdapter extends FragmentPagerAdapter{
    
    //这个是存放三个Fragment的数组,待会从MainActivity中传过来就行了
    private ArrayList<Fragment> fragmentArray;
    
    //自己添加一个构造函数从MainActivity中接收这个Fragment数组
    public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> fragmentArray) {
        this(fm);
        this.fragmentArray = fragmentArray;
    }
    
    public FragmentAdapter(FragmentManager fm) {
        super(fm);
    }
    
    //这个函数的作用是当切换到第arg0个页面的时候调用。
    @Override
    public Fragment getItem(int arg0) {
        return this.fragmentArray.get(arg0);
    }

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

实现好Adapter后,我们就去MainActivity(src/com.kross.test/MainActivity.java)中配置一下。

在MainActivity中,我们需要做如下几件事情:

1.准备好Fragment,把它们添加进数组。

2.获取到ViewPager的实例,为其设置适配器。

3.设置ViewPager当前显示第一页。

因为在FragmentAdapter的构造函数中需要一个FragmentManager,所以,MainActivity应该继承FragmentActivity

代码如下:

public class MainActivity extends FragmentActivity {
    
    private ViewPager viewPager = null;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);this.initViewPager();
    
    }

private void initViewPager() { //获取到ViewPager的实例 this.viewPager = (ViewPager)findViewById(R.id.viewpager); //构造好存放Fragment的数组 ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>(); fragmentArray.add(new Fragment1()); fragmentArray.add(new Fragment2()); fragmentArray.add(new Fragment3()); //为ViewPager设置适配器 this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray)); //设置当前显示的页面 this.viewPager.setCurrentItem(0); } }

 

3.为下面的三个tab添加点击事件,并设置好相应的激活效果。

完成上面两步,应该可以实现三个页面滑动的效果。但下面的三个Tab是没有被用上的。我们这步要做到的事情是:点击下面的tab,切换到相应的页面,并激活tab,滑动上面的页面,并激活tab。

这里需要使用到一个接口OnPageChangeListener。这个接口中有三个方法,都是在页面滑动的时候会被调用。我们需要使用这个接口,让页面滑动的时候激活相应的tab。

现在来实现该接口PagerListener(/src/listener/PagerListener.java),代码如下:

public class PagerListener implements OnPageChangeListener {
    
    private ArrayList<View> tabArray = null;private final static String TAG = "PagerListener";
    
    public PagerListener(ArrayList<View> tabArray) {
        this.tabArray = tabArray;
    }
    
    @Override
    //这个……
    public void onPageScrollStateChanged(int arg0) {
        Log.i(TAG, "onPageScrollStateChanged:" + Integer.toString(arg0));
    }

    @Override
    //这个方法是页面滚动的时候被调用,我们将在这个方法里完成对激活条的操作
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        Log.i(TAG, "onPageScrolled");
    }

    @Override
    //这个方法是当页面切换完毕后被调用,
    public void onPageSelected(int arg0) {
        Log.i(TAG, "onPageSelected");
        
        //先将所有的tab设置成灰色的
        for (View item : this.tabArray) {
            ((TextView)item.findViewById(R.id.tab_text)).setTextColor(Color.rgb(20, 20, 20));
        }
        
        //再将当前的tab设置成白色的,表示激活状态
        ((TextView)this.tabArray.get(arg0).findViewById(R.id.tab_text)).setTextColor(Color.WHITE);
    }
}

接下来,我们需要实现一个OnClickListener

TabListener(src/listener/TabListener.java),代码如下:

public class TabListener implements OnClickListener {
    
    private ViewPager viewPager = null;
    
    public TabListener(ViewPager v) {
        this.viewPager = v;
    }
    
    @Override
    public void onClick(View arg0) {
        switch (arg0.getId()) {
        case R.id.tab1:
            this.viewPager.setCurrentItem(0);
            break;
        case R.id.tab2:
            this.viewPager.setCurrentItem(1);
            break;
        case R.id.tab3:
            this.viewPager.setCurrentItem(2);
            break;
        }
    }
}

OKOK,接下来,我们只需要在MainActivity中获取tab的实例,给tab设置监听器,给ViewPager设置监听器就OK了。

MainActivity的代码变成如下这样:

public class MainActivity extends FragmentActivity {
    
    private ViewPager viewPager = null;
    
    //三个tab
    private View tab1 = null;
    private View tab2 = null;
    private View tab3 = null;//存放tab的数组
    private ArrayList<View> tabArray = null;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);this.initViewPager();
        this.initTab();
        this.setListener();
    
    }private void initTab() {
        this.tab1 = findViewById(R.id.tab1);
        this.tab2 = findViewById(R.id.tab2);
        this.tab3 = findViewById(R.id.tab3);
        
        this.tabArray = new ArrayList<View>();
        this.tabArray.add(tab1);
        this.tabArray.add(tab2);
        this.tabArray.add(tab3);
    }
    
    private void initViewPager() {
        //获取到ViewPager的实例
        this.viewPager = (ViewPager)findViewById(R.id.viewpager);
        
        //构造好存放Fragment的数组
        ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>();
        fragmentArray.add(new Fragment1());
        fragmentArray.add(new Fragment2());
        fragmentArray.add(new Fragment3());
        
        //为ViewPager设置适配器
        this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray));
        
        //设置当前显示的页面
        this.viewPager.setCurrentItem(0);
    }
    
    private void setListener() {
        TabListener tl = new TabListener(this.viewPager);
        
        this.tab1.setOnClickListener(tl);
        this.tab2.setOnClickListener(tl);
        this.tab3.setOnClickListener(tl);

        this.viewPager.setOnPageChangeListener(new PagerListener(this.tabArray);
    }
}

完成上面的三步,就基本上实现了大部分的功能了。页面可以切换,tab也可以点,有激活效果。

 

4.使用Matrix让激活条随页面的滑动而滑动。

激活条的滑动,需要使用到OnPageChangeListener接口中的onPageScrolled方法,

该方法有会在页面被滑动的时候调用,将会获取到三个参数,第一个参数为当前页面的下标,第二个参数为滑动距离占屏幕宽度的百分比,第三个参数为实际滑动的像素。

假设我们当前处在0下标的页面,我们从右往左滑动,滑向1下标的页面,在滑动的时候,该方法会一直被调用。

在没有彻底切换到1下标的页面时,第一个参数一直是0,直到彻底切换到1下标的页面。

第二个参数是个[0,1)的浮点数,一滑动,该参数就开始变大 0.12313---->0.23321---->0.31233,当页面快完成彻底切换的时候,也就是该参数将无限逼近1,但不会是1,然后突然变成了0,完成的页面的切换。

第三个参数就很好理解了,我的屏幕宽度是720px,我滑到一般,它的值就是360。

知道了这些,我们需要获取激活条需要移动的长度,以及屏幕的宽度。

tab有三个,所以我们用屏幕宽度/3,这是每个tab的宽度,tab的宽度 - 图片的宽度,这是剩余的空间,剩余的空间 / 2,就是小图片的偏移量(offset)。

激活条图片默认会出现在所在控件位置的最左边,初始的时候,我们就需要将它的位置设置在一个offset之后。

因此MainActivity的代码变成如下这样:

public class MainActivity extends FragmentActivity {
    
    private ViewPager viewPager = null;
    
    //三个tab
    private View tab1 = null;
    private View tab2 = null;
    private View tab3 = null;
    
    //偏移量
    private int offset;
    
    //图片宽度
    private int imageWidth;
    
    //存放tab的数组
    private ArrayList<View> tabArray = null;
    
    private ImageView activeBar = null;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //获取激活条控件
        this.activeBar = (ImageView)findViewById(R.id.active_bar);
        
        //获取该激活条的宽度
        this.imageWidth = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher).getWidth();
        
        //获取屏幕的宽度
        DisplayMetrics dm = new DisplayMetrics();   
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenWidth = dm.widthPixels;
        
        //计算出偏移量
        this.offset = (screenWidth / 3 - imageWidth) / 2;
        
        this.initViewPager();
        this.initTab();
        this.setListener();
    
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    private void initTab() {
        this.tab1 = findViewById(R.id.tab1);
        this.tab2 = findViewById(R.id.tab2);
        this.tab3 = findViewById(R.id.tab3);
        
        this.tabArray = new ArrayList<View>();
        this.tabArray.add(tab1);
        this.tabArray.add(tab2);
        this.tabArray.add(tab3);
    }
    
    private void initViewPager() {
        //获取到ViewPager的实例
        this.viewPager = (ViewPager)findViewById(R.id.viewpager);
        
        //构造好存放Fragment的数组
        ArrayList<Fragment> fragmentArray = new ArrayList<Fragment>();
        fragmentArray.add(new Fragment1());
        fragmentArray.add(new Fragment2());
        fragmentArray.add(new Fragment3());
        
        //为ViewPager设置适配器
        this.viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentArray));
        
        //设置当前显示的页面
        this.viewPager.setCurrentItem(0);
    }
    
    private void setListener() {
        TabListener tl = new TabListener(this.viewPager);
        
        this.tab1.setOnClickListener(tl);
        this.tab2.setOnClickListener(tl);
        this.tab3.setOnClickListener(tl);
        
        //注意这里的构造函数
        this.viewPager.setOnPageChangeListener(new PagerListener(this.tabArray, this.activeBar, this.offset, this.imageWidth));
    }
}

需要注意给ViewPager设置监听器的时候,传入了激活条的句柄,偏移量以及图片的宽度。

接下来我们需要修改下PagerListener的代码:

public class PagerListener implements OnPageChangeListener {
    
    private ArrayList<View> tabArray = null;
    private ImageView activeBar = null;
    private int offset;
    private int imageWidth;
    
    private final static String TAG = "PagerListener";
    
    public PagerListener(ArrayList<View> tabArray, ImageView activeBar, int offset, int iw) {
        this.tabArray = tabArray;
        this.activeBar = activeBar;
        this.offset = offset;
        this.imageWidth = iw;
    }
    
    @Override
    //这个……
    public void onPageScrollStateChanged(int arg0) {
        Log.i(TAG, "onPageScrollStateChanged:" + Integer.toString(arg0));
    }

    @Override
    //这个方法是页面滚动的时候被调用,我们将在这个方法里完成对激活条的操作
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        Log.i(TAG, "onPageScrolled");
        
        //new一个矩阵
        Matrix matrix = new Matrix();
        
        //设置激活条的最终位置
        switch (arg0) {
        case 0:
            //使用set直接设置到那个位置
            matrix.setTranslate(this.offset, 0);
            break;
        case 1:
            matrix.setTranslate(this.offset * 3 + this.imageWidth, 0);
            break;
        case 2:
            matrix.setTranslate(this.offset * 5 + this.imageWidth * 2, 0);
            break;
        }
        
        //在滑动的过程中,计算出激活条应该要滑动的距离
        float t = (this.offset * 2 + this.imageWidth) * arg1;
        
        //使用post追加数值
        matrix.postTranslate(t, 0);
        
        this.activeBar.setImageMatrix(matrix);
    }

    @Override
    //这个方法是当页面切换完毕后被调用,
    public void onPageSelected(int arg0) {
        Log.i(TAG, "onPageSelected");
        
        //先将所有的tab设置成灰色的
        for (View item : this.tabArray) {
            ((TextView)item.findViewById(R.id.tab_text)).setTextColor(Color.rgb(20, 20, 20));
        }
        
        //再将当前的tab设置成白色的,表示激活状态
        ((TextView)this.tabArray.get(arg0).findViewById(R.id.tab_text)).setTextColor(Color.WHITE);
    }
}

OKOK,完成上面所有的代码,就OK了。这样就实现了所有的效果。真是辛苦啊……

如果还有疑惑的话,可以来微博上问我:http://weibo.com/KrossFord

原文地址:http://www.cnblogs.com/kross/p/3372987.html

 

上一篇: 追踪回溯点 下一篇: 没有下一篇了!
发表评论
用户名: 匿名