仿新闻图片浏览

本文是仿网易新闻中的图片浏览示意，但是又增加了些图片翻动时的效果。效果如下：



该图片是网上实时更新的图，此处不在有JSON的解析等，点击该图片后把URL传递给 Activity，以此来加载。

布局文件效果如下：



其代码如下 news_pict_show_layout：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
android:id="@+id/news_pic_show_top"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@android:color/black" />

<View
android:id="@+id/news_pic_show_bottom"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="0dp"
android:background="@android:color/black" />

<com.crazy.toutiaonews.NewsPicShowViewPager
android:id="@+id/news_pic_show_viewpager"
android:layout_below="@id/news_pic_show_top"
android:layout_above="@id/news_pic_show_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.crazy.toutiaonews.NewsPicShowViewPager>

<TextView
android:id="@+id/news_pic_show_nums"
android:text="3"
android:layout_below="@id/news_pic_show_viewpager"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:textStyle="italic"
android:textSize="14sp"
android:textColor="@android:color/white"
android:background="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/news_pic_show_xiegang"
android:text="/"
android:layout_toLeftOf="@id/news_pic_show_nums"
android:layout_below="@id/news_pic_show_viewpager"
android:layout_marginTop="10dp"
android:layout_marginRight="2dp"
android:textStyle="italic"
android:textSize="14sp"
android:textColor="@android:color/white"
android:background="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/news_pic_show_current"
android:text="1"
android:layout_toLeftOf="@id/news_pic_show_xiegang"
android:layout_below="@id/news_pic_show_viewpager"
android:layout_marginTop="10dp"
android:layout_marginRight="1dp"
android:textStyle="bold"
android:textSize="14sp"
android:textColor="@android:color/white"
android:background="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

NewsPicShow.java :

package com.crazy.toutiaonews;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
*  Created by antimage on 2016/1/18.
*/
public class NewsPicShow extends Activity {

private List<Bitmap> bitmaps;
private TextView nums_txt, num_txt;
private NewsPicShowViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_pict_show_layout);

initData();
}

private void initData(){
nums_txt = (TextView)findViewById(R.id.news_pic_show_nums);
num_txt = (TextView)findViewById(R.id.news_pic_show_current);
viewPager = (NewsPicShowViewPager)findViewById(R.id.news_pic_show_viewpager);
Intent intent = getIntent();
String new_pics_url = intent.getStringExtra("NEWS_PICS_URLS");
ArrayList<String> url_extras = intent.getStringArrayListExtra("NEWS_PICS_URLS_EXTRA");

bitmaps = new ArrayList<>();
setImageUrl(new_pics_url);

for (String urls : url_extras) {
setImageUrl(urls);
}
}

public void setImageUrl(String url) {
DownLoadImg task = new DownLoadImg();
task.execute(url);
}

private class DownLoadImg extends AsyncTask<String, Void, Bitmap> {

@Override
protected Bitmap doInBackground(String... params) {
String url = params[0];
Bitmap bt = null;
try {
bt = Picasso.with(NewsPicShow.this).load(url).get();
} catch (IOException e) {
e.printStackTrace();
}
return bt;
}

@Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);

bitmaps.add(bitmap);
getForInfo();
}
}

private void getForInfo(){

ImagePagerAdapter adapter = new ImagePagerAdapter(NewsPicShow.this, bitmaps);
viewPager.setAdapter(adapter);

nums_txt.setText(bitmaps.size() + "");

viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
num_txt.setText(position + 1 + "");
}
});
}

public class ImagePagerAdapter extends PagerAdapter {

private Context mContext;
private List<Bitmap> bitmapList;

public ImagePagerAdapter(Context context, List<Bitmap> bitmapList) {
super();
mContext = context;
this.bitmapList = bitmapList;
}

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

@Override
public float getPageWidth(int position) {
return 1f;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

ImageView imageView = new ImageView(mContext);
imageView.setImageBitmap(bitmapList.get(position));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
container.addView(imageView);
viewPager.setObjectForPosition(imageView, position);
return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView((View) object);
}

@Override
public boolean isViewFromObject(View view, Object object) {

return (view == object);
}

}

}

代码中关于 viewpager 的知识在前面的多篇博客中都有介绍。

此效果的难点在与其滑动的效果。怎样实现其效果在代码的注释中有，此代码是从网上找到的。
NewsPicShowViewPager.java ：

