第6天ViewPager基础 -向导页-轮播图

最新推荐文章于 2024-05-16 16:55:24 发布

_yao_

最新推荐文章于 2024-05-16 16:55:24 发布

阅读量879

点赞数 2

分类专栏：安卓第1个月文章标签： android

本文链接：https://blog.csdn.net/qq_34178710/article/details/120795704

版权

安卓第1个月专栏收录该内容

24 篇文章 15 订阅

订阅专栏

第6天ViewPager基础 -向导页-轮播图

ViewPager

ViewPager

一.ViewPager介绍

android.support.v4.view.ViewPager
特点:
继承于ViewGroup, 是一个容器, 添加一系列的View

数据填充需要通过PagerAdapter（向导页）

ViewPager 通常和Fragment一起使用FragmentPagerAdapter（底部导航栏）

二.案例一：使用viewpager实现fragment切换

1.效果

在这里插入图片描述

2.实现思路

1.容器：listview----》viewpager
2.适配器：baseAdapter-----》FragmentPagerAdapter
3.数据源：List<实体类>----》List<Fragment>

3.代码：

（1）activity xml 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.viewpager.widget.ViewPager
        android:layout_weight="10"
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"></androidx.viewpager.widget.ViewPager>
    <RadioGroup
        android:id="@+id/group"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        <RadioButton
            android:checked="true"
            android:textAlignment="center"
            android:layout_weight="1"
            android:id="@+id/rb1"
            android:button="@null"
            android:text="111"
            android:textColor="@drawable/text_selecctor"
            android:drawableTop="@drawable/image_selecctor"
            android:layout_width="0dp"
            android:layout_height="match_parent">
        </RadioButton>
        <RadioButton

            android:textAlignment="center"
            android:layout_weight="1"
            android:id="@+id/rb2"
            android:button="@null"
            android:text="111"
            android:textColor="@drawable/text_selecctor"
            android:drawableTop="@drawable/image_selecctor"
            android:layout_width="0dp"
            android:layout_height="match_parent">
        </RadioButton>
        <RadioButton

            android:textAlignment="center"
            android:layout_weight="1"
            android:id="@+id/rb3"
            android:button="@null"
            android:text="111"
            android:textColor="@drawable/text_selecctor"
            android:drawableTop="@drawable/image_selecctor"
            android:layout_width="0dp"
            android:layout_height="match_parent">
        </RadioButton>

    </RadioGroup>


</LinearLayout>

（2）适配器代码：MyFragmentPagerAdater.java

public class MyPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> list;//数据源

    public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}

（3）activity核心代码：MainActivity.java

/**
 * 实现底部切换：viewpager+fragment切换
    1.容器：listview----》viewpager
    2.适配器：baseAdapter-----》FragmentPagerAdapter
    3.数据源：List<实体类>----》List<Fragment>
 */
public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private MyPagerAdapter myPagerAdapter;
    private List<Fragment> list;
    private RadioGroup radioGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        radioGroup = findViewById(R.id.group);
        viewPager = findViewById(R.id.view_pager);
        list = new ArrayList<>();
        list.add(new OneFragment());
        list.add(new TwoFragment());
        list.add(new ThreeFragment());
        myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(),list);
        viewPager.setAdapter(myPagerAdapter);
        //点击底部切换fragment
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.rb1:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.rb2:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.rb3:
                        viewPager.setCurrentItem(2);
                        break;
                     }
            }
        });
        //滑动viewpager底部切换
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        radioGroup.check(R.id.rb1);
                        break;
                    case 1:
                        radioGroup.check(R.id.rb2);
                        break;
                    case 2:
                        radioGroup.check(R.id.rb3);
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
}

三.案例2：引导页

1.效果：

在这里插入图片描述
1.自动轮播
2.滑动小圆点跟着走
3.最后一页显示立即体验按钮
4.最后一页，右上角倒计时
5.第一次打开有向导页，当第2次打开没有向导页，直接是首页

2.代码：

（1）布局welcome_activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".WelcomeActivity">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </androidx.viewpager.widget.ViewPager>
    <RadioGroup
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:orientation="horizontal"
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:checked="true"

            android:button="@null"
            android:drawableTop="@drawable/img_two"
            android:id="@+id/rb1"

            android:layout_width="wrap_content"
            android:layout_height="match_parent"></RadioButton>
        <RadioButton
            android:button="@null"
            android:drawableTop="@drawable/img_two"
            android:id="@+id/rb2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"></RadioButton>
        <RadioButton
            android:button="@null"
            android:drawableTop="@drawable/img_two"
            android:id="@+id/rb3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"></RadioButton>

    </RadioGroup>

