Android ViewPager页面切换和PagerTabSt

作者: 百里漫步 | 来源:发表于2017-10-21 15:11 被阅读0次

Android ViewPager页面切换和PagerTabSt
自定义 BottomNavigation(底部导航栏)
学习OSChina App - BaseViewPagerFra
ReactNative的ViewPagerAndroid简述
【React Native】react-native-scrol
使用ViewPager和Fragment同时实现点击底部Tab切
模块6：绑定天气数据（2）
模块7：抽屉视图（5）
ViewPager实现轮播图
ViewPager切换动画

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </android.support.v4.view.PagerTabStrip>

        <!-- 会覆盖上面的TabStrip -->
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:layout_gravity="bottom"
             />
    </android.support.v4.view.ViewPager>

</LinearLayout>

view1.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:text="第一个界面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

view2.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个界面" />

</LinearLayout>

view3.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个界面" />

</LinearLayout>

view4.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第四个界面" />

</LinearLayout>

MainActivity.java

package com.example.android_viewpager;

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

import android.app.Activity;
import android.app.ActionBar;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;


public class MainActivity extends FragmentActivity implements OnPageChangeListener{

    private ViewPager pager;
    private List<View>viewList;
    private List<String>titleList;
    private PagerTabStrip tab;
    private List<Fragment>fragList;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
                    
   
        View view1 = View.inflate(this, R.layout.view1, null);
        View view2 = View.inflate(this, R.layout.view2, null);
        View view3 = View.inflate(this, R.layout.view3, null);
        View view4 = View.inflate(this, R.layout.view4, null);
        /*
         * 通过View对象作为数据源
         */
        viewList=new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        
        titleList=new ArrayList<String>();
        titleList.add("第一页");
        titleList.add("第二页");
        titleList.add("第三页");
        titleList.add("第四页");
        
        tab=(PagerTabStrip) findViewById(R.id.tab);
        tab.setBackgroundColor(Color.YELLOW);
        tab.setTabIndicatorColor(Color.BLUE);
        tab.setDrawFullUnderline(false);
        tab.setTextColor(Color.RED);
        
        
        pager=(ViewPager) findViewById(R.id.pager);
        MyViewPagerAdapter adapter=new MyViewPagerAdapter(viewList, titleList);
        pager.setAdapter(adapter);
        
        
        /*
         * 通过fragment作为数据源
         */
        fragList=new ArrayList<Fragment>();
        fragList.add(new Fragment1());
        fragList.add(new Fragment2());
        fragList.add(new Fragment3());
        fragList.add(new Fragment4());
    
        //pagerTabStrip
        MyFragmentPagerAdapter adapter2=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
        pager.setAdapter(adapter2);     
        
        //PagerTitleStrip
        MyFragmentPagerAdapter2 adapter3=new MyFragmentPagerAdapter2(getSupportFragmentManager(), fragList, titleList);
        pager.setAdapter(adapter3); 
        
        pager.setOnPageChangeListener(this);
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
    
        Toast.makeText(this, "这是第"+(arg0+1)+"个界面", Toast.LENGTH_SHORT).show();
    }



}

Fragment1.java

package com.example.android_viewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.view1, container, false);
    }
}

Fragment2.java

package com.example.android_viewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragmen2 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.view2, container, false);
    }
}

Fragment3.java

package com.example.android_viewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment3 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.view3, container, false);
    }
}

Fragment4.java

package com.example.android_viewpager;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment4 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.view4, container, false);
    }
}

MyViewPagerAdapter.java 自定义ViewPager适配器

package com.example.android_viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class MyViewPagerAdapter extends PagerAdapter{

    private List<View>viewList;
    private List<String>titleList;
    
    public MyViewPagerAdapter(List<View>viewList,List<String>titleList)
    {
        this.viewList=viewList;
        this.titleList=titleList;
    }
    
    //返回所有视图的数量
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return viewList.size();
    }
  
    //判断视图是否由对象产生
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0==arg1;
    }
    
    //实例化页面
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(viewList.get(position));
        return viewList.get(position);
    }
    
    //删除页面
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
        container.removeView(viewList.get(position));
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return titleList.get(position);
    }

}

MyFragmentPagerAdapter.java 通过fragment方式添加数据源，相对TabStrip

package com.example.android_viewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

    private List<Fragment>fragList;
    private List<String>titleList;
    public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragList,List<String>titleList) {
        super(fm);
        // TODO Auto-generated constructor stub
        this.fragList=fragList;
        this.titleList=titleList;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return fragList.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragList.size();
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return titleList.get(position);
    }
    

}

MyFragmentPagerAdapter2.java 相对TitleStrip的数据源

package com.example.android_viewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.ViewGroup;

public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter{

    private List<Fragment>fragList;
    private List<String>titleList;
    public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragList,List<String>titleList) {
        super(fm);
        // TODO Auto-generated constructor stub
        this.fragList=fragList;
        this.titleList=titleList;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return fragList.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragList.size();
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return titleList.get(position);
    }
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
        super.destroyItem(container, position, object);
    }
    
    @Override
    public Object instantiateItem(ViewGroup arg0, int arg1) {
        // TODO Auto-generated method stub
        return super.instantiateItem(arg0, arg1);
    }
    

}

演示效果：

ViewPager.gif

Android ViewPager页面切换和PagerTabSt
main.xml view1.xml view2.xml view3.xml view4.xml MainActi...
自定义 BottomNavigation(底部导航栏)
在Android开发中，我们页面的切换都是使用tabLayout 和viewPager 配合使用，那么我想自定...
学习OSChina App - BaseViewPagerFra
01 效果图 02 Android标准控件学习ViewPager + TabLayout实现页面切换。 03 相...
ReactNative的ViewPagerAndroid简述
ViewPager是Android中比较常见的页面切换控件, 同时, 在UIExplorerApp中也有ViewP...
【React Native】react-native-scrol
介绍一个带有TabBar和可切换页面的控件。在Android中可以看成是ViewPager和TabLayout的...
使用ViewPager和Fragment同时实现点击底部Tab切
使用ViewPager和Fragment实现页面切换，点击Tab切换Fragment，手势滑动切换Fragment...
模块6：绑定天气数据（2）
我们来实现页面标题文字的更新。Android SDK提供了针对ViewPager页面切换的监听器组件OnPageC...
模块7：抽屉视图（5）
切换城市最后来实现通过点击列表项触发ViewPager切换到对应的页面。Android SDK提供监听器组件On...
ViewPager实现轮播图
Android系统中有一个viewpager的控件，这个控件是用来实现多页面的切换的效果。经常和fragment联...
ViewPager切换动画
多种viewpager页面的切换动画