web-dev-qa-db-de.com

Bitmap-Bild mit abgerundeten Ecken mit Strich

Ich habe ein Bild mit scharfen Kanten. enter image description here

die 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>

die 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> 

layout.xml

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

Ich stelle das Bild als Hintergrund für dieses Layout ein und zeichne einen Rahmen, aber das Problem ist, dass das Bild quadratisch mit scharfen Kanten ist und der Rahmen, den ich in der XML-Datei zeichne, abgerundete Ecken hat. Also, wie macht man das Bild auch mit abgerundeten Ecken?

9
Goofy

Dies ist eine der Lösungen, bei denen Sie make round to your main layout background und innen Ihren imageview with your desire image: aufbewahren müssen.

so etwas wie unten:

back.xml

Dadurch wird das Bild abgerundet

<?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" />

layout.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>

Aktualisiert

Nachdem ich Lose gegraben hatte, stieß ich auf eine Lösung, die bereits auf stackoverflow gepostet war. 

Ändern des Bildes als abgerundete Ecke

Wie man eine ImageView macht, um abgerundete Ecken zu haben

schritt [email protected]

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>

Schritt [email protected]

Erstellen Sie eine Funktion, die mithilfe der Zeichenfläche auf Ihre Bitmap gerundet wird.

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;
    }

schritt [email protected]

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));
15
RobinHood

Tatsächlich habe ich eine Bibliothek erstellt, die genau Ihren Anforderungen entspricht, und Sie müssen sich nicht mit diesen XML-Dateien befassen. 

https://github.com/pungrue26/SelectableRoundedImageView

Mit diesem Open-Source-Projekt können Sie verschiedene Radien für jede Ecke und Ränder (Breite und Farben) einstellen und so weiter. Ich hoffe es kann dir helfen.

Rounded ImageView inside CardView

2
김준호

RobinHoods Antwort funktionierte bei mir mit einer Änderung aufgrund eines Fehlers, den ich bezüglich der Variablenzuweisung erhielt.

Ich musste die Zeile ändern:

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

Zu dieser Zeile:

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

Meinen vollständigen Code folgendermaßen erstellen:

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;
}
2
MGM

ok lass es uns unten versuchen 

     <?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>
1
Bhavdip Sagar

Ich hatte heute ein ähnliches Problem, nur mein Bild war eine Google-Karte. Eigentlich müssen Sie die Ecken verstecken, und dazu müssen Sie ein 9Patch wie folgt erstellen:

enter image description here

und wende es als Hintergrund für dein gesamtes Layout oder ein anderes Layout an, das dein Layout abdeckt. Weitere Informationen findest du unter folgendem Link:

Gibt es eine Möglichkeit, abgerundete Ecken zu einem Mapfragment zu implementieren?

Ich bin auf diese Seite gegangen: http://www.sumopaint.com/app/
und alles von Hand bemalt. Sie können mein Beispiel nehmen und die Farben nach Ihren Wünschen ändern. Sie würden wahrscheinlich das nächste brauchen:

enter image description here

weitere Informationen zum Erstellen von 9Patches finden Sie unter den folgenden Links:

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

http://Android9patch.blogspot.co.il/

0
Emil Adz

Übergeben Sie die ursprüngliche Bitmap an die folgende Funktion, und Sie erhalten eine gerundete Bitmap als Ergebnis :). Hoffe das hilft jemandem. 

 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;
    }
0
Saamzzz

versuchen Sie Ihre back.xml so etwas.

<?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>
0
Raj
<?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>

0
coldmn3