Standart Kenarlıksız düğmeler nasıl oluşturulur (bahsedilen tasarım kılavuzunda olduğu gibi)?


114

Tasarım yönergelerini kontrol ediyor ve kenarlıksız düğmeleri merak ediyordum. Gözümü açtım ve kaynağında bulmaya çalıştım ama tek başıma bir araya getiremedim. Bu normal Düğme widget'ı mı, ancak özel (Android varsayılanı) bir stil mi ekliyorsunuz? Bu kenarlıksız düğmeler nasıl yapılır (tabii ki arka planı boş olarak ayarlayabilirsiniz, ancak o zaman ayırıcıya sahip değilim)?

Burada tasarım yönergelerine bağlantılar:

görüntü açıklamasını buraya girin


Yanıtlar:


163

Bazı karışıklıkları gidermek için:

Bu 2 adımda yapılır: Düğme arka plan özniteliğinin android olarak ayarlanması : attr / selectableItemBackground size geri bildirim içeren ancak arka planı olmayan bir düğme oluşturur.

android:background="?android:attr/selectableItemBackground"

Kenarlıksız düğmeyi düzeninizin geri kalanından ayıran çizgi, android: attr / dividerVertical arka planına sahip bir görünümle yapılır.

android:background="?android:attr/dividerVertical"

Daha iyi bir anlayış için, ekranınızın altında bir Tamam / İptal kenarlıksız düğme kombinasyonu için bir yerleşim düzeni vardır (yukarıdaki sağdaki resimde olduğu gibi).

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_width="1dip"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="4dip"
            android:layout_marginTop="4dip"
            android:background="?android:attr/dividerVertical" 
            android:layout_centerHorizontal="true"/>
        <Button
            android:id="@+id/BtnColorPickerCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/ViewColorPickerHelper"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/cancel" 
            android:layout_alignParentBottom="true"/>
        <Button
            android:id="@+id/BtnColorPickerOk"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/ok" 
            android:layout_alignParentBottom="true" 
            android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>

25
Dikkat çekmeye değer: Bu çözüm yalnızca API seviyesi 11+ için işe yarar.

9
HoloEverywhere kullanıyorsanız , API seviyesi 7+ için çalışır. Sen değiştirmeniz gerekir ?android:attr/selectableItemBackgroundiçin ?attr/selectableItemBackgroundve ?android:attr/dividerVerticaliçin?attr/dividerVertical
Brais Gabin

1
?android:attr/dividerVerticalforve ?attr/dividerVerticalabs için de çalışıyor
oscarthecat


22

Geç cevap, ancak birçok görüş. API'ler <11 henüz ölmediğinden, burada ilgilenenler için bir numara.

Kapınızın istediğiniz renge sahip olmasına izin verin (şeffaf olabilir). Ardından, düğmelerinize varsayılan şeffaf renge ve basıldığında biraz renge sahip bir seçici verin. Bu şekilde şeffaf bir düğmeye sahip olursunuz, ancak basıldığında rengi değişir (holo'lar gibi). Ayrıca bazı animasyonlar da ekleyebilirsiniz (holo'lar gibi). Seçici şunun gibi bir şey olmalıdır:

res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:exitFadeDuration="@android:integer/config_shortAnimTime">
     <item android:state_pressed="true"
         android:drawable="@color/blue" />

   <item android:drawable="@color/transparent" />
</selector>

Ve düğme sahip olmalı android:background="@drawable/selector_transparent_button"

