Obraz bitmapowy z zaokrąglonymi narożnikami z obrysem

Mam obraz z ostrymi krawędziami. Tutaj wpisz opis obrazka

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>
Z tyłu.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> 

Układ.xml

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

Ustawiam obraz jako tło do tego układu i rysuję do niego obramowanie, ale problem polega na tym, że obraz jest kwadratowy z ostrymi krawędziami, a obramowanie, które rysuję w xml, jest zaokrąglone. Jak więc zrobić obraz również z zaokrąglonymi rogami?

Author: MysticMagicϡ, 2013-01-23

8 answers

Jest to jeden z rozwiązań, w którym musisz make round to your main layout background i wewnątrz zachować swoje imageview with your desire image:

Coś jak poniżej:

do tyłu.xml

to sprawi, że twój obraz będzie okrągły róg

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

układ.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>

Aktualizacja

Po kopaniu działek natknąłem się na rozwiązanie, które już zamieściłem na stackoverflow

Zmiana obrazu jako zaokrąglony Narożnik

Jak zrobić ImageView, aby mieć zaokrąglone rogi

Step1@

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>

Step2@

Stwórz jedną funkcję, która tworzy zaokrągloną bitmapę za pomocą canvas.

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));
 14
Author: RobinHood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:24:41

Odpowiedź Robinhooda zadziałała dla mnie z jedną zmianą z powodu błędu, który otrzymałem o przypisaniu zmiennej.

Musiałem zmienić linię:

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

Do tej linii:

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

Wykonanie mojego pełnego kodu to:

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
Author: MGM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-08 11:18:52

Właściwie, jest biblioteka, którą zrobiłem, która dokładnie odpowiada twoim potrzebom i nie musisz się przejmować tymi plikami xml.

Https://github.com/pungrue26/SelectableRoundedImageView

W tym projekcie open-source, można ustawić różne promienie na każdym rogu, i ustawić granice (szerokość i kolory), itd. jak poniżej. Mam nadzieję, że to ci pomoże.

Zaokrąglony ImageView wewnątrz CardView

 2
Author: 김준호,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-14 01:30:06

Ok spróbujmy poniżej

     <?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
Author: Bhavdip Sagar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-23 06:37:36

Spróbuj pleców.xml coś takiego.

<?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
Author: Raj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-23 05:51:30

Miałem podobny problem dzisiaj tylko moje zdjęcie było mapą Google. w rzeczywistości musisz ukryć rogi, a sposobem na to jest utworzenie 9Patch w następujący sposób:

Tutaj wpisz opis obrazka

I zastosuj go jako tło dla całego układu lub innego układu obejmującego układ. Aby uzyskać więcej informacji, zajrzyj na poniższy link:

Czy istnieje sposób na zaimplementowanie zaokrąglonych narożników do fragmentu mapy?

I have actully went to this site: http://www.sumopaint.com/app/
i malowane to wszystko ręcznie można wziąć mój przykład I zmienić kolory do swoich potrzeb. prawdopodobnie będziesz potrzebował następnego:

Tutaj wpisz opis obrazka

Więcej informacji na temat tworzenia 9patchów można znaleźć pod poniższymi linkami:

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

Http://android9patch.blogspot.co.il/

 0
Author: Emil Adz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:08:52
<?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
Author: coldmn3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-01 08:53:54

Przekaż oryginalną bitmapę do następującej funkcji, a w rezultacie otrzymasz zaokrągloną bitmapę :) . Mam nadzieję, że to komuś pomoże.

 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
Author: Saamzzz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-31 12:58:10