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

Question

我开发了一个应用程序，假设显示位于可绘制文件夹中的图像。我为此使用了 imageview/viewpager。但是，我想显示如下所示的框架。在图像的顶部，使图像看起来更漂亮..另外，框架应该与图像一起滑动......这样看起来更漂亮......我在想在图像上永久创建它......通过photoshop......但我不喜欢这个想法......所以我认为可能是android有一些东西......我是android初学者......所以任何代码都有帮助连同解释将不胜感激..以下是我的代码..

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 来完成此操作

管理其他 Drawable 数组的 Drawable。这些是画出来的 按数组顺序，因此将绘制具有最大索引的元素 顶。

您有两种选择来使用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 上设置了两个图像（1.your image 和 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

创建一个新的 Drawable 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>

现在在您的 Activity 中使用该 Drawable 设置图像：

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

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