ViewPager的使用

netScorpion 发布于2019-08-14 15:17 / 844人阅读

摘要：写到这里我忽然忘记我们把笔记详情页给忘了，没有它我们该拿什么去显示笔记的详情呢，好吧，赶快去新建一个命名为上面的方法和之前的所使用的技巧是一样的。从中启动传参的方法是，自然的，我们就有了这个常量。

一前言

上次我们用RecyclerView做了一个简单的显示笔记的小程序，今天我们用ViewPager来扩展它的功能：当我们点击笔记列表的其中某条笔记时，它可以跳到另外一个页面完整的显示这条笔记的内容，更人性化的设计是，在某条笔记的详情页面，我们可以左右滑动以查看上一条或者下一条，而不是返回主列表再去选择，话不多说，操作起来！

二准备工作

1.首先我们创建一个Activity，命名为NotePagerActivity
2.定义NotePagerActivity的私有字段：

</>复制代码 
public class NotePagerActivity extends AppCompatActivity {
    private static final String EXTRA_NOTE_ID = "com.aristark.note.note.id";
    private ViewPager noteViewPager;
    private ArrayList notes;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_note_pager);
    }
}

因为我们是从列表Activity那里点击某一个笔记项才进入到NotePagerActivity，因此需要传入该笔记项的UUID（很容易想到两个Activity之间传递数据所使用的方法是Intent附加参数，也就是putExtra()方法，因此我们将该常量命名为EXTRA_NOTE_ID，养成这样良好的命名方法对以后读懂这段代码是很重要的！先不用好奇为什么要把它设为私有，一会儿就明白其中的妙处了），noteViewPager和notes自然不用多说，这是今天的主角。

3.在布局中activity_note_pager设置ViewPager
直接上代码

</>复制代码

4为NotePagerActivity编写newIntent方法

</>复制代码 
public static Intent newIntent(Context context,UUID uuid){
    Intent i = new Intent(context,NotePagerActivity.class);
    i.putExtra(EXTRA_NOTE_ID,uuid);
    return i;
}

这样我们每次想要启动NotePagerActivity时只需调用这个静态方法，而不用再balabalabala重复一堆昨天的故事。

三设置ViewPager

其实我也不知道为什么用设置这个词，应该用使用？装配？其实不需要太在意，我们的目的现在很简单，就是按照ViewPager给的接口传入相应的参数，让它工作起来就行（对新手而言）！
先贴上NoteListsFragment的代码

</>复制代码 
package com.aristark.note;

</>复制代码 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
public class NotesListFragment extends Fragment {
    private RecyclerView noteRecycler;
    private NoteAdapter noteAdapter;

</>复制代码 
    public NotesListFragment() {
        // Required empty public constructor
    }

</>复制代码 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        // Inflate the layout for this fragment
//        return inflater.inflate(R.layout.fragment_notes_list, container, false);
        View root = inflater.inflate(R.layout.fragment_notes_list,container,false);
        noteRecycler = (RecyclerView) root.findViewById(R.id.note_recycler_view);
        noteRecycler.setLayoutManager(new LinearLayoutManager(getActivity()));
//        NoteLab noteLab = NoteLab.getNoteLab(getActivity());
//        ArrayList notes = noteLab.getNotes();
//        noteAdapter = new NoteAdapter(notes);
//        noteRecycler.setAdapter(noteAdapter);
        updateView();
        return root;
    }
    @Override
    public void onResume() {
        super.onResume();
        updateView();
    }
    private class NoteHolder extends RecyclerView.ViewHolder{
        private TextView noteTitle;
        private TextView noteContent;
        private TextView noteDate;
        public NoteHolder(View root) {
            super(root);
            noteTitle = (TextView) root.findViewById(R.id.list_item_note_title);
            noteContent = (TextView) root.findViewById(R.id.list_item_note_content);
            noteDate = (TextView) root.findViewById(R.id.list_item_note_date);
        }
        public void bindView(Note n){
            this.note = n;
            noteTitle.setText(note.getTitle());
            noteContent.setText(note.getContent());
            Calendar calendar = Calendar.getInstance();
            calendar.setTime(note.getDate());
            int year = calendar.get(1);
            int day = calendar.get(5);
            int month = calendar.get(2)+1;
            String date = year+"年"+month+"月"+day+"日";
            noteDate.setText(date);
        }
    }
    private class NoteAdapter extends RecyclerView.Adapter{
        private List notes;
        public NoteAdapter(List notes){
            this.notes = notes;
        }
        public void setNotes(List notes) {
            this.notes = notes;
        }
        @Override
        public NoteHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            LayoutInflater layoutInflater = LayoutInflater.from(getActivity());
            View view = layoutInflater.inflate(R.layout.list_item_note,parent,false);
            return new NoteHolder(view);
        }
        @Override
        public void onBindViewHolder(NoteHolder holder, int position) {
            Note note = notes.get(position);
            holder.bindView(note);
        }
        @Override
        public int getItemCount() {
            return notes.size();
        }
    }
    public void updateView(){
        NoteLab noteLab = NoteLab.getNoteLab(getActivity());
        ArrayList notes = noteLab.getNotes();
        if (noteAdapter == null){
            noteAdapter = new NoteAdapter(notes);
            noteRecycler.setAdapter(noteAdapter);
            return;
        }
        noteAdapter.setNotes(notes);
        noteRecycler.setAdapter(noteAdapter);
    }
}