Not: konteynerin bölücülere sahip olmasına izin verin ( android:divider='@android:drawable/...API <11 için)

PS [Yeni başlayanlar]: Bu renkleri values ​​/ colours.xml dosyasında tanımlamalısınız


Bu hem API Level 10ve hem için mükemmel çalıştı API Level > 10!
theblang

Bu, her ikisi de işe yarayacak olsa bile programlı olarak yapmaktan daha iyidir.
Eran Goldin

1
"ExitFadeDuration" özniteliği yalnızca API düzeyi 11 ve üzerinde kullanılır.
Bevor

evet @Bevor, güzel bir. Okuyucular, bilinmeyen xml etiketlerinin göz ardı edildiğini düşünüyor, bu nedenle api> = 11 için solma kullanacak ve sadece <11
aacotroneo

18

Kenarlıksız düğmeler isteyen ancak tıklandığında yine de canlandırılanlar için. Bunu düğmeye ekleyin.

style="?android:attr/borderlessButtonStyle"

Aralarında bir bölücü / çizgi istiyorsanız. Bunu doğrusal düzende ekleyin.

style="?android:buttonBarStyle"

özet

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   style="?android:buttonBarStyle">

    <Button
        android:id="@+id/add"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:id="@+id/cancel"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/cancel_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

</LinearLayout>

artı buttonBarStyle için. ve bu cevap btw.
soğuk harikulade

7

Materyal stili style="@style/Widget.AppCompat.Button.Borderless"için AppCompat kitaplığını kullanırken ekleyin .


5

Gönderen iosched uygulaması kaynağı ben bu geldi ButtonBarsınıfa:

/**
 * An extremely simple {@link LinearLayout} descendant that simply reverses the 
 * order of its child views on Android 4.0+. The reason for this is that on 
 * Android 4.0+, negative buttons should be shown to the left of positive buttons.
 */
public class ButtonBar extends LinearLayout {

    public ButtonBar(Context context) {
        super(context);
    }

    public ButtonBar(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public ButtonBar(Context context, AttributeSet attributes, int def_style) {
        super(context, attributes, def_style);
    }

    @Override
    public View getChildAt(int index) {
        if (_has_ics)
            // Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
            return super.getChildAt(getChildCount() - 1 - index);

        return super.getChildAt(index);
    }

    private final static boolean _has_ics = Build.VERSION.SDK_INT >= 
                                        Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}

Bu LinearLayout, "Tamam" ve "İptal" düğmelerinin girdiği yer olacak ve bunları uygun sıraya koyma işlemini gerçekleştirecektir. Ardından, bunu düğmelerin eklenmesini istediğiniz düzene yerleştirin:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:divider="?android:attr/dividerHorizontal"
          android:orientation="vertical"
          android:showDividers="middle">
    <!--- A view, this approach only works with a single view here -->
    <your.package.ButtonBar style="?android:attr/buttonBarStyle"
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

Bu size kenarlıksız düğmelerle iletişim kutusu görünümünü verir. Bu öznitelikleri res içindeki çerçevede bulabilirsiniz. buttonBarStyledikey bölücü ve dolgu yapar. Holo teması için buttonBarButtonStyleayarlandı borderlessButtonStyle, ancak bunun çerçeve onu göstermek istediği gibi göstermenin en sağlam yolu olması gerektiğine inanıyorum.


Bunu (? android: attr / buttonBarButtonStyle) stilin öğesi olarak styles.xml dosyasına nasıl koyabilirim?
lis

4

Tema içine bak niteliklerini buttonBarStyle, buttonBarButtonStyleve borderlessButtonStyle.


Ben kullanırsanız buttonBarButtonStyleben bir istisna olsun E/AndroidRuntime(17134): Caused by: java.lang.reflect.InvocationTargetException E/AndroidRuntime(17134): Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValue{t=0x1/d=0x1030281 a=2 r=0x1030281}hiçbir fikri kullanarak neden, ama selectableItemBackgroundeserler harikalar.
Someone Somewhere

4

Kod aracılığıyla düğmeleri de kenarlıksız yapabilirsiniz:

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);

Çalışıyor, teşekkürler. Ancak android.R.attr.selectableItemBackgroundAPI 21 gerektirir. Bunu önceki sürümlerde nasıl yapacağınıza dair bir fikriniz var mı?
arenaq

Çalışmıyor. Android.R.attr.buttonBarButtonStyle kaynağını ayarlamaya çalışıyorum ve kaynağın bulunamadığını söylüyor.
Kristy Welsh

android.R.attr.selectableItemBackground
Isj

2

API'ler için programlı olarak kenarlıksız düğme oluşturmak isteyenler için> = 8

ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);    
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);

Bu, lsj'nin çözümünden daha iyi, daha basit. Just setBackgroundResource (0)
jk7

2

Hem eski hem de daha yeni android platformunda çalışması gereken başka bir çözüm,

android:background="@android:color/transparent"

Düğme görünümü için öznitelik. Ancak, yukarıdaki satır düğmesini ekledikten sonra dokunma geri bildirimi sağlamaz.

Dokunma geri bildirimi sağlamak için aşağıdaki kodu Activity sınıfına ekleyin

button.setOnTouchListener(new View.OnTouchListener() {          
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:    
                ((Button)view).setBackgroundColor(Color.LTGRAY);
                break;
            case MotionEvent.ACTION_UP:
                ((Button)view).setBackgroundColor(Color.TRANSPARENT);
        }
        return false;
    }
});

Benim için iyi çalışıyor.


Ben de case MotionEvent.ACTION_CANCEL: altına case MotionEvent.ACTION_UP: eklerdim.
Medo

2

Hala arayanlar için:

Holo düğme çubukları için kendi stilinizi miras alın:

<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
  ...
</style>

veya Holo Light:

<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
  ...
</style>

ve kenarlıksız Holo düğmeleri için:

<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

veya Holo Light:

<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>

2

XML kullanmadan programlı olarak kenarlıksız (düz) bir düğme oluşturmanın yolu budur.

ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Button myButton = new Button(myContext, null, 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Ben kullanıyordum ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), R.style.Widget_AppCompat_Button_Borderless_Colored); Button myButton = new Button(myContext); ve işe yaramazdı. 2. ve 3. parametreyi ekledikten sonra çalışıyor!
levibostian

