轉載請注明出處
作者：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烁峭、圖片的展示
可以看到我是用瀑布流的方式來實現(xiàn)圖片的展示约郁，效果還不錯鬓梅，但其實實現(xiàn)起來也是很簡單的
先寫個圖片的布局作為 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，這個一種卡片式布局谎僻，能讓圖片看起來就像一張卡片一樣，相當的優(yōu)雅赤拒、美觀秫筏。
接著編寫 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;
}
}
