Come creare pulsanti standard senza bordo (come nella linea guida di progettazione menzionata)?
https://stackoverflow.com/questions/8855791
-
28-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Stavo solo controllando le linee guida di progettazione e mi chiedevo sui pulsanti senza confini. Ho gogggato e ho cercato di trovare nella fonte, ma non riesco a metterlo insieme da solo. È questo il normale widget del pulsante ma aggiungi uno stile personalizzato (Android predefinito)? Come fare questi pulsanti senza bordo (ovviamente puoi impostare lo sfondo su vuoto, ma poi non ho il divisore)?
Qui i collegamenti alle linee guida di progettazione:
- http://developer.android.com/design/building-blocks/buttons.html
- http://developer.android.com/guide/topics/ui/controls/button.html#borderless
Soluzione
Per chiarire un po 'di confusione:
Questo viene fatto in 2 passaggi: Impostazione dell'attributo di sfondo del pulsante su Android: attr/selectableItembackground Ti crea un pulsante con feedback ma senza sfondo.
android:background="?android:attr/selectableItemBackground"
La linea per dividere il pulsante senza bordo dal resto del layout viene eseguita da una vista con lo sfondo Android: attr/dividevertical
android:background="?android:attr/dividerVertical"
Per una migliore comprensione qui è un layout per una combinazione di pulsanti OK / Annulla nella parte inferiore dello schermo (come nell'immagine giusta sopra).
<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>
Altri suggerimenti
Basta aggiungere il seguente attributo di stile nel tuo Button etichetta:
style="?android:attr/borderlessButtonStyle"
fonte: http://developer.android.com/guide/topics/ui/controls/button.html#borderless
Quindi puoi aggiungere divisori come in La risposta di Karl.
Risposta tardiva, ma molte opinioni. Come Apis <11 non è ancora morto, per coloro che sono interessati qui è un trucco.
Lascia che il tuo contenitore abbia il colore desiderato (può essere trasparente). Quindi dai ai tuoi pulsanti un selettore con colore trasparente predefinito e un po 'di colore se premuto. In questo modo avrai un pulsante trasparente, ma cambierà il colore quando premetti (come quello di Holo). Puoi anche aggiungere un po 'di animazione (come quella di Holo). Il selettore dovrebbe essere qualcosa del genere:
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>
E il pulsante dovrebbe avere android:background="@drawable/selector_transparent_button"
PS: lascia che il contenitore abbia i divisori (android:divider='@android:drawable/... per API <11)
PS [Newbies]: dovresti definire quei colori in valori/colori.xml
Per quello che desidera pulsanti senza bordo ma ancora animato quando è cliccato. Aggiungilo nel pulsante.
style="?android:attr/borderlessButtonStyle"
Se volevi un divisore / linea tra loro. Aggiungilo nel layout lineare.
style="?android:buttonBarStyle"
Riepilogo
<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>
Per stile materiale aggiungi style="@style/Widget.AppCompat.Button.Borderless" Quando si utilizza la libreria AppCompat.
Dal sorgente app iosched Mi è venuto in mente questo ButtonBar classe:
/**
* 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;
}
Questo sarà il LinearLayout che i pulsanti "OK" e "Annulla" entrano e gestiranno mettendoli nell'ordine appropriato. Quindi mettilo nel layout in cui vuoi i pulsanti:
<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>
Questo ti dà l'aspetto del dialogo con pulsanti senza bordo. Puoi trovare questi attributi nella RES nel framework. buttonBarStyle Fa il divisore verticale e l'imbottitura. buttonBarButtonStyle è impostato come borderlessButtonStyle Per il tema Holo, ma credo che questo dovrebbe essere il modo più robusto per mostrarlo come il framework vuole mostrarlo.
Guarda gli attributi del tema buttonBarStyle, buttonBarButtonStyle, e borderlessButtonStyle.
Puoi anche fare pulsanti senza bordo tramite il codice:
TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myButton.setBackgroundResource(value.resourceId);
Per coloro che vogliono creare un pulsante senza bordo a livello di programmazione per l'API> = 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);
Un'altra soluzione che dovrebbe funzionare su una piattaforma Android sia più vecchia che più recente è utilizzare
android:background="@android:color/transparent"
attributo per la visualizzazione pulsante. Ma dopo aver aggiunto il pulsante di riga sopra non fornirà un feedback del tocco.
Per fornire un feedback touch aggiungi il seguente codice alla classe di attività
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;
}
});
Funziona bene per me.
Per chiunque stia ancora cercando:
Ereditare il tuo stile per le barre dei bottoni di Holo:
<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
...
</style>
o Luce Holo:
<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
...
</style>
E per i pulsanti olo senza bordi:
<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
...
</style>
o Luce Holo:
<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
...
</style>
Usa il codice seguente nel tuo file XML. Usa Android: sfondo = "#00000000" per avere il colore trasparente.
<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"
/>
Puoi usare Biblioteca di supporto AppCompat per il pulsante senza bordo.
Puoi creare un pulsante senza bordo come questo:
<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"/>
Puoi creare un pulsante colorato senza bordo in questo modo:
<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"/>
Questo è il modo in cui si crea un pulsante senza bordo (piatto) senza utilizzo di XML
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);
Per qualche ragione nemmeno style="Widget.Holo.Button.Borderless" né android:background="?android:attr/selectableItemBackground" ha funzionato per me. Per essere più precisi Widget.Holo.Button.Borderless Ha fatto il lavoro su Android 4.0 ma non ha funzionato su Android 2.3.3. Cosa mi ha fatto il trucco su entrambe le versioni android:background="@drawable/transparent" e questo XML in Res/Drawable/Transparent.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
</shape>
Testa semplice attraverso l'approccio del muro.
Una grande presentazione Come ottenere l'effetto desiderato da Googles Nick Butcher (Inizia dalla diapositiva 20). Usa Android standard @attr per modellare il pulsante e il divisore.
Aggiungendo alla risposta in alto puoi anche usare viste con un colore di sfondo grigio scuro in un layout lineare come così.
<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>
Se la tua linea è orizzontale, vorrai impostare l'altezza su 1Dip e la larghezza per abbinare il genitore e il viceversa se la tua linea è verticale.
Se vuoi ottenere lo stesso programma di programmazione:
(Questo è C# ma facilmente transabilibile a Java)
Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);
Incontro
<Button
style="@style/Widget.AppCompat.Button.Borderless.Colored"
.../>
Prova questo codice, per rimuovere a livello di background Drawable (@Drawable/BG), dobbiamo solo fornire null come parametro.
Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);
