デザインのガイドラインをチェックしていて、フチなしボタンについて疑問に思っていました。ゴーグルしてソースを見つけようとしましたが、自分でまとめることができません。これは通常のボタン ウィジェットですが、カスタム (Android のデフォルト) スタイルを追加しますか? これらのボーダーレス ボタンを作成する方法 (もちろん、背景を空に設定できますが、仕切りがありません)。
設計ガイドラインへのリンクは次のとおりです。
いくつかの混乱を解消するには：
ボタンの背景属性を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
次に、カールの回答のように仕切りを追加できます。
遅い回答ですが、多くの意見があります。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: コンテナに仕切りを持たせます ( android:divider='@android:drawable/...API < 11 の場合)
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>
マテリアル スタイルについてstyle="@style/Widget.AppCompat.Button.Borderless"は、AppCompat ライブラリを使用するときに追加します。
iosched アプリのソースから、次の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;
}
これはLinearLayout、「OK」および「キャンセル」ボタンが入り、適切な順序でそれらを配置することを処理します。次に、これをボタンを配置するレイアウトに配置します。
<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>
これにより、ボーダレス ボタンのあるダイアログの外観が得られます。これらの属性は、フレームワークの res にあります。buttonBarStyle垂直の仕切りとパディングを行います。buttonBarButtonStyleは Holo テーマと同じように設定されborderlessButtonStyleていますが、フレームワークが表示したいので、これが最も堅牢な表示方法であると考えています。
テーマの属性、、、をbuttonBarStyle調べbuttonBarButtonStyleますborderlessButtonStyle。
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>
古いAndroidプラットフォームと新しい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;
}
});
私にとってはうまくいきます。
Borderless Button にはAppCompat Support Libraryを使用できます。
次のようなボーダレス ボタンを作成できます。
<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 ファイルで以下のコードを使用します。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"
/>
一番上の回答に加えて、線形レイアウトで背景色が濃い灰色のビューを使用することもできます。
<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 に設定し、線が垂直の場合は親に合わせて幅を設定する必要があります。
何らかの理由で、どちら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>
プレーンヘッドスルーウォールアプローチ。