我想重新创建一个按钮,它看起来像这样:
我已经用一个普通的Button和一个drawable作为背景完成了一部分。但是我怎么才能重新创建按钮内的文本布局呢?我试着把TextView放在Button内的ConstraintLayout内,但是它不起作用。我如何创建这样的布局,也可以通过编程方式进行更改?
Button
drawable
TextView
ConstraintLayout
iklwldmw1#
您可以创建自定义视图;设置布局内的文本元素定位,配置背景以在pressed|selected|enabled|disabled时表现为多种状态,最后将onClickListener附加到视图;对于自定义视图,我使用了以下内容:
pressed|selected|enabled|disabled
onClickListener
public class WrapperPeriodicElement extends ConstraintLayout { private TextView textTop; private TextView textMiddle; private TextView textBottom; private String strTextTop; private String strTextMiddle; private String strTextBottom; public WrapperPeriodicElement(Context context) { this(context, null); } public WrapperPeriodicElement(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } private void init(Context context, AttributeSet attrs) { LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(R.layout.periodic_element, this); this.textTop = view.findViewById(R.id.text_top); this.textMiddle = view.findViewById(R.id.text_middle); this.textBottom = view.findViewById(R.id.text_bottom); TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.WrapperPeriodicElement, 0, 0); try { strTextTop = array.getString(R.styleable.WrapperPeriodicElement_textTop); strTextMiddle = array.getString(R.styleable.WrapperPeriodicElement_textMiddle); strTextBottom = array.getString(R.styleable.WrapperPeriodicElement_textBottom); } finally { array.recycle(); } textTop.setText(strTextTop); textMiddle.setText(strTextMiddle); textBottom.setText(strTextBottom); } public String getTextTop() { return strTextTop; } public String getTextMiddle() { return strTextMiddle; } public String getTextBottom() { return strTextBottom; } public void setTextTop(String text) { this.strTextTop = text; textTop.setText(strTextTop); invalidate(); requestLayout(); } public void setTextMiddle(String text) { this.strTextMiddle = text; textMiddle.setText(strTextMiddle); invalidate(); requestLayout(); } public void setTextBottom(String text) { this.strTextBottom = text; textBottom.setText(strTextBottom); invalidate(); requestLayout(); } }
此元素自定义视图:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="72dp" android:layout_height="wrap_content" android:background="@drawable/periodic_element_background" android:foreground="?android:attr/selectableItemBackground"> <TextView android:id="@+id/text_top" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginTop="4dp" android:textAppearance="?android:textAppearanceSmall" android:textColor="@color/colorAccent" android:textSize="14sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" tools:text="019" /> <TextView android:id="@+id/text_middle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:textAppearance="?android:textAppearanceLarge" android:textColor="@color/colorAccent" android:textSize="48sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:text="Kg" /> <TextView android:id="@+id/text_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:textAppearance="?android:textAppearanceMedium" android:textColor="@color/colorAccent" android:textSize="12sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/text_middle" tools:text="Potassium" /> </android.support.constraint.ConstraintLayout>
periodic_element:
periodic_element
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/periodic_element_disabled" android:state_enabled="false" /> <item android:drawable="@drawable/periodic_element_pressed" android:state_enabled="true" android:state_pressed="true" /> <item android:drawable="@drawable/periodic_element_pressed" android:state_enabled="true" android:state_focused="true" /> <item android:drawable="@drawable/periodic_element_enabled" android:state_enabled="true" /> </selector>
在我的示例中,每个项中只有一种颜色,这里是periodic_element_disabled.xml:
periodic_element_disabled.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/periodic_element_disabled"/> </shape>
main_activity.xml中的代码:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:orientation="horizontal" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="Are you made of Cooper and Tellurium?\nBecause you're" android:textAppearance="@style/TextAppearance.AppCompat.Headline" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <com.example.joao.periodicproject.customview.WrapperPeriodicElement android:id="@+id/element_cooper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" app:textBottom="Cooper" app:textMiddle="Cu" /> <com.example.joao.periodicproject.customview.WrapperPeriodicElement android:id="@+id/element_telurium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:layout_constraintStart_toEndOf="@+id/element_cooper" app:layout_constraintTop_toBottomOf="@+id/textView" app:textBottom="Tellurium" app:textMiddle="Te" app:textTop="52" /> <TextView android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:layout_marginTop="32dp" android:text="I was going to make a joke about sodium, but..." android:textAppearance="@style/TextAppearance.AppCompat.Headline" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/element_cooper" /> <com.example.joao.periodicproject.customview.WrapperPeriodicElement android:id="@+id/element_sodium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" /> </android.support.constraint.ConstraintLayout>
最后是MainActivity
MainActivity
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final WrapperPeriodicElement cooper = findViewById(R.id.element_cooper); cooper.setTextTop("29"); cooper.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, cooper.getTextBottom(), Toast.LENGTH_LONG).show(); } }); final WrapperPeriodicElement sodium = findViewById(R.id.element_sodium); sodium.setTextTop("11"); sodium.setTextMiddle("Na"); sodium.setTextBottom("Sodium"); sodium.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, sodium.getTextBottom(), Toast.LENGTH_LONG).show(); } }); } }
结果如下:
;您可以检查github上的代码
xdnvmnnf2#
要对字符串进行样式化,可以使用Spannable。它非常强大,可以让你做你想做的事情。例如使K与上标:
Spannable
SpannableStringBuilder cs = new SpannableStringBuilder("K19"); cs.setSpan(new SuperscriptSpan(), 1, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
对于较小的文本,可以使用new RelativeSizeSpan(0.5f),也可以使用新行\n使文本成为多行。然后将Spannable设置为按钮的文本。Here是一个更全面的指南。
new RelativeSizeSpan(0.5f)
\n
gpfsuwkq3#
只是不要使用Button,因为这只允许您使用一个文本。您可以通过创建RelativeLayout并向其添加多个TextViews,然后为布局创建一个单击侦听器来获得所需的效果。您可以通过为任何内容设置clickListener来使其成为按钮。更改视图的背景,以按照您所需的方式设置其样式。
khbbv19g4#
用于TextView:1.机器人:翻译Z =“100dp”1.安卓系统:提升=“2dp”
<com.google.android.material.button.MaterialButton app:cornerRadius="0dp" android:insetTop="0dp" android:insetBottom="0dp" android:minHeight="0dp" android:minWidth="0dp" android:id="@+id/BUTTON1" android:layout_width="match_parent" android:layout_height="100dp" android:backgroundTint="#d90000" android:text="B1" android:textSize="50dp" /> <TextView android:gravity="right" android:textColor="@color/ffffff" android:textStyle="bold" android:translationZ="100dp" android:elevation="2dp" android:text="Test" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout>
4条答案
按热度按时间iklwldmw1#
您可以创建自定义视图;设置布局内的文本元素定位,配置背景以在
pressed|selected|enabled|disabled
时表现为多种状态,最后将onClickListener
附加到视图;对于自定义视图,我使用了以下内容:
此元素自定义视图:
periodic_element
:在我的示例中,每个项中只有一种颜色,这里是
periodic_element_disabled.xml:
main_activity.xml中的代码:
最后是
MainActivity
结果如下:
;
您可以检查github上的代码
xdnvmnnf2#
要对字符串进行样式化,可以使用
Spannable
。它非常强大,可以让你做你想做的事情。例如使K与上标:
对于较小的文本,可以使用
new RelativeSizeSpan(0.5f)
,也可以使用新行\n
使文本成为多行。然后将Spannable设置为按钮的文本。
Here是一个更全面的指南。
gpfsuwkq3#
只是不要使用Button,因为这只允许您使用一个文本。您可以通过创建RelativeLayout并向其添加多个TextViews,然后为布局创建一个单击侦听器来获得所需的效果。您可以通过为任何内容设置clickListener来使其成为按钮。更改视图的背景,以按照您所需的方式设置其样式。
khbbv19g4#
用于TextView:
1.机器人:翻译Z =“100dp”
1.安卓系统:提升=“2dp”