設計ガイドラインを確認し、ボーダーレスボタンについて疑問に思っていました。私はゴーグルでソースを見つけようとしましたが、自分でそれをまとめることはできません。これは通常のButtonウィジェットですが、カスタム(Androidのデフォルト)スタイルを追加しますか?これらのボーダーレスボタンを作成する方法(もちろん、背景を空に設定できますが、仕切りはありません)。
設計ガイドラインへのリンクは次のとおりです。
混乱を解消するには:
これは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>
次のスタイル属性をButton
タグに追加するだけです:
style="?android:attr/borderlessButtonStyle"
ソース: http://developer.Android.com/guide/topics/ui/controls/button.html#Borderless
次に、 Karl's answer のように仕切りを追加できます。
遅い答えですが、多くの意見。 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でこれらの色を定義する必要があります
境界線のないボタンが必要であるが、クリックしてもアニメーション化される場合。これをボタンに追加します。
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>
マテリアルスタイルの場合、AppCompatライブラリを使用するときにstyle="@style/Widget.AppCompat.Button.Borderless"
を追加します。
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
に設定されていますが、フレームワークが表示したいので、これを表示する最も堅牢な方法であると考えています。
コードを通じてボタンをボーダーレスにすることもできます。
TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(Android.R.attr.selectableItemBackground, value, true);
myButton.setBackgroundResource(value.resourceId);
テーマ属性buttonBarStyle
、buttonBarButtonStyle
、およびborderlessButtonStyle
を調べます。
古い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;
}
});
私にとってはうまく機能します。
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);
まだ検索している人には:
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>
ボーダーレスボタンには 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"/>
これは、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);
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"
/>
プログラムで同じことを達成したい場合:
(これは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"
.../>
一番上の答えに追加すると、そのような線形レイアウトで暗い灰色の背景色のビューを使用することもできます。
<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に設定され、線が垂直の場合はその幅が親に一致するように設定します。
このコードを試して、バックグラウンドのドロアブル(@ drawable/bg)をプログラムで削除するには、パラメーターとしてnullを指定するだけです。
Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);
何らかの理由で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>
壁のアプローチを通してプレーンヘッド。
GoogleのNick Butcherから望ましい効果を得る方法 (スライド20から開始)の素晴らしいスライドショー。彼は標準のAndroid @attr
を使用してボタンと仕切りのスタイルを設定します。