web-dev-qa-db-fra.com

Android coins arrondis arrondis XML

J'ai configuré un LinearLayout avec l'arrière-plan dessinable suivant:

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

Le problème que j'ai est dans le LinearLayout J'ai un autre élément LinearLayout qui se trouve au bas de son parent. Comme il n'y a pas de coins arrondis, ses coins dépassent les coins inférieurs gauche et droit des parents.

L'arrière-plan dessinable sur le Child LinearLayout ressemble à ceci:

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

Le problème ressemble à ceci: http://kttns.org/hn2zm sur l'appareil le non-écrêtage est plus apparent.

Quelle est la meilleure méthode pour réaliser l'écrêtage?

27
Emily Laguna

À quoi ressemble votre description:

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

Et la disposition intérieure pousse à l'extérieur des coins arrondis car elle n'est pas arrondie. Vous devrez arrondir les coins de votre bitmap. Si vous avez un bitmap répétitif, vous voudrez peut-être envisager de définir un dessin à neuf patchs. Arrondissez vos coins puis définissez la partie du graphique qui peut se développer.

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

Ce serait bien si nous pouvions simplement ajouter une image bitmap à la forme dessinable et la faire appliquer comme peau sur la forme que nous dessinons. Et, je parie que si vous savez ce que vous faites, vous pouvez créer une sous-classe Shape qui dessine un bitmap, mais ce n'est pas inclus dans Android hors de la boîte malheureusement.

7
chubbsondubs

Mise à jour 2018

Beaucoup de choses ont changé au cours des 7 dernières années.

La meilleure façon de gérer ce type de mise en page ces jours-ci est d'utiliser CardView qui prend également en charge les coins arrondis et de nombreuses autres fonctionnalités d'interface utilisateur plus récentes.

Appliquez la propriété cardCornerRadius pour définir les coins à arrondir.

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

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

Original

J'avais besoin de dispositions arrondies de style iPhone, avec un fond gris derrière elles. (soupir - toujours copier l'iPhone)

J'étais frustré de ne pas pouvoir trouver un moyen de masquer une mise en page. La plupart des réponses ici disent d'utiliser une image d'arrière-plan, mais ce n'est pas ce dont j'avais besoin.


Modifier : La réponse précédente a suggéré d'utiliser un FrameLayout et de définir le Android:foreground dessinable. Cela a introduit un rembourrage étrange dans la vue. J'ai mis à jour ma réponse pour utiliser une technique RelativeLayout plus simple.


L'astuce consiste à utiliser un RelativeLayout; placez votre mise en page à l'intérieur. Sous votre mise en page, ajoutez un autre ImageView, en définissant son background sur un cadre d'image de masquage approprié. Cela dessinera cela au-dessus de votre autre mise en page.

Dans mon cas, j'ai fait un fichier 9Patch qui était un fond gris, avec un rectangle arrondi transparent découpé.

frame

Cela crée le masque parfait pour votre mise en page sous-jacente.

Le code XML est ci-dessous - il s'agit d'un fichier XML de mise en page normale:

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

Notez le ImageView en bas, aligné en haut et en bas sur la disposition principale, avec l'image de masquage définie:

  • Android:background="@drawable/grey_frame"

Cela fait référence à mon fichier 9Patch - et masque la disposition sous-jacente en étant dessiné au premier plan.

Voici un exemple montrant les coins arrondis gris sur une disposition standard.

maskedLayout

hth

31

API niveau 21 (Lollipop) ajoutée View.setClipToOutline . De Android sur Définition des ombres et des vues de détourage :

Pour découper une vue sous la forme d'un dessin, définissez le dessin comme arrière-plan de la vue ... et appelez la méthode View.setClipToOutline ().

J'ai testé cela en définissant l'arrière-plan d'une vue parent sur GradientDrawable avec un rayon de coin, et les vues enfants sont correctement rognées pour correspondre aux mêmes coins arrondis du parent.

7
Elizabeth Amato