私はデザインガイドラインを確認し、フチなしボタンについて疑問に思っていました。私はゴーグルしてソースを見つけようとしましたが、自分でまとめることはできません。これは通常のボタンウィジェットですが、カスタム(Androidのデフォルト)スタイルを追加していますか?これらのボーダーレスボタンを作成する方法(もちろん、背景を空に設定できますが、仕切りはありません)?
ここに設計ガイドラインへのリンクがあります:
私はデザインガイドラインを確認し、フチなしボタンについて疑問に思っていました。私はゴーグルしてソースを見つけようとしましたが、自分でまとめることはできません。これは通常のボタンウィジェットですが、カスタム(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>
?android:attr/selectableItemBackground
ため?attr/selectableItemBackground
と?android:attr/dividerVertical
のために?attr/dividerVertical
?android:attr/dividerVerticalfor
そして?attr/dividerVertical
また、ABSのために働く
遅い答えですが、多くの意見があります。11未満のAPIはまだ死んでいないので、ここに興味がある人にとってはトリックです。
コンテナに希望の色を設定します(透明になる場合があります)。次に、ボタンにデフォルトの透明色のセレクターと、押されたときの色を指定します。こうすると透明なボタンができますが、押すと色が変わります(ホロのように)。(ホロのような)アニメーションを追加することもできます。セレクターは次のようになります。
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でこれらの色を定義する必要があります
API Level 10
で完全に機能しましたAPI Level > 10
。
フチなしのボタンが欲しいが、クリックするとアニメーションが表示される方。これをボタンに追加します。
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>
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>
これにより、ボーダレスボタンを備えたダイアログの外観が得られます。これらの属性はフレームワークの解像度で見つけることができます。buttonBarStyle
垂直方向の仕切りとパディングを行います。HoloテーマのbuttonBarButtonStyle
ようborderlessButtonStyle
に設定されていますが、フレームワークがそれを表示したいので、これはそれを表示するための最も堅牢な方法であると思います。
テーマ属性に見てbuttonBarStyle
、buttonBarButtonStyle
とborderlessButtonStyle
。
buttonBarButtonStyle
、例外が発生します。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}
理由はわかりませんが、使用selectableItemBackground
すると不思議です。
コードを使用してボタンをボーダレスにすることもできます。
TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myButton.setBackgroundResource(value.resourceId);
android.R.attr.selectableItemBackground
、API 21が必要です。以前のバージョンでこれを行う方法はありますか?
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);
古い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;
}
});
私にとってはうまくいきます。
case MotionEvent.ACTION_CANCEL:
以下にも追加し ます case MotionEvent.ACTION_UP:
。
まだ探している人のために:
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>
これは、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);
ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), R.style.Widget_AppCompat_Button_Borderless_Colored); Button myButton = new Button(myContext);
そしてそれはうまくいかないだろう。2番目と3番目のパラメーターを追加すると、機能します!
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"/>
どういうわけか私のために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>
壁のアプローチを介してプレーンヘッド。
android:background="?android:attr/dividerVertical"
トリックがありますが、自動仕切りの箱から出してすぐに使えるソリューションはありません。
GoogleのNick Butcherから望ましい効果を得る方法に関する素晴らしいスライドショー(スライド20から開始)。彼は標準のAndroidを使用して@attr
、ボタンとディバイダーのスタイルを設定しています。
一番上の答えに加えて、濃い灰色の背景色のビューを線形レイアウトで使用することもできます。
<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に設定され、幅が親と一致するように設定します。線が垂直の場合は逆も同様です。
プログラムで同じことを実現したい場合:
(これは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"
.../>
このコードを試して、背景のドローアブル(@ drawable / bg)をプログラムで削除するには、パラメーターとしてnullを指定する必要があるだけです。
Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);