10

エッジがシャープなイメージがあります。 ここに画像の説明を入力

tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/background"
    android:tileMode="repeat">
</bitmap>

back.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
       <item android:drawable="@drawable/tile_mode" />
    <item>
        <shape>
            <solid/>
            <stroke android:width="1dip" android:color="#225786" />
            <corners android:radius="10dip"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item> 

レイアウト.xml

<LinearLayout
                android:id="@+id/frame1"
                android:background="@drawable/back"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </LinearLayout>

このレイアウトの背景として画像を設定し、それに境界線を描画していますが、問題は、画像が鋭いエッジを持つ正方形であり、xml で描画している境界線が角が丸いことです。では、角を丸くした画像を作成するにはどうすればよいでしょうか。

4

8 に答える 8

20

これは、あなたがしなければならない解決策の1つですmake round to your main layout backgroundimageview with your desire image:

以下のようなもの:

back.xml

これにより、画像が角を丸くします

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
     <stroke android:width="1dp" android:color="#dd7b7a"/>
     <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
     <solid android:color="#dd7b7a"/>
 </shape>

tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background"
android:tileMode="repeat" />

レイアウト.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
<LinearLayout 
     android:padding="4dip"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    android:gravity="center_horizontal"
    >
<LinearLayout  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
   android:background="@drawable/tile_mode"
    />
</LinearLayout>  
</LinearLayout>

更新しました

たくさん掘り下げた後、すでに投稿されているソリューションに出くわしましたstackoverflow

画像を角丸に変更

ImageView の角を丸くする方法

ステップ1@

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"
        android:gravity="center"
        tools:context=".MainActivity" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"

          />

    </RelativeLayout>

ステップ2@

キャンバスを使用してビットマップに丸められる関数を 1 つ作成します。

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }

step3@

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView image=(ImageView)findViewById(R.id.image);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing);


    image.setImageBitmap(getRoundedCornerBitmap(bitmap, 20));
于 2013-01-23T05:45:40.963 に答える
2

わかりました、以下の方法で試してみましょう

     <?xml version="1.0" encoding="utf-8"?>
 <shape
    android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#000000"/>
</shape>

<LinearLayout
    android:id="@+id/frame1"
    android:background="@drawable/corner_background"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    >
    <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background" 
    />
</LinearLayout>
于 2013-01-23T05:46:32.187 に答える
2

実際、あなたのニーズを正確に満たす私が作成したライブラリがあり、それらのxmlファイルを気にする必要はありません。

https://github.com/pungrue26/SelectableRoundedImageView

このオープンソース プロジェクトでは、次のように、各コーナーに異なる半径を設定したり、境界線 (幅と色)などを設定したりできます。お役に立てば幸いです。

CardView 内の丸みを帯びた ImageView

于 2015-07-14T01:30:06.160 に答える
2

ロビンフッドの答えは、変数の割り当てについて受け取ったエラーのために1つの変更でうまくいきました。

行を変更する必要がありました:

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

この行に:

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        

私の完全なコードをこれにする:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    TextView textViewTitle = (TextView) findViewById(R.id.MYTEXTIDHERE);
    textViewTitle.setText("Some Text");

    ImageButton imageButtonSetter = (ImageButton) findViewById(R.id.MYIMAGEIDHERE);
    Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.MYIMAGENAMEHERE);     
    imageButtonSetter.setImageBitmap(getRoundedCornerBitmap(myBitmap, 40));
}   

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}
于 2013-11-08T11:18:52.300 に答える
2

元のビットマップを次の関数に渡すと、結果として丸められたビットマップが得られます:)。これが誰かに役立つことを願っています。

 public Bitmap getRoundedBitmap(Bitmap bitmap) {
        Bitmap resultBitmap;
        int originalWidth = bitmap.getWidth();
        int originalHeight = bitmap.getHeight();
        float r;

        if (originalWidth > originalHeight) {
            resultBitmap = Bitmap.createBitmap(originalHeight, originalHeight,
                    Bitmap.Config.ARGB_8888);
            r = originalHeight / 2;
        } else {
            resultBitmap = Bitmap.createBitmap(originalWidth, originalWidth,
                    Bitmap.Config.ARGB_8888);
            r = originalWidth / 2;
        }

        Canvas canvas = new Canvas(resultBitmap);

        final Paint paint = new Paint();
        final Rect rect = new Rect(ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, originalWidth, originalHeight);

        paint.setAntiAlias(true);
        canvas.drawARGB(ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE);
        canvas.drawCircle(r, r, r, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return resultBitmap;
    }
于 2015-08-31T12:58:10.763 に答える
0

このような back.xml を試してください。

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
<solid android:color="#ffffffff"/>    

<stroke android:width="3dp"
        android:color="#ff000000"
        />

<padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>
于 2013-01-23T05:51:30.440 に答える
0
<?xml version="1.0" encoding="utf-8"?>

<item>
    <bitmap
        android:src="@drawable/bg_striped_img"
        android:tileMode="repeat" />
</item>
<item android:left="-20dp" android:top="-20dp" android:right="-20dp" android:bottom="-20dp">
    <shape android:shape="oval" >
        <stroke
            android:width="20dp"
            android:color="#ffffffff" />

        <solid android:color="#00000000" />

        <size
            android:height="120dp"
            android:width="120dp" />
    </shape>
</item>

    <item >
    <shape android:shape="oval" >
        <stroke
            android:width="1dp"
            android:color="#ff999999" />

        <solid android:color="#00000000" />

        <size
            android:height="120dp"
            android:width="120dp" />
    </shape>
</item>

于 2013-07-01T08:53:54.547 に答える
0

今日も同様の問題がありましたが、画像だけがGoogleマップでした。実際にはコーナーを非表示にする必要があり、その方法は次のように 9Patch を作成することです。

ここに画像の説明を入力

レイアウト全体またはレイアウトをカバーする別のレイアウトの背景として適用します。詳細については、次のリンクを参照してください。

Mapfragment に角を丸くする方法はありますか?

私は実際にこのサイトにアクセスしました: http://www.sumopaint.com/app/
で、すべて手作業でペイントしました。私の例を参考にして、好みに合わせて色を変更してください。あなたはおそらく次のものを必要とするでしょう:

ここに画像の説明を入力

次のリンクで 9Patch の作成方法の詳細を確認できます。

http://radleymarx.com/blog/simple-guide-to-9-patch/

http://android9patch.blogspot.co.il/

于 2013-01-23T06:07:53.950 に答える