ViewPager--滑动控件

最新推荐文章于 2023-11-10 00:25:38 发布

之2

最新推荐文章于 2023-11-10 00:25:38 发布

阅读量205

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/qq_38188436/article/details/71429784

版权

Android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天复习下上周学习的ViewPager

ViewPager是一个滑动控件，像我们在生活中app上的引导页都可以用它实现。

ViewPager类是直接继承ViewGroup类，所以它是一个容器类，可以在其中添加其他的View。

ViewPager类需要一个PagerAdapter适配器提供数据。下面是效果图

这里我加入了圆点在xml文件中以及在最后Button点击跳转到下一个页面

ViewPager使用步骤：

1.在xml中定义

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:gravity="center"
       android:orientation="horizontal"
       android:paddingBottom="10dp">

      <ImageView
          android:id="@+id/iv_one"
          android:layout_width="20dp"
          android:layout_height="20dp"
          android:layout_marginRight="20dp"
          android:background="@drawable/selector_show" />

      <ImageView
          android:id="@+id/iv_two"
          android:layout_width="20dp"
          android:layout_height="20dp"
          android:layout_marginRight="20dp"
          android:background="@drawable/selector_show" />

      <ImageView
          android:id="@+id/iv_three"
          android:layout_width="20dp"
          android:layout_height="20dp"
          android:background="@drawable/selector_show" />
   </LinearLayout>

   <android.support.v4.view.ViewPager
       android:id="@+id/vp"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

      <android.support.v4.view.PagerTabStrip
      android:id="@+id/pt"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      </android.support.v4.view.PagerTabStrip>
   </android.support.v4.view.ViewPager>
</FrameLayout>

activity_one.xml:第一张图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center|center_horizontal"
    >
<TextView
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="绅士"
    android:textSize="25sp"
    android:textColor="#ff6c67"
    />
<ImageView
    android:id="@+id/iv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/one"
    />
</LinearLayout>

activity_two.xml:第二张图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center|center_horizontal"
    >
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="一半"
    android:textSize="25sp"
    android:textColor="#ff6c67"
    />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/two"
        />
</LinearLayout>

activity_two.xml:第三张图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center|center_horizontal"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="动物世界"
        android:textSize="25sp"
        android:textColor="#ff6c67"
        />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@mipmap/three"
        />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跳转"
        />
</LinearLayout>

2.在drawable文件夹下创建圆点变化前后的颜色

shape_dispaly.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff6c67"></solid>
    <corners android:radius="1000dp"></corners>
</shape>

shape_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f0f0f0"></solid>
    <corners android:radius="1000dp"></corners>
</shape>

selector_show.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_no"
    android:state_selected="false"
    />
    <item android:drawable="@drawable/shape_yes"
     android:state_selected="true"
        />
</selector>

3.创建Adapter继承PagerAdapter

public class PargerAdapter extends PagerAdapter {
    ArrayList<View> arrayList;
    Context context;
   ArrayList<String> arrayList_pts;

    public PargerAdapter(ArrayList<View> arrayList, Context context, ArrayList<String> arrayList_pts) {
        this.arrayList = arrayList;
        this.context = context;
        this.arrayList_pts = arrayList_pts;
    }

    /***数据源的大小（条目）*/
    @Override
    public int getCount() {
        return arrayList.size();
    }

