디자인 가이드 라인을 확인하고 테두리없는 버튼이 궁금합니다. 나는 고글을하고 소스에서 찾으려고했지만 혼자서 모을 수는 없었다. 이것은 일반적인 Button 위젯이지만 사용자 정의 (Android 기본) 스타일을 추가합니까? 이 테두리없는 버튼을 만드는 방법 (물론 배경을 비워 둘 수 있지만 구분선이 없습니다)?
다음은 설계 지침에 대한 링크입니다.
디자인 가이드 라인을 확인하고 테두리없는 버튼이 궁금합니다. 나는 고글을하고 소스에서 찾으려고했지만 혼자서 모을 수는 없었다. 이것은 일반적인 Button 위젯이지만 사용자 정의 (Android 기본) 스타일을 추가합니까? 이 테두리없는 버튼을 만드는 방법 (물론 배경을 비워 둘 수 있지만 구분선이 없습니다)?
다음은 설계 지침에 대한 링크입니다.
답변:
혼란을 없애려면 :
이 작업은 2 단계로 수행됩니다. 버튼 배경 속성을 android : attr / selectableItemBackground로 설정 하면 피드백이 있지만 배경은없는 버튼이 생성됩니다.
android:background="?android:attr/selectableItemBackground"
나머지 레이아웃에서 테두리없는 버튼을 나누는 선은 android : attr / dividerVertical 배경이있는 뷰에 의해 수행됩니다.
android:background="?android:attr/dividerVertical"
더 나은 이해를 위해 화면 하단에 테두리없는 확인 / 취소 버튼 조합의 레이아웃이 있습니다 (위 오른쪽 그림 참조).
<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 작동
Button
태그 에 다음 스타일 속성을 추가하기 만하면됩니다 .
style="?android:attr/borderlessButtonStyle"
출처 : http://developer.android.com/guide/topics/ui/controls/button.html#Borderless
그런 다음 Karl의 답변 에서와 같이 구분선을 추가 할 수 있습니다 .
늦은 답변이지만 많은 견해. API <11은 아직 죽지 않았기 때문에 여기에 관심이있는 사람들에게는 트릭이 있습니다.
용기에 원하는 색상을 지정하십시오 (투명 할 수 있음). 그런 다음 버튼에 기본 투명 색상의 선택기를 제공하고 눌렀을 때 일부 색상을 지정합니다. 이렇게하면 투명한 버튼이 생기지 만 눌렀을 때 색상이 변경됩니다 (홀로처럼). 일부 애니메이션 (예 : holo)을 추가 할 수도 있습니다. 선택자는 다음과 같아야합니다.
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"
추신 : 컨테이너에 구분선을 갖도록하십시오 ( android:divider='@android:drawable/...
API <11)
PS [Newbies] : 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
"확인"및 "취소"버튼이 들어가는 곳이며 적절한 순서로 배치하는 것을 처리합니다. 그런 다음 버튼을 원하는 레이아웃에 넣으십시오.
<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
세로 구분선과 패딩을 수행합니다. 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: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>
테두리없는 Holo 버튼의 경우 :
<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);
하고 있었다 : 그리고 그것은 작동하지 않을 것이다. 두 번째와 세 번째 매개 변수를 추가하면 작동합니다!
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"
/>
Borderless Button에 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"
트릭 이 있지만 자동 분배기를위한 즉시 사용 가능한 솔루션은 없습니다 .
상단 답변에 추가하면 선형 레이아웃에서 어두운 회색 배경색의 뷰를 사용할 수도 있습니다.
<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);