如何在android viewpager/imageview中的图像上显示花哨的框架？

Question

我开发了一个应用程序，用于显示位于可绘制文件夹中的图像。我用它imageview/viewpager。但是，我想显示下面显示的框架。在图像的顶部，图像显得更花哨。此外，框架应该与图像一起滑动...以便它看起来更美丽...我在想永久在图像上创建它...通过Photoshop ...但我不喜欢这个想法..所以我想可能是Android有东西给它....我是Android初学者...所以任何代码的帮助与解释和说明会appreciated..Following是我的代码..

Mainactivity.java

import android.app.Activity; 
import android.media.MediaPlayer; 
import android.os.Bundle; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 

public class MainActivity extends Activity { 

    MediaPlayer oursong; 
    ViewPager viewPager; 
    ImageAdapter adapter; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     oursong = MediaPlayer.create(MainActivity.this, R.raw.a); 
     oursong.seekTo(0); 
     oursong.start(); 

     viewPager = (ViewPager) findViewById(R.id.view_pager); 
     adapter = new ImageAdapter(this); 
     viewPager.setAdapter(adapter); 


     viewPager.setOnPageChangeListener(MyViewPagerListener); 
    } 



    private int pos = 0; 
    @Override 
    protected void onPause() { 
      super.onPause(); 

      if(oursong != null){ 
       pos = oursong.getCurrentPosition(); 
       oursong.release(); 
       oursong = null; 
      } 
    } 

    @Override 
    protected void onResume(){ 
      super.onResume(); 

     oursong = MediaPlayer.create(MainActivity.this, R.raw.a); 
     oursong.seekTo(pos); // You will probably want to save an int to restore here 
     oursong.start(); 
    } 


    private final OnPageChangeListener MyViewPagerListener = new OnPageChangeListener() { 

      @Override 
      public void onPageSelected(int pos) { 
       if (pos == adapter.getCount() - 1){ 
       // adding null checks for safety 
       if(oursong != null){ 
        oursong.pause(); 
       } 

       } else if (!oursong.isPlaying()){ 

       // adding null check for safety 
       if(oursong != null){ 
        oursong.start(); 
       } 
       }   
      } 

      @Override 
      public void onPageScrolled(int arg0, float arg1, int arg2) { 
      // TODO Auto-generated method stub 

      } 

      @Override 
      public void onPageScrollStateChanged(int arg0) { 
      // TODO Auto-generated method stub 

      } 
     }; 

} 

Imageadapter.java

import android.content.Context; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 

public class ImageAdapter extends PagerAdapter { 
    Context context; 
    private int[] GalImages = new int[] { 
     R.drawable.one, 
     R.drawable.two, 
     R.drawable.three, 
     R.drawable.four, 
     R.drawable.five 
    }; 
    ImageAdapter(Context context){ 
     this.context=context; 
    } 
    @Override 
    public int getCount() { 
     return GalImages.length; 
    } 

    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return view == ((ImageView) object); 
    } 

    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     ImageView imageView = new ImageView(context); 
     int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small); 
     imageView.setPadding(padding, padding, padding, padding); 
     imageView.setScaleType(ImageView.ScaleType.FIT_XY); 
     imageView.setImageResource(GalImages[position]); 
     ((ViewPager) container).addView(imageView, 0); 
     return imageView; 
    } 

    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
     ((ViewPager) container).removeView((ImageView) object); 
    } 
    } 

activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity" 
    android:icon="@drawable/icon" > 



      <android.support.v4.view.ViewPager 
      android:id="@+id/view_pager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
     android:icon="@drawable/icon" /> 
      <ImageView 
     android:id="@+id/swipe_left" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_centerVertical="true" 
     android:src="@drawable/swipe_left" /> 

    <ImageView 
     android:id="@+id/swipe_right" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:src="@drawable/swipe_right" /> 

</RelativeLayout> 

编辑

图像的下框架

隐藏部分

Answer 1

你可以使用一个LayerDrawable

一个可绘制的，管理其他Drawables数组。这些按阵列顺序绘制为 ，所以具有最大索引的元素将在 顶部绘制。

你有两个选择使用LayerDrawable。你可以在一个单独的XML绘制的定义，然后简单地将图像中的ImageView，或者你可以在你的代码中动态配置LayerDrawable。

编程方式使用代码

Resources r = getResources(); 
Drawable[] layers = new Drawable[2]; 
layers[0] = r.getDrawable(R.drawable.yourImage);; 
layers[1] = r.getDrawable(R.drawable.yourFrame); 
LayerDrawable layerDrawable = new LayerDrawable(layers); 
imageView.setImageDrawable(layerDrawable); 

现在，你有你的ImageView有两个图像（图像贵国和2.Frame）设置就可以了。

编辑：

在你ImageAdapter，您需要修改instantiateItem(ViewGroup container, int position)像

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
    ImageView imageView = new ImageView(context); 
    int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small); 
    imageView.setPadding(padding, padding, padding, padding); 
    imageView.setScaleType(ImageView.ScaleType.FIT_XY); 
    Resources r = context.getResources(); 
    Drawable[] layers = new Drawable[2]; 
    layers[0] = r.getDrawable(GalImages[position]); 
    layers[1] = r.getDrawable(R.drawable.yourFrame); 
    LayerDrawable layerDrawable = new LayerDrawable(layers); 
    imageView.setImageDrawable(layerDrawable); 
    ((ViewPager) container).addView(imageView, 0); 
    return imageView; 
} 

编辑2

由于图像的某些部分被下架藏，在使用ImageView之前，您需要设置图像的宽度和高度。我计算了什么可能是您的图像的最佳宽度和高度组合，以便它将完全适合您的图像。对于设置高度和宽度图像的

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
    ImageView imageView = new ImageView(context); 
    int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small); 
    imageView.setPadding(padding, padding, padding, padding); 
    imageView.setScaleType(ImageView.ScaleType.FIT_XY); 
    Resources r = context.getResources(); 
    Bitmap bmp = BitmapFactory.decodeResource(r, GalImages[position]); 
    int width=200;//set your width 
    int height=200;//set your height 
    Bitmap resizedbitmap = Bitmap.createScaledBitmap(bmp, width, height, true); 
    Drawable d = new BitmapDrawable(r,resizedbitmap); 
    Drawable[] layers = new Drawable[2]; 
    layers[0] = d; 
    layers[1] = r.getDrawable(R.drawable.yourFrame); 
    LayerDrawable layerDrawable = new LayerDrawable(layers); 
    imageView.setImageDrawable(layerDrawable); 
    ((ViewPager) container).addView(imageView, 0); 
    return imageView; 
} 

使用XML

创建一个新的可绘制的XML文件，姑且称之为mylayer.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/yourimage" /> 
    <item android:drawable="@drawable/yourframe" /> 
</layer-list> 

现在，在您的活动设置使用该绘图的图像：

imageView.setImageDrawable(getResources().getDrawable(R.layout.mylayer)); 

我希望这给你实现你想要的基本想法。