android viewpager
简介
ViewPager是Android support v4 包中的一个重要类,这个类可以实现让用户左右切换当前view,实现滑动的效果
ViewPager直接继承了ViewGroup类,和LinearLayout一样,都是一个容器,需要在里面添加我们想要显示的内容
ViewPager类需要一个PagerAdapter适配器类给他提供数据,与ListView相似.
简单使用:引导页面实现
在xml导入 viewpager
<?xml version="1.0" encoding="utf-8"?> <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=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/dot_layout" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentBottom="true" android:layout_marginBottom="30dp" android:orientation="horizontal" android:gravity="center"> </LinearLayout> </RelativeLayout>
Java 代码实现 添加适配器 于dot引导点
package com.example.viewpager; import android.support.annotation.NonNull; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TabWidget; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private ViewPager viewPager; private int[] mlayoutIDs = { R.layout.view_first, R.layout.view_second, R.layout.view_thrid, }; private List<View> views; private ViewGroup viewGroup; private List<ImageView> imageViews; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = findViewById(R.id.view_pager); viewGroup = findViewById(R.id.dot_layout); imageViews = new ArrayList<>(); views = new ArrayList<>(); for (int i = 0; i < mlayoutIDs.length; i++) { //添加视图 // views.add(getLayoutInflater().inflate(mlayoutIDs[i],null)); //添加图片视图 ImageView imageView = new ImageView(this); imageView.setImageResource(R.mipmap.ic_launcher); views.add(imageView); ImageView dot = new ImageView(this); dot.setImageResource(R.drawable.ic_launcher_background); dot.setMaxHeight(100); dot.setMaxWidth(100); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(80,80); layoutParams.leftMargin = 20; dot.setLayoutParams(layoutParams); viewGroup.addView(dot); imageViews.add(dot); } viewPager.setAdapter(pagerAdapter); //设置在屏上的视图有几个 即有几个视图不被销毁 // viewPager.setOffscreenPageLimit(4); //设置第一个展开的视图 viewPager.setCurrentItem(0); //设置dot第一次展示的位置 setDotView(0); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { setDotView(i); } @Override public void onPageScrollStateChanged(int i) { } }); } private void setDotView(int i) { for (int j = 0; j < imageViews.size() ; j++) { imageViews.get(j).setImageResource(i == j? R.drawable.dot:R.drawable.ic_launcher_background); } } PagerAdapter pagerAdapter = new PagerAdapter() { //数量 @Override public int getCount() { return views.size(); } //返回的对象是不是视图 @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { return view == o; } //添加每次的视图 @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { View view = views.get(position); container.addView(view); return view; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { View view = views.get(position); container.removeView(view); } }; }
ViewPager + Fragment 实现底部导航栏
xml布局
<?xml version="1.0" encoding="utf-8"?> <TabHost 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=".Main2Activity" android:id="@+id/tab_host"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/view_pager1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/view"> </android.support.v4.view.ViewPager> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/view" android:visibility="gone"> </FrameLayout> <View android:id="@+id/view" android:layout_width="match_parent" android:layout_height="1dp" android:background="#000000" android:layout_above="@android:id/tabs"/> <!--要用系统id--> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="60dp" android:layout_alignParentBottom="true" android:showDividers="middle" android:gravity="center"> </TabWidget> </RelativeLayout> </TabHost>
自定义Fragment
package com.example.viewpager; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MyFragment extends Fragment { private View view; public static MyFragment getFragment(String s){ MyFragment myFragment = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("key",s); myFragment.setArguments(bundle); return myFragment; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { view = inflater.inflate(R.layout.fragment,null); return view; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); if (getArguments()!= null){ TextView textView = view.findViewById(R.id.fragment_txt); textView.setText(getArguments().getString("key")); } } }
主代码实现 将底部导航与fragment相互关联
package com.example.viewpager; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.TabHost; import android.widget.TabWidget; import android.widget.TextView; public class Main2Activity extends AppCompatActivity implements TabHost.TabContentFactory { int[] strings = { R.string.first, R.string.second, R.string.thrid, }; private Fragment[] fragments; private TabHost tabHost; private ViewPager viewPager1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); tabHost = findViewById(R.id.tab_host); //初始化 tabHost.setup(); //tab 图标 //第一步 初始化数据 int[] titleIDs = { R.string.first, R.string.second, R.string.thrid }; int[] drawableIDs = { R.drawable.tab_home, R.drawable.tab_message, R.drawable.tab_me }; //第二部 数据和视图相结合 for (int i = 0; i < drawableIDs.length; i++) { View view = getLayoutInflater().inflate(R.layout.tab_layout,null); TextView textView = view.findViewById(R.id.tab_txt); ImageView imageView = view.findViewById(R.id.tab_inco); View tab = view.findViewById(R.id.tab_bg); imageView.setImageResource(drawableIDs[i]); textView.setText(titleIDs[i]); //设置tabhos背景颜色 tab.setBackgroundColor(getResources().getColor(R.color.white)); tabHost.addTab(tabHost.newTabSpec(getString(titleIDs[i])) .setIndicator(view) .setContent(this)); } //存放Fragment的数组 fragments = new Fragment[]{ MyFragment.getFragment(getResources().getString(R.string.first)), MyFragment.getFragment(getResources().getString(R.string.second)), MyFragment.getFragment(getResources().getString(R.string.thrid)), }; viewPager1 = findViewById(R.id.view_pager1); viewPager1.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int i) { // return MyFragment.getFragment(getResources().getString(strings[i])); return fragments[i]; } @Override public int getCount() { return fragments.length; } }); viewPager1.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { if (tabHost != null){ tabHost.setCurrentTab(i); } } @Override public void onPageScrollStateChanged(int i) { } }); tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String s) { //获取当前tabhost的位置 int position = tabHost.getCurrentTab(); viewPager1.setCurrentItem(position); } }); } @Override public View createTabContent(String s) { View view = new View(this); view.setMinimumHeight(0); view.setMinimumWidth(0); return view; } }
ViewPager 自定义酷炫动画
ViewPager自带了一个setPageTransformer用于设置切换动画~
setPageTransformer (boolean reverseDrawingOrder, PageTransformer transformer）需要传入两个参数
第一个参数：如果为true，则表明自定义的pageTransformer需要 page view从后到前的顺序绘制，反之则为false。
第二个参数：传入一个自定义的pageTransformer对象
因此实现炫酷动画的关键点就在于：自定义pageTransformer
Google官方给我们展示了两个动画例子：DepthPageTransformer和ZoomOutPageTransformer，比较炫。我们就以Google官方的例子来学习自定义pageTransformer,以此为基础，我们可以自定义各种各样的动画实现效果。
