Android控件–ViewPager
1.ViewPager是用来干什么的
ViewPager是多个视图的管理者
2.ViewPager常用效果
1.引导界面，相册多图片预览
2.多Tab页面，App导航
3.广告播放
3.应用背景
1.android.support.v4.view.ViewPager
4.效果演示
a.引导界面
public class ViewPagerActivity extends AppCompatActivity {
/***
* 1.布局文件中创建viewpager控件
* 2.创建视图数组(初始化数据)
* 3.设置adapter
* 4.设置指示器
*/
private List<View> views = new ArrayList<>();
private ViewPager viewPager;
//视图数组
private int [] layoutIDs = {R.layout.onetext,R.layout.twotext,R.layout.threetext};
//设置指示器
private List<ImageView> dotview = new ArrayList<>();
private ViewGroup dotviewgroup;
private ImageView dotimage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
viewPager = findViewById(R.id.viewpager);
dotviewgroup = findViewById(R.id.dot);
for (int i = 0; i < layoutIDs.length; i++) {
views.add(getLayoutInflater().inflate(layoutIDs[i],null));
//设置指示器--------------------------------------------
dotimage = new ImageView(this);
dotimage.setImageResource(R.mipmap.ic_launcher);
//指示器最大宽高
dotimage.setMaxHeight(100);
dotimage.setMaxWidth(100);
//设置LinearLayout里面的点宽高
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(80,80);
//每个都距左边20
layoutParams.leftMargin = 20;
//把前面设置的设置到图片上
dotimage.setLayoutParams(layoutParams);
//使控件不响应点击触摸事件
dotimage.setEnabled(false);
dotviewgroup.addView(dotimage);
dotview.add(dotimage);
//---------------------------------------------
}
//设置缓存多少张
viewPager.setOffscreenPageLimit(3);
//进入的时候显示第一页
viewPager.setCurrentItem(0);
//设置第一个指示器
setdotview(0);
viewPager.setAdapter(pagerAdapter);
//监听每一页被改变的时候
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//设置当前视图的指示器变化
@Override
public void onPageSelected(int position) {
setdotview(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//设置当前页面显示指示器对应位置
private void setdotview(int position) {
for (int i = 0; i < dotview.size(); i++) {
dotview.get(i).setImageResource(position == i ? R.mipmap.head : R.mipmap.ic_launcher);
}
}
PagerAdapter pagerAdapter = new PagerAdapter() {
//总共多少页
@Override
public int getCount() {
return layoutIDs.length;
}
//instantiateItem返回的视图是不是和当前的视图一样 就可以复用了
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//把每次的视图添加进去
@Override
public Object instantiateItem(ViewGroup container, int position) {
//找到当前的视图
View chil = views.get(position);
//添加到显示
container.addView(chil);
return chil;
}
//销毁释放 默认缓存3张
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
};
}
b.导航页
b.1 主页面
public class TabViewPagerActivity extends AppCompatActivity implements TabHost.TabContentFactory{
/**
* fragmentViewPager
* 1.布局中添加ViewPager
* 2.创建三个fragment设置到viewpage里
* 3.创建三个tab
* 4.tab和viewpage互相关联
* @param savedInstanceState
*/
private ViewPager viewPager;
private TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_view_pager);
viewPager = findViewById(R.id.tab_viewpager);
//初始化Tab导航栏 Alt+Enter创建string
tabHost = findViewById(R.id.tab_host);
tabHost.setup();
//三个Tab
int[] titleIDs = {R.string.home,R.string.messge,R.string.me};
int[] srcIDs = {R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher};
//数据和视图相结合 这里只创建了一个tab的视图 使用循环把三个数据加载进去
for (int i = 0; i < titleIDs.length ; i++) {
View view = getLayoutInflater().inflate(R.layout.one_tab,null,false);
ImageView src = view.findViewById(R.id.one_image);
TextView text = view.findViewById(R.id.one_text);
src.setImageResource(srcIDs[i]);
text.setText(titleIDs[i]);
//设置tab
tabHost.addTab(tabHost.newTabSpec(getString(titleIDs[i]))
//设置分割线
.setIndicator(view)
.setContent(this)
);
}
//三个fragment
final Fragment[] fragments = new Fragment[]{Testfragment.newInstance(0),Testfragment.newInstance(1),Testfragment.newInstance(2)};
viewPager.setOffscreenPageLimit(fragments.length);
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragments[position];
}
@Override
public int getCount() {
return fragments.length;
}
});
//切换效果
//viewpager和tab互动
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//滑动的时候设置当前的tab
@Override
public void onPageSelected(int position) {
if(tabHost != null){
tabHost.setCurrentTab(position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//tab和viewpager的互动
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
if(tabHost!= null){
int position = tabHost.getCurrentTab();
viewPager.setCurrentItem(position);
}
}
});
}
//实现接口 创建TAB的content
@Override
public View createTabContent(String tag) {
View view = new View(this);
//隐藏
view.setMinimumHeight(0);
view.setMinimumWidth(0);
return view;
}
}
b.2主页面布局
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
tools:context=“com.example.viewpagerdome.TabViewPagerActivity”>
<TabHost
android:id="@+id/tab_host"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f8f8f8"
android:orientation="vertical"
>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<android.support.v4.view.ViewPager
android:id="@+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:layout_above="@+id/tab_divider"
>
</FrameLayout>
<View
android:id="@+id/tab_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@android:id/tabs"
android:background="#dfdfdf"
/>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:showDividers="none"
>
</TabWidget>
</RelativeLayout>
</TabHost>
b.3 fragment 页面（布局就是正常布局只有一个text）
public class Testfragment extends android.support.v4.app.Fragment {
private String mposition;
private static final String POSITION = "position" ;
public static Testfragment newInstance(int position){
Testfragment testfragment = new Testfragment();
Bundle bundle = new Bundle();
bundle.putInt(POSITION,position);
testfragment.setArguments(bundle);
return testfragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null){
mposition = String.valueOf(getArguments().getInt(POSITION));
}
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = getLayoutInflater().inflate(R.layout.fragment_text,null);
TextView textView = view.findViewById(R.id.fragment_text);
textView.setText(mposition);
return view;
}
}