Android实现界面左右滑动切换功能,开源控件ViewPagerIndicator的使用

深信大家自然都使用过手提式有线电话机QQ和Wechat之类的软件,当大家应用时轻巧窥见其分界面包车型地铁切换不仅可以够透过点击页标签来落到实处,还足以因此左右滑行来促成的,耗子君刚起先学Android时就认为那样的滑行超级帅炫,十二分想要本身来兑现它。相信大家也和耗子君相像,想要迫不期望的上学如何落到实处了啊,OK,上边小编来详细的讲一下怎么着促成那个成效。

前些天学习了ViewPager作为引导页和Tab的行使方法。后来也可能有依赖分裂的选择意况改用Fragment作为Tab的情况,以至ViewPager结合FragmentPagerAdapter的使用。前几日读书风流浪漫种接纳开源控件ViewPagerIndicator完毕Tab的主意,也是各个情报客商端等APP开垦最常用的。

先来赏玩一下意义图吧:

在那多谢xiaanming导师分享的代码,以致JakeWharton大神为广大开采者提供的开源框架。

图片 1


第生机勃勃,我们先来认知一下控件 ViewPager

1.如何利用开源框架
第1步:improt library项目
第2步:导入library进大家团结新建的项目
从Github上Download下来那几个zip包之后,里面会有叁个library文件,是库工程,还会有叁个sample,是小编提供的事例(将sample这几个类型import,能够观望小编提供的各类样式的Indicator,作为参照卡塔 尔(阿拉伯语:قطر‎。如若要在作者例子的根基上团结开辟样式,要求将library项目import进Eclipse(library是库工程,大家供给将其视作大家温馨项指标信任库卡塔尔国。然后成立二个新品类,新建的门类libs目录上边有android-support-v4.jar,那一个必需删除,因为ViewPageIndicator里面有那个库,大家项目中不允许五个android-support-v4.jar,不删除我们的花色是不能够编写翻译的。右键项目—Properties—Android选项卡—Add—选取library库工程—OK,导入实现。

ViewPager是Android
SDk中自带的叁个叠合包android-support-v4.jar中的二个类,能够用来达成显示器间的切换。android-support-v4.jar能够在网络寻觅最新的本子,下载好它后,大家须求把它增添到项目中去。


XML布局

2.MainActivity布局
布局中仅叁个ViewPager,一个ViewPagerIndicator.(本例使用的是当中生龙活虎种ViewPagerIndicator:TabPagerIndicator卡塔尔
留意它应当紧邻在ViewPager的最上部或下方,简单的讲要挨在联名。

第一来看一下activity的布局,这几个布局相信大家都能看得懂,第大器晚成行为唯有三个TextView的页标,至于名字大家就毫无留意了,哈哈,第二行事滑动界面时的滚动条,图片自身要筛选并增添到drawable中,长度不要太长哦,第三行即为我们要完结的分界面切换用的ViewPager:

<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" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/base_action_bar_bg" >
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

</LinearLayout>
<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" tools:context=".MediaPlayerActivity">
  <LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="50.0dip"
    android:background="#FFFFFF"
    >
    <!--layout_weight这个属性为权重,让两个textview平分这个linearLayout-->
    <TextView
      android:id="@+id/videoLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="视频"
      android:textColor="#000000"
      android:textSize="20dip"
      android:background="@drawable/selector"/>
    <TextView
      android:id="@+id/musicLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="音乐"
      android:textColor="#000000"
      android:textSize="20dip"
      android:background="@drawable/selector"/>
  </LinearLayout>
  <ImageView
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_below="@id/linearLayout"
    android:id="@+id/scrollbar"
    android:scaleType="matrix"
    android:src="@drawable/scrollbar"/>
  <android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/scrollbar">
  </android.support.v4.view.ViewPager>
</RelativeLayout>

布局中TextView的background属性是小编先安装好的,能够实将来按压其时,能够使得其背景颜色得到更动,并在甩手时上涨颜色。方法为在drawable中新建一个selector.xml文件,写下如下代码;

3.MainActivity代码
第1步:实例化ViewPager,给ViewPager设置Adapter
第2步:实例化TabPageIndicator,TabPageIndicator与ViewPager绑在一块儿
第3步:在Indicator上设置OnPagerChangeListner监听器
第4步:定义Adapter(继承FragmentPagerAdapter)

selector.xml:

先实例化ViewPager,然后实例化TabPageIndicator,然后设置TabPageIndicator和ViewPager关联,就是调用TabPageIndicator的setViewPager(ViewPager
view)方法,那样子就落到实处了点击上面的Tab,上面包车型地铁ViewPager切换;滑动ViewPager,下边包车型客车Tab跟着切换。
ViewPager的每三个Item大家利用的是Fragment,使用Fragment能够使布局更灵敏一点,建议多用Fragment。
安装监听的时候,要求用Indicator提供的OnPagerChangeListener方法

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_pressed="true"
    android:drawable="@color/press" />
</selector>
public class MainActivity extends FragmentActivity {  
    /** 
     * Tab标题 
     */  
    private static final String[] TITLE = new String[] { "头条", "房产", "另一面", "女人",  
                                                        "财经", "数码", "情感", "科技" };  

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

        //实例化ViewPager, 然后给ViewPager设置Adapter  
        ViewPager pager = (ViewPager)findViewById(R.id.pager);  
        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());  
        pager.setAdapter(adapter);  

        //实例化TabPageIndicator,然后与ViewPager绑在一起(核心步骤)  
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
        indicator.setViewPager(pager);  

        //如果要设置监听ViewPager中包含的Fragment的改变(滑动切换页面),使用OnPageChangeListener为它指定一个监听器,那么不能像之前那样直接设置在ViewPager上了,而要设置在Indicator上,
        indicator.setOnPageChangeListener(new OnPageChangeListener() {  

            @Override  
            public void onPageSelected(int arg0) {  
                Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();  
            }  

            @Override  
            public void onPageScrolled(int arg0, float arg1, int arg2) {  

            }  

            @Override  
            public void onPageScrollStateChanged(int arg0) {  

            }  
        });  

    }  

    /** 
     * 定义ViewPager的适配器 
     */  
    class TabPageIndicatorAdapter extends FragmentPagerAdapter {  
        public TabPageIndicatorAdapter(FragmentManager fm) {  
            super(fm);  
        }  

        @Override  
        public Fragment getItem(int position) {  
            //新建一个Fragment来展示ViewPager item的内容,并传递参数  
            Fragment fragment = new ItemFragment();    
            Bundle args = new Bundle();    
            args.putString("arg", TITLE[position]);    
            fragment.setArguments(args);    

            return fragment;  
        }  

        @Override  
        public CharSequence getPageTitle(int position) {  
            return TITLE[position % TITLE.length];  
        }  

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

当然,首先要在values文件夹下新建好colors.xml文件,配置好press的颜料:


colors.xml:

4.定义ViewPager每一个Item的代码(每一个Fragment)
此例只定义了一个Fragment,奇骏.layout.fragment仅定义了二个TextView。在这里个Fragment代码中,通过Bundle传递二个Key-value数据,内容仅贰个字符串。实际支付的时候,针对各类ViewPager的item,要设计每一种不相同的Fragment的布局、代码内容等。此例代码只做示范。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="press">#25fa55</color>
</resources>
public class ItemFragment extends Fragment {

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

        //动态找到布局文件,再从这个布局中find出TextView对象
        View contextView = inflater.inflate(R.layout.fragment_item, container, false);
        TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

        //获取Activity传递过来的参数
        Bundle mBundle = getArguments();
        String title = mBundle.getString("arg");

        mTextView.setText(title);

        return contextView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }   
}

看完了activity的布局,大家再来看看想要切换的分界面包车型地铁布局,那七个布局文件只需在layout文件中新建就好,不须要新建activity,为了轻松,这里就只设置了背景颜色,可以在测量检验时见到效率就可以:
video_player.xml:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#ad2929">
</RelativeLayout>

5.Indicator的样式改进
第1步:在values/styles中添加<style>:
本例中,加多了3个<style>,当中”StyledIndicators”是大家要求的<style>,它里面包车型地铁<item>使用了”CustomTabPageIndicator”这么些<style>,那些<style>当中的四个<item>又接纳了”CustomTabPageIndicator.Text”那么些<style>。
实际能够把”StyledIndicators”<style>的<item>属性全体写死在”StyledIndicators”上面。
但那样层级抽离式的写法,增强了代码的复用性,以便中期维护和机能代码增加和删除操作。

media_player.xml:

    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#acbbcf">
</RelativeLayout>

第2步:成立<style>中运用到的drawable财富文件:
在drawable目录下增添tab_indicator.xml 和selector_tabtext.xml。
本例中利用到了自定义的drawable财富,自定义drawable日常合营地点的自定义style使用,提供图片、颜色等能源来补助自定义样式:

Java代码

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#EE2C2C" />
    <item android:state_pressed="true" android:color="#EE2C2C" />
    <item android:state_focused="true" android:color="#EE2C2C" />
    <item android:color="@android:color/black"/>
</selector>
package com.example.blacklotus.multimedia;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.VideoView;
import java.util.ArrayList;
public class MediaPlayerActivity extends Activity implements View.OnClickListener{
  private ViewPager viewPager;
  private ArrayList<View> pageview;
  private TextView videoLayout;
  private TextView musicLayout;
  // 滚动条图片
  private ImageView scrollbar;
  // 滚动条初始偏移量
  private int offset = 0;
  // 当前页编号
  private int currIndex = 0;
  // 滚动条宽度
  private int bmpW;
  //一倍滚动量
  private int one;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_media_player);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    //查找布局文件用LayoutInflater.inflate
    LayoutInflater inflater =getLayoutInflater();
    View view1 = inflater.inflate(R.layout.video_player, null);
    View view2 = inflater.inflate(R.layout.media_player, null);
    videoLayout = (TextView)findViewById(R.id.videoLayout);
    musicLayout = (TextView)findViewById(R.id.musicLayout);
    scrollbar = (ImageView)findViewById(R.id.scrollbar);
    videoLayout.setOnClickListener(this);
    musicLayout.setOnClickListener(this);
    pageview =new ArrayList<View>();
    //添加想要切换的界面
    pageview.add(view1);
    pageview.add(view2);
    //数据适配器
    PagerAdapter mPagerAdapter = new PagerAdapter(){
      @Override
      //获取当前窗体界面数
      public int getCount() {
        // TODO Auto-generated method stub
        return pageview.size();
      }
      @Override
      //判断是否由对象生成界面
      public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0==arg1;
      }
      //使从ViewGroup中移出当前View
      public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView(pageview.get(arg1));
      }
      //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
      public Object instantiateItem(View arg0, int arg1){
        ((ViewPager)arg0).addView(pageview.get(arg1));
        return pageview.get(arg1);
      }
    };
    //绑定适配器
    viewPager.setAdapter(mPagerAdapter);
    //设置viewPager的初始界面为第一个界面
    viewPager.setCurrentItem(0);
    //添加切换界面的监听器
    viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    // 获取滚动条的宽度
    bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth();
    //为了获取屏幕宽度,新建一个DisplayMetrics对象
    DisplayMetrics displayMetrics = new DisplayMetrics();
    //将当前窗口的一些信息放在DisplayMetrics类中
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    //得到屏幕的宽度
    int screenW = displayMetrics.widthPixels;
    //计算出滚动条初始的偏移量
    offset = (screenW / 2 - bmpW) / 2;
    //计算出切换一个界面时,滚动条的位移量
    one = offset * 2 + bmpW;
    Matrix matrix = new Matrix();
    matrix.postTranslate(offset, 0);
    //将滚动条的初始位置设置成与左边界间隔一个offset
    scrollbar.setImageMatrix(matrix);
  }
  public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
    @Override
    public void onPageSelected(int arg0) {
      Animation animation = null;
      switch (arg0) {
        case 0:
            /**
             * TranslateAnimation的四个属性分别为
             * float fromXDelta 动画开始的点离当前View X坐标上的差值 
             * float toXDelta 动画结束的点离当前View X坐标上的差值 
             * float fromYDelta 动画开始的点离当前View Y坐标上的差值 
             * float toYDelta 动画开始的点离当前View Y坐标上的差值
            **/
            animation = new TranslateAnimation(one, 0, 0, 0);
          break;
        case 1:
            animation = new TranslateAnimation(offset, one, 0, 0);
          break;
      }
      //arg0为切换到的页的编码
      currIndex = arg0;
      // 将此属性设置为true可以使得图片停在动画结束时的位置
      animation.setFillAfter(true);
      //动画持续时间,单位为毫秒
      animation.setDuration(200);
      //滚动条开始动画
      scrollbar.startAnimation(animation);
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
    }
  }
  @Override
  public void onClick(View view){
     switch (view.getId()){
       case R.id.videoLayout:
         //点击"视频“时切换到第一页
         viewPager.setCurrentItem(0);
         break;
       case R.id.musicLayout:
         //点击“音乐”时切换的第二页
         viewPager.setCurrentItem(1);
         break;
     }
  }
}