package com.crazy.toutiaonews;

import java.util.HashMap;
import java.util.LinkedHashMap;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

/**
*  Created by scxh on 2016/1/19.
*/
public class NewsPicShowViewPager extends ViewPager{

private float mTrans;
private float mScale;

/* 最大的缩小比例 */
private static final float SCALE_MAX = 0.5f;

/* 保存position与对于的View*/
private HashMap<Integer, View> mChildrenViews = new LinkedHashMap<Integer, View>();

/* 滑动时左边的元素*/
private View mLeft;

/* 滑动时右边的元素*/
private View mRight;

public NewsPicShowViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {

//滑动特别小的距离时，我们认为没有动，可有可无的判断
float effectOffset = isSmall(positionOffset) ? 0 : positionOffset;

//获取左边的View
mLeft = findViewFromObject(position);
//获取右边的View
mRight = findViewFromObject(position + 1);

// 添加切换动画效果
animateStack(mLeft, mRight, effectOffset, positionOffsetPixels);
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
}

public void setObjectForPosition(View view, int position) {
mChildrenViews.put(position, view);
}

/**
* 通过过位置获得对应的View
*/
public View findViewFromObject(int position) {
return mChildrenViews.get(position);
}

private boolean isSmall(float positionOffset) {
return Math.abs(positionOffset) < 0.0001;
}

protected void animateStack(View left, View right, float effectOffset,
int positionOffsetPixels) {
if (right != null) {
/**
* 缩小比例 如果手指从右到左的滑动（切换到后一个）：0.0~1.0，即从一半到最大
* 如果手指从左到右的滑动（切换到前一个）：1.0~0，即从最大到一半
*/
mScale = (1 - SCALE_MAX) * effectOffset + SCALE_MAX;
/**
* x偏移量： 如果手指从右到左的滑动（切换到后一个）：0-720 如果手指从左到右的滑动（切换到前一个）：720-0
*/
mTrans = -getWidth() - getPageMargin() + positionOffsetPixels;
ViewHelper.setScaleX(right, mScale);
ViewHelper.setScaleY(right, mScale);
ViewHelper.setTranslationX(right, mTrans);
}
if (left != null) {
left.bringToFront();
}
}
}

还可以使用 RecyclerView 来实现图片的浏览，但是那样就没有像 ViewPager 一样有翻页的感觉，滑动很快，就像前面中的博客中提到的相册效果点击打开链接，利用其原理实现的效果如下(图片资源来源于网络)：



布局文件的效果如下：



其代码 sec_pic_activity_layout.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
android:id="@+id/sec_pic_activity_view"
android:background="@android:color/black"
android:layout_width="match_parent"
android:layout_height="100dp"/>

<android.support.v7.widget.RecyclerView
android:id="@+id/sec_pic_recycler"
android:layout_below="@id/sec_pic_activity_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scrollbars="none" />

</RelativeLayout>

SecondPictureActivity.java :

package com.crazy.toutiaonews;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.crazy.toutiaonews.adapterofall.RecyclerViewAdapterForPict;
import com.crazy.toutiaonews.picturenewsparsejson.PictureDataT;
import com.crazy.toutiaonews.picturenewsparsejson.PictureListT;
import com.crazy.toutiaonews.picturenewsparsejson.PicturePicsListT;
import com.crazy.toutiaonews.picturenewsparsejson.PicturePicsT;
import com.crazy.toutiaonews.picturenewsparsejson.PictureTotalT;
import com.crazy.toutiaonews.utils.MyParcelable;
import com.google.gson.Gson;
import com.squareup.picasso.Picasso;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
*  Created by scxh on 2016/1/14.
*/
public class SecondPictureActivity extends Activity{

private List<Bitmap> bitmaps;
private RecyclerView mRecyclerView;
private RecyclerViewAdapterForPict adapterForPict;
private List<String> mDatas;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sec_pic_activity_layout);

init();
}

public void init(){

Intent intent = getIntent();
int pos = intent.getIntExtra("PICTURES_NUM", 0);

String str = MyParcelable.str1;

List<PictureListT> pictureListTs = forGson(str);

PicturePicsT pics = pictureListTs.get(pos).getPics();

final List<PicturePicsListT> ts = pics.getList();

final int length = ts.size();
bitmaps = new ArrayList<>();
mDatas = new ArrayList<>();

for (int i = 0; i < length; i++) {
mDatas.add(ts.get(i).getAlt());
setImageUrl(ts.get(i).getPic());
}

}