</RelativeLayout>

对应的java代码：

//欢迎页面
public class WelcomeActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private RadioGroup radioGroup;
    private List<Fragment> list;
    private MyPagerAdapter myPagerAdapter;
    private Timer timer;
    private int position= 0;
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            viewPager.setCurrentItem(position++);
            if(position == 3){
                timer.cancel();
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        initPager();
        initTimer();
        initListsener();
    }
    private void initListsener() {
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        radioGroup.check(R.id.rb1);
                        break;
                    case 1:
                        radioGroup.check(R.id.rb2);
                        break;
                    case 2:
                        radioGroup.check(R.id.rb3);
                        break;
                }

            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    private void initTimer() {
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(101);
            }
        },1000,1000);
    }
    private void initPager() {
        radioGroup = findViewById(R.id.group);
        viewPager = findViewById(R.id.view_pager);
        list = new ArrayList<>();
        list.add(new WelcomeFragmentOne());
        list.add(new WelcomeFragmentTwo());
        list.add(new WelcomeFragmentThree());
        myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(),list);
        viewPager.setAdapter(myPagerAdapter);

    }
}

（2）WelcomeFragmentOne布局代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".fragment.WelcomeFragmentOne">

   <ImageView
       android:id="@+id/iv"     
       android:layout_width="match_parent"
       android:layout_height="match_parent"></ImageView>

</FrameLayout>

对应的java代码：

public class WelcomeFragmentOne extends Fragment {
    ImageView imageView;


    public WelcomeFragmentOne() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one_fragment_one, container, false);
       Glide.with(getContext())

                .load("https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2858426577,4189650377&fm=26&gp=0.jpg")
                .transform(new CenterCrop())//居中
                .into(imageView);
        return view;
    }

}

（3）WelcomeFragmentTwo布局代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".fragment.WelcomeFragmentTwo">

    <ImageView
        android:id="@+id/iv"   
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ImageView>

</FrameLayout>

对应的java代码：

public class WelcomeFragmentTwo extends Fragment {
    ImageView imageView;


    public WelcomeFragmentTwo() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one_fragment_one, container, false);
        imageView = view.findViewById(R.id.iv);
         Glide.with(getContext())

                .load("https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2858426577,4189650377&fm=26&gp=0.jpg")
                .transform(new CenterCrop())//居中
                .into(imageView);
        return view;
    }

}

（4）WelcomeFragmentThree布局代码：

<?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=".fragment.WelComeThreeFragment">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ImageView>

    <TextView
        android:layout_alignParentRight="true"
        android:textColor="#000"
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TextView>

对应的java代码：

public class WelcomeFragmentThree extends Fragment {

    ImageView imageView;
    TextView textView;
    Timer timer;
    int position = 5;
    Handler handler = new Handler(){
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            if(msg.what == 101){
                textView.setText("倒计时："+position--+"");
                if(position == 0){
                    Intent intent = new Intent(getActivity(), MainActivity.class);
                    startActivity(intent);
                    timer.cancel();
                }
            }
        }
    };
    public WelcomeFragmentThree() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one_fragment_one, container, false);
        imageView = view.findViewById(R.id.iv);
        textView = view.findViewById(R.id.tv);
         Glide.with(getContext())

                .load("https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2858426577,4189650377&fm=26&gp=0.jpg")
                .transform(new CenterCrop())//居中
                .into(imageView);
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(101);

            }
        },1000,1000);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getActivity(), MainActivity.class);
                startActivity(intent);
                timer.cancel();
            }
        });

        return view;
    }

}

（5）适配器代码：

public class MyPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> list;
    /**
     *
     * @param fm fragment管理器
     * @param list
     */
    public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}

四.案例3：轮播图

思路和引导页相似,但是注册fragment嵌套问题：

在这里插入图片描述

_yao_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第6天ViewPager基础 -向导页-轮播图

第6天ViewPager基础 -向导页-轮播图ViewPager一.ViewPager介绍二.效果三.思路：1个ViewPager+4个View+1个PagerAdapter四.代码ViewPager一.ViewPager介绍android.support.v4.view.ViewPager特点:继承于ViewGroup, 是一个容器, 添加一系列的View数据填充需要通过PagerAdapter（向导页）ViewPager 通常和Fragment一起使用FragmentPagerAd
复制链接

扫一扫