第3步:在Manifest中改用大家自定义的体制:
本例中平昔在application上修纠正改,也足以独立改良一个activity

OK,以上就是享有的代码,耗子君已经在代码中注释的百般详细了,相信大家都能够明白,是否以为相当轻松吗,这么“璀璨”的功力就这么落成出来了,哈哈。我们假如想要多建多少个页也足以,然而要把滑动间隔什么管理好。若我们还会有疑难,能够随即问耗子君;以上若有不当的地点,还请指正,大家一同学习进步!

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/StyledIndicators" >

您恐怕感兴趣的稿子:

  • Android
    App中运用ViewPager+Fragment完成滑动切换效果
  • Android开辟之使用ViewPager达成图片左右滑动切换效果
  • Android编制程序完成ViewPager多页面滑动切换及动漫效果的主意
  • Android运转屏实现左右滑动切换查看效率
  • Android完成微信首页左右滑行切换效果
  • Android应用中选择ViewPager达成多页面滑动切换效果示例
  • Android
    Listview上下推动刷新tab滑动切换功效
  • Android编制程序实现左右滑行切换背景的艺术
  • Android中的ViewPager视图滑动切换类的入门实例教程
  • Android使用TabLayou+fragment+viewpager完结滑动切换页面效果
  • Android
    ViewPager废除左右滑行切换功能实现代码
  • Android编制程序达成的首页左右滑动切换功效示例

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注