仿新闻图片浏览

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

该图片是网上实时更新的图，此处不在有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>