Android JetPack学习总结（十六）

滑动图片浏览

Demo地址

这次是基于上回做的图片画廊，加入了点击滑动查看图片的功能。

这次需要在查看原图的fragment上做一些改动。首先是布局文件要使用viewPager2：

//fragment_pager_photo.xml
<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"
    android:background="@android:color/primary_text_light_nodisable"
    tools:context=".PagerPhotoFragment">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/photeTag"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        android:gravity="bottom|clip_horizontal|center_horizontal"
        android:text="@string/hello_blank_fragment"
        android:textColor="@color/cardview_light_background" />

</FrameLayout>

在上面的viewPager中需要放上显示原图的ImageVIew，需要再建立一个布局文件（PhotoView是添加双击放大缩小）：

//pager_photo_view.xml
<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">

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/pagerPhoto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        tools:srcCompat="@tools:sample/avatars" />
</LinearLayout>

为这个ViewPager2设置适配器：

//PagerPhotoListAdapter.java
public class PagerPhotoListAdapter extends ListAdapter<PhotoItem,PagerPhotoViewHolder> {
    protected PagerPhotoListAdapter() {
        super(new DiffUtil.ItemCallback<PhotoItem>() {
            @Override
            public boolean areItemsTheSame(@NonNull PhotoItem oldItem, @NonNull PhotoItem newItem) {
                return oldItem==newItem;
            }

            @Override
            public boolean areContentsTheSame(@NonNull PhotoItem oldItem, @NonNull PhotoItem newItem) {
                return oldItem.getPhotoId()==newItem.getPhotoId();
            }
        });
    }

    @NonNull
    @Override
    public PagerPhotoViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.pager_photo_view,parent,false);
        return new PagerPhotoViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull PagerPhotoViewHolder holder, int position) {
        ImageView imageView=holder.itemView.findViewById(R.id.pagerPhoto);
        Glide.with(holder.itemView)
                .load(getItem(position).getFullURL())
                .placeholder(R.drawable.ic_baseline_photo_24)
                .into(imageView);
    }
}

class PagerPhotoViewHolder extends RecyclerView.ViewHolder{

    public PagerPhotoViewHolder(@NonNull View itemView) {
        super(itemView);
    }
}

在显示图片明细的fragment中绑定适配器：

//PagerPhotoFragment
public class PagerPhotoFragment extends Fragment {

    ViewPager2 viewPager2;
    PagerPhotoListAdapter pagerPhotoListAdapter;
    ArrayList<PhotoItem> photoList;
    TextView photoTag;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view=inflater.inflate(R.layout.fragment_pager_photo, container, false);
        viewPager2=view.findViewById(R.id.viewPager2);
        photoTag=view.findViewById(R.id.photeTag);
        return view;
    }
}

最后需要在画廊的适配器中添加点击响应，当点击时将url和当前位置传到明细fragment中

//GalleryAdapter
public class GalleryAdapter extends ListAdapter<PhotoItem, MyViewHolder> {
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.gallery_cell,parent,false);
        final MyViewHolder holder=new MyViewHolder(view);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Bundle bundle=new Bundle();
                bundle.putParcelableArrayList("PHOTO_LIST", new ArrayList<Parcelable>(getCurrentList()));//...
                bundle.putInt("PHOTO_POSITION",holder.getAdapterPosition());
                NavController navController = Navigaion.findNavController(holder.itemView);
                navController.navigate(R.id.action_galleryFragment_to_pagerPhotoFragment, bundle);
            }
        });
        return holder;
    }

}

pagerPhotoFragment在启动时需要获取这些信息，并且为viewPager2设置了滑动监听器，setCurrentItem是设置初始的页面号：

//PagerPhotoFragment
public class PagerPhotoFragment extends Fragment {

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        photoList=getArguments().getParcelableArrayList("PHOTO_LIST");
        pagerPhotoListAdapter=new PagerPhotoListAdapter();
        viewPager2.setAdapter(pagerPhotoListAdapter);
        pagerPhotoListAdapter.submitList(photoList);

        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                photoTag.setText(position+1+"/"+photoList.size());
            }
        });

        viewPager2.setCurrentItem(getArguments().getInt("PHOTO_POSITION"),true);//平滑移动
    }
}