Как создать нарисованный квадрат с внешней стороны и закругленными углами внутри?

Question

Я пытаюсь создать закругленные углы в MapView, и, поскольку, по-видимому, по умолчанию не существует способа сделать это, я в основном накладываю макет с фоном поверх вида карты, например, так:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >

<RelativeLayout
    android:id="@+id/map_holder"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/panel_rounded_corner_transparent" />
</RelativeLayout>

Мой рисованный закругленный угол определяется следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:drawable="@drawable/bg_rounded_corner_transparent" />
</selector>

и отрисовка внутри определяется как:

<layer-list
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>

      <solid
        android:color="@color/transparent" />
      <stroke
        android:width="1dp"
        android:color="@color/darkgray" />
      <corners
        android:radius="5dp" />
    </shape>
  </item>

</layer-list>

Однако проблема в том, что, поскольку карта заканчивается прямоугольником, а граница закруглена, углы карты выглядывают из-за углов моей временной границы. Как установить цвет фона только для внешней границы, сохраняя прозрачность внутренней части панели?

Для пояснения, вот несколько скриншотов.

Этот снимок экрана показывает карту как изначально "ограниченную" наложенной границей:

Этот снимок экрана заменяет карту красным фоном, чтобы лучше понять, в чем проблема:

Как видите, красный цвет (и, соответственно, карта) кровоточит за пределами границы.

Я могу добавить 1dp отступ на карту, но это не решает полностью проблему, как вы можете видеть здесь:

Так как углы закруглены, часть карты все еще просачивается. Это намного лучше, чем первый вариант, но не идеально - по углам 1 пиксель.

Как показано на этом скриншоте, заполнение более 1 dp не является решением, поскольку оно полностью создает другую проблему:

Answer 1

Попробуйте расширить MapView следующим образом:

private class MyMapView extends MapView {

    public MyMapView(Context context, String apiKey) {
        super(context, apiKey);
    }

    @Override
    public void draw(Canvas canvas) {
        Path path = new Path();
        RectF r = new RectF(0, 0, this.getWidth(), this.getHeight()); 
        path.addRoundRect(r, 12, 12, Path.Direction.CW);
        canvas.clipPath(path);
        super.draw(canvas);
    }
}

Возможно, вам потребуется настроить радиус для path.addRoundRect ()

Answer 2

надеюсь, что это просыпается ........ читать множество стилей и другую часть разработчиков

может помочь вам

http://developer.android.com/reference/android/R.style.html

Answer 3

Привет! Я играю с этим несколько часов, и вот мое решение для ImageView с прозрачной рамкой (овальной) внутри и сплошным цветом снаружи.Я знаю, что это овальная форма, но она также работает с прямоугольником.

Реализация FrameLayout с двумя дочерними элементами внутри.Таким образом, форма будет перекрывать ImageView:

<FrameLayout
        android:id="@+id/testLinearLayout"
        android:layout_width="300dp"
        android:layout_height="300dp">

        <ImageView
            android:id="@+id/mainContentImage"
            android:layout_width="300dp"
            android:layout_height="300dp"/>

        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:background="@drawable/shape_circle">
        </LinearLayout>
</FrameLayout>

здесь есть shape_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/shape_circle_rect"/>
    <item android:drawable="@drawable/shape_circle_oval"/>
</layer-list>

shape_circle_rect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <padding 
        android:left="-70dp"
        android:top="-70dp"
        android:right="-70dp"
        android:bottom="-70dp"/>

</shape>

shape_circle_oval.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <stroke android:color="#ffffff" android:width="70dp"/>
</shape>

это не точно то, что вы ищете, но это может помочь.

Answer 4

Вы пробовали использовать стилизованные элементы? Взгляните на это:

http://developer.android.com/reference/android/R.styleable.html#DrawableCorners_bottomLeftRadius

Надеюсь, это поможет, это должно решить вашу проблему:)