今天谈下用viewpager 的基本使用,以一般APP的引导页面为列
XML代码:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/vp_guide" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/ll_line" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="80dp" android:orientation="horizontal" /> </RelativeLayout>
//适配器代码
package com.example.viewpagerdemo2; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import java.util.ArrayList; import java.util.List; /** * Created by Administrator on 2017/3/13/013. */ public class MyPagerAdapter extends PagerAdapter { List<ImageView> list = new ArrayList<>(); Context context; public MyPagerAdapter(Context context) { this.context = context; for (int i = 1; i < 4; i++) { ImageView imageView = new ImageView(context); try { //反射加载本地资源图片 imageView.setImageResource(R.mipmap.class.getField("img" + i).getInt(null)); imageView.setScaleType(ImageView.ScaleType.FIT_XY); list.add(imageView); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (NoSuchFieldException e) { e.printStackTrace(); } } } //获取视图长度 @Override public int getCount() { return list.size(); } //固定写法 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //加载视图 @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); return list.get(position); } //删除视图(删除父类方法,从重写remove方法) @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } }
//mainactivity代码
//一般APP引导页面 public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener { LinearLayout ll_line; ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { viewPager = (ViewPager) findViewById(R.id.vp_guide); ll_line = (LinearLayout) findViewById(R.id.ll_line); //注意在适配器前面创建 createLine(); //设置适配器 viewPager.setAdapter(new MyPagerAdapter(this)); //监听 viewPager.addOnPageChangeListener(this); } //画圆 private void createLine() { //设置圆的宽高 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20); //设置圆之间距离 params.setMargins(20, 20, 20, 20); for (int i = 0; i < 3; i++) { View view = new View(this); //把选中和没有选中自定义状态设置进去 view.setBackgroundResource(R.drawable.selecte_color); //把宽高设置到圆里面 view.setLayoutParams(params); //把圆添加到线性布局里面 ll_line.addView(view); //监听点击圆 final int finalI = i; view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //括号的i就是和选中的圆对应选中的页面 //setCurrentItem设置当前现在的item视图 viewPager.setCurrentItem(finalI); } }); } //设置默认第一个被选中 ll_line.getChildAt(0).setSelected(true); } //viewpager监听 //滑动状态监听(一般设置动画) @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //选中页面改变 //定义个没有选中的圆的变量 int index; @Override public void onPageSelected(int position) { //设置当前选中的状态 ll_line.getChildAt(position).setSelected(true); //设置没有选中的状态 ll_line.getChildAt(index).setSelected(false); //把当前状态赋值为没有选中的值 index = position; } //括号如果是0:闲置 ViewPager.SCROLL_STATE_IDLE; //括号如果1:滑动中 ViewPager.SCROLL_STATE_DRAGGING; //括号如果2:复位 ViewPager.SCROLL_STATE_SETTLING //通过不同监听页面状态处理不同事件 @Override public void onPageScrollStateChanged(int state) { } }
//drawable代码
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape android:shape="oval"> <solid android:color="@android:color/white" /> </shape> </item> <item android:state_selected="false"> <shape android:shape="oval"> <solid android:color="@android:color/darker_gray" /> </shape> </item> </selector>
//效果图