转载请注明出处
作者：developerHaoz
Github 地址：developerHaoz
本文为 手把手教你从零开始做一个好看的 APP - Day four ，如果想看该系列的其他文章，请点击以下连接
手把手教你从零开始做一个好看的 APP - Day three
手把手教你从零开始做一个好看的 APP - Day four
手把手教你从零开始做一个好看的 APP - Day five
Day four
一、图片的获取
1、根据返回的数据来编写图片的实体类
public class MeiziBean {
@SerializedName("_id")
private String id;
@SerializedName("url")
private String imageUrl;
@SerializedName("who")
private String who;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getImageUrl() {
return imageUrl;
}
public MeiziBean(String imageUrl){
this.imageUrl = imageUrl;
}
}
2、图片的展示
可以看到我是用瀑布流的方式来实现图片的展示，效果还不错，但其实实现起来也是很简单的
先写个图片的布局作为 RecyclerView 的 Item
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/item_iv_meizi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</android.support.v7.widget.CardView>
可以看到我在 ImageView 的外面加了一个 CardView，这个一种卡片式布局，能让图片看起来就像一张卡片一样，相当的优雅、美观。
接着编写 Adapter，将数据和界面进行绑定
public class MeiziAdapter extends RecyclerView.Adapter<MeiziAdapter.MeiziViewHolder> {
private List<MeiziBean> mMeiziBeanList;
private Fragment mFragment;
public MeiziAdapter(List<MeiziBean> mMeiziBeanList, Fragment mFragment){
this.mMeiziBeanList = mMeiziBeanList;
this.mFragment = mFragment;
}
@Override
public MeiziViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_meizi, null);
return new MeiziViewHolder(view);
}
@Override
public void onBindViewHolder(MeiziViewHolder holder, final int position) {
Glide.with(mFragment)
.load(mMeiziBeanList.get(position).getImageUrl())
.fitCenter()
.dontAnimate()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(holder.mIvMeizi);
holder.mIvMeizi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ArrayList<String> resultList = new ArrayList<String>();
for (MeiziBean meiziBean : mMeiziBeanList) {
resultList.add(meiziBean.getImageUrl());
}
DetailActivity.startActivity(mFragment.getActivity(), resultList, position);
}
});
}
@Override
public int getItemCount() {
if(mMeiziBeanList.size() > 0){
return mMeiziBeanList.size();
}
return 0;
}
public static class MeiziViewHolder extends RecyclerView.ViewHolder{
ImageView mIvMeizi;
public MeiziViewHolder(View itemView) {
super(itemView);
mIvMeizi = (ImageView) itemView.findViewById(R.id.item_iv_meizi);
}
}
}
最后在 Fragment 进行数据的获取，以及布局的初始化就行了
public class MeiziFragment extends Fragment {
......
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_meizi, container, false);
ButterKnife.bind(this, view);
initView();
refreshMeizi();
return view;
}
/**
* 刷新当前界面
*/
private void refreshMeizi() {
mRefresh.setColorSchemeResources(R.color.colorPrimary);
mRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
initView();
mRefresh.setRefreshing(false);
}
});
}
private void initView() {
VolleyHelper.sendHttpGet(getActivity(), MeiziApi.getMeiziApi(), new VolleyResponseCallback() {
@Override
public void onSuccess(String s) {
response = s;
meiziBeanList = GsonHelper.getMeiziBean(response);
mRvShowMeizi.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
Collections.shuffle(meiziBeanList);
mRvShowMeizi.setAdapter(new MeiziAdapter(meiziBeanList, MeiziFragment.this));
}
@Override
public void onError(VolleyError error) {
Logger.d(error);
}
});
}
3、详情页面的展示
干巴巴的，整个模块只能显示妹子的图片怎么行呢！！！怎么着也得能查看大图，根据手势放大缩小，以及浏览下一张图片才行嘛，说干就干。
因为图片需要有根据手势来放大缩小的功能，因此我便想到了 PhotoImageView，这是网上一个大神写的，继承自 ImageView 的一个自定义控件。图片加载我用的是
Glide，如果没了解过这个库的，强烈推荐，一行代码就能搞定图片加载，你确定不研究一下。这里附上一篇有关 Glide 的文章 Glide 一个强大的图片加载框架
public class DetailFragment extends Fragment {
public static DetailFragment newInstance(String imageUrl) {
DetailFragment fragment = new DetailFragment();
Bundle bundle = new Bundle();
bundle.putString(IMAGE_URL, imageUrl);
fragment.setArguments(bundle);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_detail, container, false);
ButterKnife.bind(this, view);
Bundle bundle = getArguments();
String imageUrl = bundle.getString(IMAGE_URL);
Glide.with(this).load(imageUrl).into(mPvShowPhoto);
mPvShowPhoto.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float v, float v1) {
getActivity().finish();
}
@Override
public void onOutsidePhotoTap() {
}
});
return view;
}
}