public void setImageUrl(String url) {
DownLoadImg task = new DownLoadImg();
task.execute(url);
}

private class DownLoadImg extends AsyncTask<String, Void, Bitmap> {

@Override
protected Bitmap doInBackground(String... params) {
String url = params[0];
Bitmap bt = null;
try {
bt =Picasso.with(SecondPictureActivity.this).load(url).get();
} catch (IOException e) {
e.printStackTrace();
}
return bt;
}

@Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);
bitmaps.add(bitmap);

sendDatas();
}
}

private void sendDatas(){
mRecyclerView = (RecyclerView)findViewById(R.id.sec_pic_recycler);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

mRecyclerView.setLayoutManager(layoutManager);

adapterForPict = new RecyclerViewAdapterForPict(this, bitmaps, mDatas);

mRecyclerView.setAdapter(adapterForPict);

}

/**
*  解析 JSON
*/
private List<PictureListT> forGson(String str){

Gson gson = new Gson();

PictureTotalT pictureTotalT = gson.fromJson(str, PictureTotalT.class);

PictureDataT pictureDataT = pictureTotalT.getData();
// 该集合包括（总数:下标从 0 到 19） title pic 和 跟帖的数量
List<PictureListT> pictureListTs = pictureDataT.getList();

return pictureListTs;
}

}

关于 RecyclerView 的知识在前的博客文章中多次提到。

RecyclerViewAdapterForPict.java :

package com.crazy.toutiaonews.adapterofall;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.crazy.toutiaonews.R;

import java.util.ArrayList;
import java.util.List;

/**
*  Created by antimage on 2016/1/17.
*/
public class RecyclerViewAdapterForPict extends
RecyclerView.Adapter<RecyclerViewAdapterForPict.CrazyViewHolder> {

private List<Bitmap> bitmapList;
private LayoutInflater inflater;
private List<String> mDatas;
private int mScreenWidth;
private int mScreenHeight;

public RecyclerViewAdapterForPict(Context context,
List<Bitmap> bitmapList,
List<String> mDatas){
inflater = LayoutInflater.from(context);
if (bitmapList == null || mDatas == null) {
bitmapList = new ArrayList<>();
mDatas = new ArrayList<>();
} else {
this.bitmapList = bitmapList;
this.mDatas = mDatas;
}

mScreenWidth = context.getResources().getDisplayMetrics().widthPixels;
mScreenHeight = context.getResources().getDisplayMetrics().heightPixels;
}

@Override
public CrazyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.pict_erjishitu_recycler_item, parent, false);
CrazyViewHolder cViewHolder = new CrazyViewHolder(view);

cViewHolder.imageView = (ImageView)view.findViewById(R.id.sec_pic_activity_image);
cViewHolder.textView = (TextView)view.findViewById(R.id.sec_pic_activity_txt);
return cViewHolder;
}

@Override
public void onBindViewHolder(CrazyViewHolder holder, int position) {
holder.imageView.setImageBitmap(bitmapList.get(position));

ViewGroup.LayoutParams paramsImg = holder.imageView.getLayoutParams();
paramsImg.height = mScreenHeight-200;
paramsImg.width = mScreenWidth;
holder.imageView.setLayoutParams(paramsImg);

ViewGroup.LayoutParams paramsTxt = holder.textView.getLayoutParams();
paramsTxt.height = 150;
paramsTxt.width = mScreenWidth;

holder.textView.setText(mDatas.get(position));
}

@Override
public int getItemCount() {
return bitmapList.size();
}

public class CrazyViewHolder extends RecyclerView.ViewHolder  {

ImageView imageView;
TextView textView;

public CrazyViewHolder(View itemView) {
super(itemView);
}
}
}

在其中用到的 pict_erjishitu_recycler_item.xml 布局文件效果如下：



其代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/sec_pic_activity_txt"
android:text="内容的描述"
android:padding="10dp"
android:maxLines="6"
android:layout_alignParentBottom="true"
android:textColor="@android:color/white"
android:background="@android:color/black"
android:layout_width="match_parent"
android:layout_height="150dp" />

<ImageView
android:id="@+id/sec_pic_activity_image"
android:layout_above="@id/sec_pic_activity_txt"
android:src="@drawable/ic_launcher"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>