Android XML закругленные обрезанные углы - PullRequest
Новая
       12

Android XML закругленные обрезанные углы

25 голосов
/ 01 декабря 2010

Я настроил LinearLayout со следующим рисованным фоном: 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="#CCFFFFFF"/>
</shape>

Проблема у меня в LinearLayout. У меня есть еще один элемент LinearLayout, который находится внизу его родителя. Поскольку это не имеет закругленных углов, его углы проходят мимо нижнего левого и правого углов родителей.

Нарисованный фон для Child LinearLayout выглядит следующим образом: 

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

Проблема выглядит следующим образом: http://kttns.org/hn2zm на устройстве отсутствие отсечения является более очевидным.

Каков наилучший метод для отсечения?

Ответы [ 3 ]

30 голосов
/ 29 ноября 2011

2018 Обновление

За последние 7 лет многое изменилось.

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

Примените свойство cardCornerRadius, чтобы углы были округлены. 

<android.support.v7.widget.CardView
    .......
    app:cardCornerRadius="16dp">

</android.support.v7.widget.CardView>

Оригинал

Мне были нужны округлые макеты в стиле iPhone с серым фоном за ними. (вздыхает - всегда копирую айфон)

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

Редактировать : В предыдущем ответе предлагалось использовать FrameLayout и установить рисование android:foreground. Это ввело некоторую странную прокладку в вид. Я обновил свой ответ, чтобы использовать более простую технику RelativeLayout.

Хитрость заключается в использовании RelativeLayout; поместите ваш макет внутри него. Под макетом добавьте еще один ImageView, установив его background в подходящую рамку маскирующего изображения. Это нарисует это поверх вашего другого макета.

В моем случае я создал файл 9Patch на сером фоне с вырезанным из него прозрачным скругленным прямоугольником.

frame

Это создает идеальную маску для вашего основного макета.

XML-код приведен ниже - это обычный XML-файл макета: 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:layout_width="fill_parent">

    <!-- this can be any layout that you want to mask -->
    <LinearLayout android:id="@+id/mainLayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" android:orientation="vertical"
        android:background="@android:color/white">

        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_gravity="center"
            android:text="Random text..." />

    </LinearLayout>

    <!-- FRAME TO MASK UNDERLYING VIEW -->
    <ImageView android:layout_height="fill_parent" 
        android:layout_width="fill_parent" 
        android:background="@drawable/grey_frame"
        android:layout_alignTop="@+id/mainLayout"
        android:layout_alignBottom="@+id/mainLayout" />

</RelativeLayout>

Обратите внимание на ImageView внизу, выровненные сверху и снизу к основному макету с установленным маскирующим изображением:

  • android:background="@drawable/grey_frame"

Это ссылается на мой файл 9Patch - и маскирует базовый макет, рисуясь на переднем плане.

Вот пример, показывающий серые закругленные углы поверх стандартного макета.

maskedLayout

НТН

6 голосов
/ 16 августа 2017

API-уровень 21 (Lollipop) добавлен View.setClipToOutline . Из документации Android по Определение теней и отсечений :

Чтобы обрезать представление по форме для рисования, установите его в качестве фона представления ... и вызовите метод View.setClipToOutline ().

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

6 голосов
/ 01 декабря 2010

То, что вы описываете, звучит так: 

<LinearLayout android:shape="rounded">
   <LinearLayout android:background="@drawable/pedometer_stats_background">
   </LinearLayout>
</LinearLayout>

И внутренний макет выдвигается за пределы закругленных углов, потому что он не закруглен.Вам придется закруглить углы вашего растрового изображения.Если у вас есть повторяющееся растровое изображение, вам стоит взглянуть на определение прорисовки из девяти патчей.Закруглите углы, затем определите часть графического объекта, которая может расширяться.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Было бы неплохо, если бы мы просто добавили растровое изображение в форму для рисования и применили еекак кожа поверх любой формы, которую мы рисуем.И, держу пари, если вы знаете, что делаете, вы можете создать подкласс Shape, который рисует растровое изображение, но, к сожалению, он не включен в Android из коробки.

...