1

Xml dosyanızda aşağıdaki kodu kullanın. Şeffaf renge sahip olmak için android: background = "# 00000000" kullanın.

<Button
   android:id="@+id/btnLocation"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="#00000000"
   android:text="@string/menu_location"
   android:paddingRight="7dp"
/>

1

Kenarlıksız Düğme için AppCompat Destek Kitaplığı'nı kullanabilirsiniz .

Bunun gibi bir Kenarlıksız Düğme yapabilirsiniz:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_button"/>

Kenarlıksız Renkli Düğmeyi şu şekilde yapabilirsiniz:

<Button
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_colored_button"/>

0

Nedense benim için style="Widget.Holo.Button.Borderless"ne android:background="?android:attr/selectableItemBackground"işe yaradı ne de . Daha kesin olmak gerekirse Widget.Holo.Button.Borderless, işi Android 4.0'da yaptı ancak Android 2.3.3'te işe yaramadı. android:background="@drawable/transparent"Res / drawable / transparent.xml dosyasındaki bu XML her iki sürümde de benim için hile neydi :

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
</shape>

Duvardan düz kafa yaklaşımı.


2
Arka planı @android: color / transparent olarak ayarlamak ekstra XML dosyasına gerek kalmadan benim için çalıştı.
Nicolai Buch-Andersen

Bu, bölücünün nasıl alınacağını içermez.
Navarr

3
@Navarr, Blundell'in cevabına göre, bölücü "kenarlıksız düğme" nin bir parçası değil. Bunun nedeni, düğmelerin ve diğer görünüm sınıflarının çevreleyen GUI bileşenleri hakkında bilgilendirilmemesidir. Bu konteynerin sorumluluğu. Blundell'in gönderisine yapılan yorumlarda, ICS iletişim detay öğesi düzeni gibi görünen bir bağlantı var. Bölücüyü görüntülemek için ekstra görünüm (vertical_divider kimliğiyle) vardır. Düzgün bir android:background="?android:attr/dividerVertical"numara olmasına rağmen otomatik bölücüler için kutunun dışında bir çözüm yok .
Emperor Orionii

OP'lerin sorusu Android UX "Kenarlıksız Düğmeler" ile ilgilidir ve tüm örneklerde ayırıcıya sahiptir - görünüşe göre buttonBarStyle'ın bir parçası. Bana çok yararlı bilgiler vermiş olmana rağmen, teşekkür ederim.
Navarr

0

Googles Nick Butcher'dan istenen etkiyi nasıl elde edeceğinize dair harika bir slayt gösterisi (slayt 20'den başlayın). @attrDüğmeyi ve bölücüyü biçimlendirmek için standart android'i kullanıyor .


Not o bağlantı sadece cevaplar tavsiye edilmez, SO cevaplar çözüm (vs. henüz zamanla bayat almak eğilimindedir referanslar, başka mola) için bir aramanın son nokta olmalıdır. Lütfen bağlantıyı referans olarak koruyarak buraya bağımsız bir özet eklemeyi düşünün.
kleopatra

0

En üst cevaba ek olarak, bir Doğrusal Düzende koyu gri arka plan rengine sahip görünümleri de kullanabilirsiniz.

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:layout_marginBottom="4dip"
    android:layout_marginLeft="4dip"
    android:layout_marginRight="4dip"
    android:layout_marginTop="4dip"
    android:background="@android:color/darker_gray"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

    <Button
        android:id="@+id/button_decline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/decline"/>

    <View
        android:layout_width="1dip"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

    <Button
        android:id="@+id/button_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/accept"/>
</LinearLayout>

Çizginiz yataysa, yüksekliği 1dip'e ve genişliği ana ile eşleşecek şekilde ve çizginiz dikeyse tam tersi olacak şekilde ayarlamak isteyeceksiniz.


0

Aynı şeyi programlı olarak elde etmek istiyorsanız:

(bu C # 'dır, ancak kolayca Java'ya çevrilebilir)

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

Eşleşme

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>

0

Arka plan çekilebilirini (@ drawable / bg) programlı olarak kaldırmak için bu kodu deneyin, sadece parametre olarak null sağlamamız gerekir.

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);

1
Sınırlı ve anında yardım sağlayabilecek bu kod parçacığı için teşekkür ederiz. Bir Doğru bir açıklama ölçüde bu soruna iyi bir çözüm olmasının nedeni göstererek uzun vadeli değerini artıracak ve diğer benzer sorularla gelecek okuyucularına daha kullanışlı bir hale getirecektir. Yaptığınız varsayımlar da dahil olmak üzere bazı açıklamalar eklemek için lütfen cevabınızı düzenleyin .
NOhs
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.