web-dev-qa-db-ja.com

標準のボーダレスボタンを作成する方法（上記の設計ガイドラインなど）。

設計ガイドラインを確認し、ボーダーレスボタンについて疑問に思っていました。私はゴーグルでソースを見つけようとしましたが、自分でそれをまとめることはできません。これは通常のButtonウィジェットですが、カスタム（Androidのデフォルト）スタイルを追加しますか？これらのボーダーレスボタンを作成する方法（もちろん、背景を空に設定できますが、仕切りはありません）。

設計ガイドラインへのリンクは次のとおりです。

enter image description here

androidlayoutbuttonborderless
110
KarlKarlsom

混乱を解消するには：

これは2ステップで行われます。ボタンの背景属性をAndroid：attr/selectableItemBackgroundに設定すると、フィードバックはあるが背景はないボタンが作成されます。

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

ボーダーレスボタンを他のレイアウトから分割する行は、背景付きのビューによって行われますAndroid：attr/dividerVertical

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

ここで理解を深めるために、画面の下部にある[OK /キャンセル]ボーダーレスボタンの組み合わせのレイアウトを示します（上の右図のように）。

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

次のスタイル属性をButtonタグに追加するだけです：

    style="?android:attr/borderlessButtonStyle"

ソース： http://developer.Android.com/guide/topics/ui/controls/button.html#Borderless

次に、 Karl's answer のように仕切りを追加できます。

48
Diego V

遅い答えですが、多くの意見。 API <11はまだ死んでいないので、ここに興味がある人にとってはコツです。

コンテナに目的の色を付けます（透明な場合もあります）。次に、ボタンにデフォルトの透明色のセレクターと、押されたときの色を選択します。そうすれば、透明なボタンができますが、押すと色が変わります（ホロのように）。アニメーション（ホロなど）を追加することもできます。セレクタは次のようになります。

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>

ボタンにはAndroid:background="@drawable/selector_transparent_button"が必要です

PS：コンテナーに区切り線を持たせます（API <11の場合はAndroid:divider='@Android:drawable/...）

PS [初心者]：values/colors.xmlでこれらの色を定義する必要があります

22
aacotroneo

境界線のないボタンが必要であるが、クリックしてもアニメーション化される場合。これをボタンに追加します。

style="?android:attr/borderlessButtonStyle"

あなたはそれらの間の仕切り/ラインが必要な場合。これを線形レイアウトに追加します。

style="?android:buttonBarStyle"

概要

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

マテリアルスタイルの場合、AppCompatライブラリを使用するときにstyle="@style/Widget.AppCompat.Button.Borderless"を追加します。

7
Roel

iosched app source から、このButtonBarクラスを思いついた：

/**
 * 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;
}

これは、[OK]ボタンと[キャンセル]ボタンが挿入されるLinearLayoutになり、適切な順序で配置します。次に、これをボタンを配置するレイアウトに配置します。

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

これにより、ダイアログの外観がボーダーレスボタンになります。これらの属性は、フレームワークの解像度で見つけることができます。 buttonBarStyleは、垂直分割線とパディングを行います。 buttonBarButtonStyleは、HoloテーマのborderlessButtonStyleに設定されていますが、フレームワークが表示したいので、これを表示する最も堅牢な方法であると考えています。

5
Dandre Allison

コードを通じてボタンをボーダーレスにすることもできます。

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

テーマ属性buttonBarStyle、buttonBarButtonStyle、およびborderlessButtonStyleを調べます。

4
Josh Lee

古いAndroidプラットフォームで動作する別のソリューションは、

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

ボタンビューの属性。ただし、上記のボタンを追加しても、タッチフィードバックは提供されません。

タッチフィードバックを提供するには、Activityクラスに次のコードを追加します

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;
    }
});

私にとってはうまく機能します。

2
prodev

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);
2
Sohail

まだ検索している人には：

holoボタンバーの独自のスタイルを継承します。

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

またはホロライト：

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

ボーダレスホロボタンの場合：

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

またはホロライト：

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

ボーダーレスボタンには AppCompatサポートライブラリ を使用できます。

次のようなボーダーレスボタンを作成できます。

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

次のようにボーダーなしの色付きボタンを作成できます。

<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"/>
1
Rajesh

これは、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);
1
Manuel

Xmlファイルで次のコードを使用します。 Android：background = "＃00000000"を使用して、透明色にします。

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

プログラムで同じことを達成したい場合：

（これはC＃ですが、Javaに簡単に変換できます）

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

一致

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

一番上の答えに追加すると、そのような線形レイアウトで暗い灰色の背景色のビューを使用することもできます。

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

線が水平の場合、高さが1dipに設定され、線が垂直の場合はその幅が親に一致するように設定します。

0
Munaz

このコードを試して、バックグラウンドのドロアブル（@ drawable/bg）をプログラムで削除するには、パラメーターとしてnullを指定するだけです。

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

何らかの理由でstyle="Widget.Holo.Button.Borderless"もAndroid:background="?android:attr/selectableItemBackground"も機能しませんでした。より正確に言うと、Widget.Holo.Button.BorderlessはAndroid 4.0で機能しましたが、Android 2.3.3では機能しませんでした。両方のバージョンで私にとってのトリックはAndroid:background="@drawable/transparent"とres/drawable/transparent.xmlのこのXMLでした：

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

壁のアプローチを通してプレーンヘッド。

0
Emperor Orionii

GoogleのNick Butcherから望ましい効果を得る方法 （スライド20から開始）の素晴らしいスライドショー。彼は標準のAndroid @attrを使用してボタンと仕切りのスタイルを設定します。

0
Moritz