如何制作一个圆孔,那个圆孔应该出现在带有一些图像的视图寻呼机的顶部?

时间:2016-03-24 10:41:37

标签: android xml android-viewpager mask

enter image description here

上图显示为矩形。 以下是我尝试过的程序的源代码。执行程序显示图像没有问题。

但我想要的是视图上的圆形蒙版。 像这样。

enter image description here

**activity_main**

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fragment"
android:name="com.example.shrishyl.circleview.MainActivityFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:layout="@layout/fragment_main" />

fragment_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>

swipe_fragment

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/black" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"/>
</RelativeLayout>

MainActivity

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Paint;
import android.graphics.Shader;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class MainActivity extends FragmentActivity
{
    static final int NUM_ITEMS = 4;
    ImageFragmentPagerAdapter imageFragmentPagerAdapter;
    ViewPager viewPager;
    public static final String[] IMAGE_NAME = {"antartica", "croatia", "iceland", "india"};

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageFragmentPagerAdapter = new ImageFragmentPagerAdapter(getSupportFragmentManager());
    viewPager = (ViewPager) findViewById(R.id.pager);
    viewPager.setAdapter(imageFragmentPagerAdapter);
    }

    public static class ImageFragmentPagerAdapter extends FragmentPagerAdapter
    {
        public ImageFragmentPagerAdapter(FragmentManager fm) { super(fm); }

        @Override
        public int getCount() { return NUM_ITEMS; }

        @Override
        public Fragment getItem(int position) 
        {
        SwipeFragment fragment = new SwipeFragment();
        return fragment.newInstance(position);
        }
    }

    public static class SwipeFragment extends Fragment
    {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
        {
            View swipeView = inflater.inflate(R.layout.swipe_fragment, container, false);
            ImageView imageView = (ImageView) swipeView.findViewById(R.id.imageView);
            Bundle bundle = getArguments();
            int position = bundle.getInt("position");
            String imageFileName = IMAGE_NAME[position];
            int imgResId = getResources().getIdentifier(imageFileName, "drawable", "com.example.shrishyl.circleview");
            Bitmap imageBitmap= BitmapFactory.decodeResource(getResources(),  imgResId);
            imageView.setImageBitmap(imageBitmap);
            return swipeView;
        }
        static SwipeFragment newInstance(int position)
        {
            SwipeFragment swipeFragment = new SwipeFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("position", position);
            swipeFragment.setArguments(bundle);
            return swipeFragment;
        }
    }
}

1 个答案:

答案 0 :(得分:1)

你可以使用如下所示的画布来做到这一点:

    public static class SwipeFragment extends Fragment
        {
            @Override
            public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
            {
                View swipeView = inflater.inflate(R.layout.swipe_fragment, container, false);
                ImageView imageView = (ImageView) swipeView.findViewById(R.id.imageView);
                Bundle bundle = getArguments();
                int position = bundle.getInt("position");
                String imageFileName = IMAGE_NAME[position];
                int imgResId = getResources().getIdentifier(imageFileName, "drawable", "com.example.shrishyl.circleview");
                Bitmap imageBitmap= BitmapFactory.decodeResource(getResources(),  imgResId);
              Bitmap circleImage=   CircularImage.addPicture(imageBitmap);//By calling this method your image will be converted a circular image
imageView.setImageBitmap(circleImage);//Here you will set the imageview to the Circular image which was returned by the addPicture Function() in CircularImage class

                return swipeView;
            }
            static SwipeFragment newInstance(int position)
            {
                SwipeFragment swipeFragment = new SwipeFragment();
                Bundle bundle = new Bundle();
                bundle.putInt("position", position);
                swipeFragment.setArguments(bundle);
                return swipeFragment;
            }
        }



  }
        public class CircularImage{
      public static Bitmap addPicture(Bitmap bitmap){
          Bitmap result = null;
          try {
              result = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
              Canvas canvas = new Canvas(result);// Canvas is class used for drawing , here you will be writing into the result Bitmap

              int color = 0xff424242;
              Paint paint = new Paint();
              Rect rect = new Rect(0, 0, 200, 200);

              paint.setAntiAlias(true);
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(color);
              canvas.drawCircle(50, 50, 50, paint);//This draws a circle
              paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
              canvas.drawBitmap(bitmap, rect, rect, paint);// this puts the image into the circle
          } catch (NullPointerException e) {
          } catch (OutOfMemoryError o) {
          }
          return result;
      }
}

你在这里做的很简单,你正在创建Bitmap并在其中绘制一个圆圈。稍后您在圆圈内绘制一个位图。因此,在您的情况下,只需调用此函数并将要添加到圆孔的位图作为参数传递。它应该适合你。 THANKYOU