    /**
     * 页面视图是否关联到特定的对象
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;//判断当前要显示的页面
    }

    /**
     * 初始化页面
     * 1.页面添加到container
     * 2.将页面返回
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(arrayList.get(position));//页面添加到container，添加位置
        return arrayList.get(position);
    }

    /**
     * 销毁当前页面
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(arrayList.get(position));
    }

    /**
     * 给pager加载标题
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return arrayList_pts.get(position);
    }
}

4.在Activity代码实现

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    View viewOne, viewTwo, viewThree;
    ArrayList<View> arrayList;

    PagerTabStrip pagerTabStrip;
    ArrayList<String> ArrayList_pts;//初始化Tab

    ArrayList<ImageView> arrayList_image;//储存布局圆点
    ImageView image_one, image_two, image_three;
    int oldPostion = 0;//记录原来的位置
    Button button;

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

        in();
        initView();
        initpoint();
    }

    /**
     * 设置圆点的
     */
    private void initpoint() {
        image_one = (ImageView) findViewById(R.id.iv_one);
        image_two = (ImageView) findViewById(R.id.iv_two);
        image_three = (ImageView) findViewById(R.id.iv_three);

        arrayList_image = new ArrayList<>();
        arrayList_image.add(image_one);
        arrayList_image.add(image_two);
        arrayList_image.add(image_three);
        image_one.setSelected(true);//设置第一个圆点为true
    }
/**滑动设置*/
    private void in() {
         arrayList = new ArrayList<>();
        LayoutInflater mInflater = LayoutInflater.from(this);//动态加载布局
        viewOne = mInflater.inflate(R.layout.activity_one, null);
        viewTwo = mInflater.inflate(R.layout.activity_two, null);
        viewThree = mInflater.inflate(R.layout.activity_three, null);
        arrayList.add(viewOne);
        arrayList.add(viewTwo);
        arrayList.add(viewThree);
//这个方法可以加载多张图片，不用在xml中定义，比上面在xml中定义的要简洁得多，而且可以减少很多不必要得代码,个人推荐这个方法
//        String[] s={"绅士","一半","动物世界"};//把文字存入数组
//        int imag[]={R.mipmap.one,R.mipmap.two,R.mipmap.three};//把图片存入数组
//        for (int i = 0; i < 3; i++) {
//            View view=LayoutInflater.from(this).inflate(R.layout.activity_one,null);//动态加载布局
//            ((TextView)view.findViewById(R.id.tv)).setText(s[i]);
//            view.findViewById(R.id.iv).setBackgroundResource(imag[i]);
//            arrayList.add(view);
//        }
        ArrayList_pts = new ArrayList<>();
        ArrayList_pts.add("第一页");
        ArrayList_pts.add("第二页");
        ArrayList_pts.add("第三页");
    }

    private void initView() {
        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pt);
        pagerTabStrip.setBackgroundColor(Color.parseColor("#ff6c67"));//背景颜色
        pagerTabStrip.setTabIndicatorColor(Color.parseColor("#ff0000"));//下划线颜色
        pagerTabStrip.setTextColor(Color.parseColor("#ffffff"));//字体颜色
        viewPager = (ViewPager) findViewById(R.id.vp);
       // viewPager.setAdapter(new PargerAdapter(arrayList,this));
        PargerAdapter pa = new PargerAdapter(arrayList, this, ArrayList_pts);
        viewPager.setAdapter(pa);
        /**
         * viewPager监听事件
         */
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**滑动时调用*/
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**停止时调用*/
            @Override
            public void onPageSelected(int position) {
                /**控制圆点变色*/
                arrayList_image.get(position).setSelected(true);//滑动后圆点变色
                arrayList_image.get(oldPostion).setSelected(false);//滑动后变为初始颜色
                oldPostion = position;//把滑动后的圆点的position给原来的oldPostion
            }

            /**滑动状态改变时调用
             * 滑动状态：
             * 1.SCROLL_STATE_DRAGGING  用户正在拖拽页面   1
             * 2.SCROLL_STATE_SETTLING  用户手指离开屏幕 viewPager惯性滑动   2
             * 3.SCROLL_STATE_IDLE  滑动停止   0*/
            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state) {
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        Log.e("log", "用户正在拖拽页面");
                        break;
                    case ViewPager.SCROLL_STATE_SETTLING:
                        Log.e("log", "用户手指离开屏幕 viewPager惯性滑动");
                        break;
                    case ViewPager.SCROLL_STATE_IDLE:
                        Log.e("log", "滑动停止");
                        button = (Button) findViewById(R.id.button);
                        if(viewPager.getCurrentItem()==2){//getCurrentItem()当前显示页
                            button.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    Intent intent= new Intent(MainActivity.this,Activity_Tz.class);
                                    startActivity(intent);
                                }
                            });
                        }
                        break;
                }
            }
        });
    }
}

之2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ViewPager--滑动控件

今天复习下上周学习的ViewPagerViewPager是一个滑动控件，像我们在生活中app上的引导页都可以用它实现。ViewPager类是直接继承ViewGroup类，所以它是一个容器类，可以在其中添加其他的View。ViewPager类需要一个PagerAdapter适配器提供数据。下面是效果图ViewPager使用步骤：1.在xml中定义activity_ma
复制链接

扫一扫