最最最简单的带指示器 ViewPager引导页制作方法

@TOC最最最简单的ViewPager引导页制作方法!带指示器!

1.首先。我们先创建一个布局文件

<?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=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/ydy_btn"
        android:text="进入主页"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        android:visibility="gone" />

	//这里是哪来做指示器的
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:gravity="center"
        android:orientation="horizontal" />

</RelativeLayout>

2.创建一个Fragment

public class GuideFragment extends Fragment {
    private ViewHolder holder;
    private String imgUrl;

	//这里通过构造方法传入一个图片的路径
    public GuideFragment(String imgUrl) {
        // Required empty public constructor
        this.imgUrl = imgUrl;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_guide, container, false);
        holder = new ViewHolder(view);	//获得holder
        return view;
    }

	//最好把加载图片写在这里
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Glide.with(getActivity()).load(imgUrl).into(holder.image);
    }

    public static
    class ViewHolder {
        public View rootView;
        public ImageView image;

        public ViewHolder(View rootView) {
            this.rootView = rootView;
            this.image = (ImageView) rootView.findViewById(R.id.image);
        }
    }
}

3.Activity初始化内容以及填充内容

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn;
    private String TAG = "MainActivity";
    private Ydy ydy;	//这个是我网络请求获得的引导页对象
    private ViewPager view_pager;
    private List<Fragment> fragments;
    private LinearLayout ll;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        getGuide();
    }
	
	//初始化页面,获得控件的对象
    private void initView() {
        btn = (Button) findViewById(R.id.btn);
        btn.setOnClickListener(this);
        view_pager = (ViewPager) findViewById(R.id.view_pager);
        ll = (LinearLayout) findViewById(R.id.ll);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn:
                break;
        }
    }

	//我是通过这个请求的引导页数据,本地图片引导页的同学忽略这里,自己建个本地图片的集合
    private void getGuide() {
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder()
                .url(url)
                .get()
                .build();
        client.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {

            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String res = response.body().string();
                try {
                    JSONObject object = new JSONObject(res);
                    if (object.optInt("code") == 200) {
                        ydy = new Gson().fromJson(res, Ydy.class);
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                            	//因为网络请求数据时我使用了异步,所以就选择把在家引导页图片的方法写在这里
                                setGuide();
                            }
                        });
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
    }

    private void setGuide() {
        fragments = new ArrayList<>();
        for (int i = 0; i < ydy.getRows().size(); i++) {
            GuideFragment fragment = new GuideFragment(ydy.getRows().get(i).getImgUrl());
            fragments.add(fragment);
            //这个按钮就是用来做引导页指示器的
            //我前段时间学习的时候看到大多数人都是直接写死在布局文件
            //所以就试着能不能跟随我网络请求多少就有多少指示器按钮
            ImageButton imageButton = new ImageButton(this);
            imageButton.getBackground().setAlpha(0);
            imageButton.setImageResource(R.drawable.btn_off);
            ll.addView(imageButton);
        }
        ImageButton imageButton = (ImageButton) ll.getChildAt(0);
        imageButton.setImageResource(R.drawable.btn_on);

        view_pager.setAdapter(new MyAdapter(getSupportFragmentManager(), 0));   //设置适配器
        view_pager.addOnPageChangeListener(new myOnClick());    //添加页面切换的监听事件
    }

    private class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(@NonNull FragmentManager fm, int behavior) {
            super(fm, behavior);
        }

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

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

    private class myOnClick implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (position == fragments.size() - 1) {
                btn.setVisibility(View.VISIBLE);
            } else {
                btn.setVisibility(View.GONE);
            }
            //循环,ll.getChildCount()是获取了这个布局里面的子控件个数
            for (int i = 0; i < ll.getChildCount(); i++) {
                ImageButton imageButton1 = (ImageButton) ll.getChildAt(i);
                //改变所选中的引导页对应的指示器按钮的图片以提示位置
                if (i == position) {
                    imageButton1.setImageResource(R.drawable.btn_on);
                } else {
                    imageButton1.setImageResource(R.drawable.btn_off);
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

4.本人才学了2个月不到,不足之处定是有的,这篇文章肯定也有很多写错的地方,劳请各位指出,谢谢

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现ViewPager2的轮播,可以按照以下步骤进行操作: 1. 在build.gradle文件中添加ViewPager2的依赖项: ``` implementation 'androidx.viewpager2:viewpager2:1.0.0' ``` 2. 在布局文件中添加ViewPager2: ``` <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="200dp" /> ``` 3. 创建一个PagerAdapter,用于填充ViewPager2的数据: ``` class MyPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) { private val images = arrayOf( R.drawable.image1, R.drawable.image2, R.drawable.image3 ) override fun getItemCount(): Int { return images.size } override fun createFragment(position: Int): Fragment { val fragment = MyFragment() fragment.arguments = Bundle().apply { putInt("image", images[position]) } return fragment } } ``` 这里使用了FragmentStateAdapter来填充数据,也可以使用RecyclerView.Adapter进行填充。 4. 在Activity或Fragment中初始化ViewPager2,并设置PagerAdapter: ``` val viewPager2 = findViewById<ViewPager2>(R.id.viewPager2) val pagerAdapter = MyPagerAdapter(this) viewPager2.adapter = pagerAdapter ``` 5. 设置ViewPager2的轮播效果: ``` viewPager2.postDelayed(object : Runnable { override fun run() { viewPager2.currentItem = (viewPager2.currentItem + 1) % pagerAdapter.itemCount viewPager2.postDelayed(this, 2000) } }, 2000) ``` 在postDelayed方法中,使用了Runnable来实现ViewPager2的轮播效果。其中,2000表示轮播的间隔时间,可以根据需要进行调整。 以上就是实现ViewPager2轮播的最简单方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值