如何使 ImageButton 成为一个圆圈并将上传的图像放在该圆圈内？

Question

我正在尝试在 android 中实现“上传个人资料图片”。下面是我需要在 Android 中实现的快照。

Snapshot_for_profile_page.png

我希望“添加照片”与 Instagram 的编辑个人资料一样工作。 这是我到目前为止所做的。

1. 我拿了 ImageButton。
2. Onlcick 事件我从相机/画廊上传了图片。

但问题是正在上传的图像被平方了。 另外如何调整图像大小以适合该圆圈。我想要完整的图像完全适合圆圈。就像在 Instagram 上一样

这是我的代码

Profile.java

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;


public class Profile extends FragmentActivity {

    private ImageButton mProfileImage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.profile_activity);
        mProfileImage = (ImageButton) findViewById(R.id.imageButton);
        mProfileImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectImage();
            }
        });
 }

    private void selectImage() {
        final CharSequence[] options = { "Take Photo", "Choose from Gallery","Cancel" };
        AlertDialog.Builder builder = new AlertDialog.Builder(Profile.this);
        builder.setTitle("Add Photo!");
        builder.setItems(options,new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int item) {
                if(options[item].equals("Take Photo"))
                {
                    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                    File f = new File(android.os.Environment.getExternalStorageDirectory(), "Image.jpg");
                    intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(f));
                    startActivityForResult(intent, 1);
                }
                else if (options[item].equals("Choose from Gallery"))
                {
                    Intent intent = new   Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                    startActivityForResult(intent, 2);
                }
                else if (options[item].equals("Cancel")) {
                    dialog.dismiss();
                }
            }
        });
        builder.show();
    }
    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            if (requestCode == 1) {
                File f = new File(Environment.getExternalStorageDirectory().toString());
                for (File temp : f.listFiles()) {
                    if (temp.getName().equals("Image.jpg")) {
                        f = temp;
                        break;
                    }
                }
                try {
                    Bitmap bitmap;
                    BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
                    bitmap = BitmapFactory.decodeFile(f.getAbsolutePath(),bitmapOptions);
                    mProfileImage.setImageBitmap(bitmap);
                    String path = android.os.Environment.getExternalStorageDirectory()+ File.separator+ "Phoenix" + File.separator + "default";
                    f.  delete();
                    OutputStream outFile;
                    File file = new File(path, String.valueOf(System.currentTimeMillis()) + ".jpg");

                    try {
                        outFile = new FileOutputStream(file);
                        bitmap.compress(Bitmap.CompressFormat.JPEG, 85, outFile);
                        outFile.flush();
                        outFile.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else if (requestCode == 2) {
                Uri selectedImage = data.getData();
                String[] filePath = { MediaStore.Images.Media.DATA };
                Cursor c = getContentResolver().query(selectedImage,filePath, null, null, null);
                c.moveToFirst();
                int columnIndex = c.getColumnIndex(filePath[0]);
                String picturePath = c.getString(columnIndex);
                c.close();
                Bitmap thumbnail = (BitmapFactory.decodeFile(picturePath));
                mProfileImage.setImageBitmap(thumbnail);

            }

        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        //int id = item.getItemId();

        //noinspection SimplifiableIfStatement


        return super.onOptionsItemSelected(item);
    }
}

profile_activity.xml

                <ImageButton
                android:layout_width="150dp"
                android:layout_height="155dp"
                android:id="@+id/imageButton"
                android:src="@drawable/add_photo"
                android:background="@drawable/circlebutton"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:scaleType="fitXY" />

circlebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="1dp" android:color="#00A2B3" />
    <!--<corners
        android:bottomLeftRadius="12.0dip"
        android:bottomRightRadius="12.0dip"
        android:radius="12.0dip"
        android:topLeftRadius="12.0dip"
        android:topRightRadius="12.0dip" />-->
</shape>

按钮还是方形的。

PS：对不起我的英语

Answer 1

我推荐你使用毕加索图书馆。创建一个扩展毕加索 Transformation 类的类。

public class RoundTransformation implements com.squareup.picasso.Transformation {

private final int radius;
private final int margin;

public RoundTransformation(final int radius, final int margin) {
    this.radius = radius;
    this.margin = margin;
}

@Override
public Bitmap transform( Bitmap source) {
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));



    Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);

    if (source != output) {
        source.recycle();
    }

    return output;
}

@Override
public String key() {
    return "rounded";
    }
}

一旦你准备好了这门课。使用毕加索图书馆

Picasso.with(context).load("url")
            .transform(new RoundTransformation(radius,margin)).into(image);

PS : 而不是使用 ImageButton 使用 ImageView 并在 imageview 上使用 setOnClickListener

Answer 2

只是一个与您的解决方案完全不同的技巧，

1. 让图像保持正方形或其他。只需将其置于其父级的中心即可。

2. 将另一个带有圆形边框的白色 imageView 放置在覆盖该个人资料图片的中心。

这叫做掩蔽:)