在Android中用动画实现新闻中浏览图片的效果

第一步：首先定义布局文件，在设置布局文件是为了实现半透明的效果，要在styles.xml中进行设置如下

<style name="Transparent" parent="AppTheme">
    <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@null</item>
        <item name="android:windowNoTitle">true</item>
</style>

接着我们就可以来布局我们的界面了，其中ViewPager用来实现图片的切换效果

<?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"
    android:background="#000" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_picture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:id="@+id/relativeLayout_info"
        style="@style/Transparent"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:background="#99000000" >

        <TextView
            android:id="@+id/tv_picture_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="图片一"
            android:textColor="#fff"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_page"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:padding="5dp"
            android:textColor="#fff"
            android:textSize="20sp" />

        <ScrollView
            android:id="@+id/scrollview_detail"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_alignParentBottom="true"
            android:padding="5dp"
            android:scrollbars="vertical" >

            <TextView
                android:id="@+id/tv_picture_info"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="该图片反应了。。。"
                android:textColor="#fff"
                android:textSize="17sp" />
        </ScrollView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativeLayout_title"
        style="@style/Transparent"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#99000000" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:padding="5dp"
            android:text="新闻图片标题"
            android:textColor="#fff"
            android:textSize="22sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="28dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableLeft="@drawable/back"
            android:onClick="onBackClick"
            android:text="返回"
            android:textColor="#fff"
            android:textSize="17sp" />
    </RelativeLayout>

</RelativeLayout>

第二步：我们就可以一点点的编写代码了，大概分了四部分。1、用initData()方法进行初始化数据2、自己定义了PictureShowAdapter让其继承了PagerAdapter 3、添加ViewPager滑动的监听事件 4、给返回按钮添加点击事件。其中，动画效果在instantiateItem()方法中实现。

public class MainActivity extends Activity
{
    //四张图片的信息
    private static final int[] images={R.drawable.picture1,R.drawable.picture2,R.drawable.picture3,R.drawable.picture4};
    private static final String[] pictureNames ={ "花", "蜜蜂", "春天", "大海" };
    private static final String[] pictureinfos ={ "这里面显示的图片一的详情信息，图片反应了。。。", "这里面显示的图片二的详情信息，图片反应了。。。", "这里面显示的图片三的详情信息，图片反应了。。。", "这里面显示的图片四的详情信息，图片反应了。。。" };
    private TextView tv_picture_name;//图片的名称
    private TextView tv_page;//当前图片是第几张图片
    private TextView tv_picture_info;//图片的详细信息
    private ViewPager vp_picture;
    private ArrayList<ImageView> imageViews;
    private RelativeLayout relativelayout_info;
    private RelativeLayout relativelayout_title;
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv_picture_name=(TextView) findViewById(R.id.tv_picture_name);
        tv_page=(TextView) findViewById(R.id.tv_page);
        tv_picture_info=(TextView) findViewById(R.id.tv_picture_info);
        vp_picture=(ViewPager) findViewById(R.id.vp_picture);
        relativelayout_info=(RelativeLayout) findViewById(R.id.relativeLayout_info);
        relativelayout_title=(RelativeLayout) findViewById(R.id.relativeLayout_title);
        initData();
        vp_picture.setAdapter(new PictureShowAdapter());
        vp_picture.setOnPageChangeListener(new ViewPagerListener());
        
    }
    //初始化数据
    private void initData()
    {
        tv_picture_name.setText(pictureNames[0]);//将第一张图片标题默认显示出来
        tv_picture_info.setText(pictureinfos[0]);//将第一张图片信息默认显示出来
        tv_page.setText("1/"+images.length);//设置默认显示的是第一张图片
        imageViews=new ArrayList<ImageView>();
        for(int i=0;i<images.length;i++)
        {
            TouchImageView im=new TouchImageView(this);//在网上找了一个图片多点触控的实现类
            im.setImageResource(images[i]);
            imageViews.add(im);
        }
    }
    
    //构建适配器
    class PictureShowAdapter extends PagerAdapter
    {

        @Override
        public int getCount()
        {
            return images.length;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1)
        {
            return arg0==arg1;
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position)
        {
            container.addView(imageViews.get(position));
            imageViews.get(position).setOnClickListener(new OnClickListener()
            {
                boolean flag=true;
                @Override
                public void onClick(View v)
                {
                    //设置动画，当点击图片的时候标题和图片信息显示，在点击消失
                    TranslateAnimation animation_up=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f);
                    animation_up.setDuration(300);
                    animation_up.setFillEnabled(true);
                    animation_up.setFillAfter(true);
                    TranslateAnimation animation_down=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,1.5f);
                    animation_down.setDuration(300);
                    animation_down.setFillEnabled(true);
                    animation_down.setFillAfter(true);
                    TranslateAnimation animation_up_reverse=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f);
                    animation_up_reverse.setDuration(300);
                    animation_up_reverse.setFillEnabled(true);
                    animation_up_reverse.setFillAfter(true);
                    TranslateAnimation animation_down_reverse=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,1.5f,Animation.RELATIVE_TO_SELF,0f);
                    animation_down_reverse.setDuration(300);
                    animation_down_reverse.setFillEnabled(true);
                    animation_down_reverse.setFillAfter(true);
                    if(flag)
                    {
                        flag=false;
                        relativelayout_title.startAnimation(animation_up);
                        relativelayout_info.startAnimation(animation_down);
                    }else
                    {
                        flag=true;
                        relativelayout_title.startAnimation(animation_up_reverse);
                        relativelayout_info.startAnimation(animation_down_reverse);
                    }
                }
            });
            return imageViews.get(position);
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object)
        {
            container.removeView((View)object);
        }
        
    }
    
    //ViewPager滑动的监听事件
    class ViewPagerListener implements OnPageChangeListener
    {

        @Override
        public void onPageScrollStateChanged(int arg0)
        {
            
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2)
        {
            
        }

        @Override
        public void onPageSelected(int arg0)
        {
            int j;
            j=arg0+1;
            for(int i=0;i<images.length;i++)
            {
                tv_picture_name.setText(pictureNames[arg0]+"（图"+j+"）");
                tv_picture_info.setText(pictureinfos[arg0]);
                tv_page.setText(j+"/"+images.length);
            }
        }
    }
    
    //设置返回按钮的点击事件的处理
    public void onBackClick(View view)
    {
        finish();//将当前的Activity  finish()掉
    }

}

第三步：我们看一下运行后的效果吧