和上回的代码略有不同，我做了一些小小的封装。我们把注意力集中到类NoteHolder的构造方法这里来，它传入的参数root的类型是View，也就是笔记列表项的每一个笔记记录，我们在这里设置一个监听器，当用户点击的时候，我们就让页面跳转到笔记详情页面，也就是CrimePagerActivity，来，写代码：

</>复制代码 
    public NoteHolder(View root) {
        super(root);
        root.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = NotePagerActivity.newIntent(getActivity(),note.getUuid());

</>复制代码 
                startActivity(i);
            }
        });
        noteTitle = (TextView) root.findViewById(R.id.list_item_note_title);
        noteContent = (TextView) root.findViewById(R.id.list_item_note_content);
        noteDate = (TextView) root.findViewById(R.id.list_item_note_date);
    }

下面把注意力转移到CrimePagerActivity：
1.获取ViewPager：

</>复制代码 
 noteViewPager = (ViewPager) findViewById(R.id.note_view_pager);

2.从传来的Intent里获取uuid，并以此uuid从全局静态对象NoteLab中获取notes：

</>复制代码 
 UUID uuid = （UUID）getIntent().getSerializableExtra(EXTRA_NOTE_ID);
 notes = NoteLab.getNoteLab(this).getNotes();

这里再一次体会到了EXTRA_NOTE_ID的方便之处吧。
3.为ViewPager设置Adapter（ViewPager和RecyclerView一样，每个页面的布局都是一样的，只是填充的数据不一样，因为需要Adapter去适配，这里感叹一句想到这种机制的大神真的应该膜拜！简直解放了生产力有没有！）OK,show you the code:

</>复制代码 
 FragmentManager fragmentManager = getSupportFragmentManager();
        noteViewPager.setAdapter(new FragmentPagerAdapter(fragmentManager) {
            @Override
            public Fragment getItem(int position) {
                return null;
            }
            @Override
            public int getCount() {
                return notes.size();
            }
        });

是不是似曾相识？之所以要用FragmentPagerAdapter，是因为它可以为我们省去从Activity中启动Fragment的一系列事务代码，十分方便。写到这里我忽然忘记我们把笔记详情页给忘了，没有它我们该拿什么去显示笔记的详情呢，好吧，赶快去新建一个fragment命名为NoteDetailFragment：

</>复制代码 
public class NoteDetailFragment extends Fragment {
    private static String ARG_NOTE_ID;
    private Note note;
    TextView noteDate;
    TextView noteTitle;
    TextView noteContent;
    public NoteDetailFragment() {
        // Required empty public constructor
    }
     public static Fragment newFragment(UUID uuid){
         Bundle args = new Bundle();
         args.putSerializable(ARG_NOTE_ID,uuid);
         Fragment fragment = new NoteDetailFragment();
         fragment.setArguments(args);
         return fragment;
     }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        UUID uuid = (UUID) getArguments().getSerializable(ARG_NOTE_ID);
        note = NoteLab.getNoteLab(getActivity()).getNote(uuid);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.fragment_note_detail,container,false);
        noteDate = (TextView) root.findViewById(R.id.note_date);
        noteTitle = (TextView) root.findViewById(R.id.note_title);
        noteContent = (TextView) root.findViewById(R.id.note_content);
        noteDate.setText(note.getDate().toString());
        noteTitle.setText(note.getTitle());
        noteContent.setText(note.getContent());
    }
    return root;
}

上面的newFragment方法和之前的newIntent所使用的技巧是一样的。从Activity中启动Fragment传参的方法是setArguments，自然的，我们就有了ARG_NOTE_ID这个常量。
对应的布局文件代码如下：

</>复制代码

</>复制代码

回到NotePagerActivity中:

</>复制代码 
  @Override
        public Fragment getItem(int position) {
            Note note = notes.get(position);
            return NoteDetailFragment.newFragment(note.getUuid());
        }

好，编译，运行，添加几组测试数据后我们会发现不管从哪条笔记记录点击进去，都是从第一条开始显示，不用急，此时我们可以在getItem下面添加如下代码：

</>复制代码 
for (int i=0;i
用setCurrentItem来设置正确的笔记项就行了。因为结果需要动态演示，我就不贴图啦，如果有人需要代码的话我就联系我吧！我的qq：891871898求批评指正！

GPU云服务器云服务器 ViewPager android viewpager ViewPager2 viewpager卡顿

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/65562.html

ViewPager2重大更新，支持offscreenPageLimit

摘要：前言最近发布了版本，新增功能，该功能在上并不友好，现在官方将此功能延续下来，这回是骡子是马呢赶紧拉出来溜溜阅读指南内容基于版本讲解，由于正式版还未发布，如有功能变动有劳看官指出内容重点介绍的特性和预加载机制，另外包括的状态和的生命周前言最近ViewPager2发布了1.0.0-alpha04版本，新增offscreenPageLimit功能，该功能在ViewPager上并不友好，现在官方将...

番茄西红柿 2019-05-23 15:17 评论0 收藏0

发表评论

登陆后可评论

0条评论

netScorpion

男|高级讲师

我要关注我要私信

TA的文章

#聊一聊WuKong编辑器# 7 赞 6 建议 5 改进

阅读 1117·2021-11-22 14:56
使用vue+element ui 实现省市区三级联动

阅读 1193·2021-11-11 16:54
Freepik – 可免费商用高质量图片、矢量图、插图及PSD素材平台

阅读 8628·2021-09-23 11:55
网站主机是什么-主机域名是哪个？

阅读 3122·2021-09-22 15:57
独立开发变现周刊（第 17 期）：为了活下去，如何获取前200个付费用户？

阅读 2872·2021-08-27 16:25
前端基本功-常见概念(二)

阅读 757·2019-08-30 15:55
前端基础之(3) - css篇

阅读 1722·2019-08-30 15:43
仿探探卡片滑动vue封装并发布到npm

阅读 1674·2019-08-30 14:23

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

ViewPager的使用

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

ViewPager2重大更新，支持offscreenPageLimit

发表评论

0条评论

netScorpion

男|高级讲师

TA的文章

#聊一聊WuKong编辑器# 7 赞 6 建议 5 改进

使用vue+element ui 实现省市区三级联动

Freepik – 可免费商用高质量图片、矢量图、插图及PSD素材平台

网站主机是什么-主机域名是哪个？

独立开发变现周刊（第 17 期）：为了活下去，如何获取前200个付费用户？

前端基本功-常见概念(二)

前端基础之(3) - css篇

仿探探卡片滑动vue封装并发布到npm

最新活动