小菜之前簡單學習了 HarmonyOS Text 文本的基本屬性,今天來學習一下 Button 按鈕的基本應用;
Button
Button 在日常開發中是必不可少的,在 Android 平臺中,Button 是繼承自 TextView,而在 HarmonyOS 平臺中,Button 同樣繼承自 Text;兩種語言的設計原理基本相同;
// Android
@RemoteView
public class Button extends TextView {
public Button(Context context) {
this(context, null);
}
public Button(Context context, AttributeSet attrs) {
this(context, attrs, com.android.internal.R.attr.buttonStyle);
}
public Button(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public Button(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
public CharSequence getAccessibilityClassName() {
return Button.class.getName();
}
@Override
public PointerIcon onResolvePointerIcon(MotionEvent event, int pointerIndex) {
if (getPointerIcon() == null && isClickable() && isEnabled()) {
return PointerIcon.getSystemIcon(getContext(), PointerIcon.TYPE_HAND);
}
return super.onResolvePointerIcon(event, pointerIndex);
}
}
// HarmonyOS
public class Button extends Text {
public Button(Context context) {
super((Context)null);
throw new RuntimeException("Stub!");
}
public Button(Context context, AttrSet attrSet) {
super((Context)null);
throw new RuntimeException("Stub!");
}
public Button(Context context, AttrSet attrSet, String styleName) {
super((Context)null);
throw new RuntimeException("Stub!");
}
}
Button 通過點擊觸發,常見的有文本按鈕,圖標按鈕,以及文本圖標按鈕,樣式也是包括圓角,觸發變色等多種常見效果;小菜逐一進行嘗試;
1. 文本按鈕
文本按鈕僅需設置 text 屬性即可;
<Button
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:background_ability_text"
ohos:left_margin="10vp"
ohos:padding="10vp"
ohos:right_margin="10vp"
ohos:text="Button01"
ohos:text_size="16fp"/>
2. 圖標按鈕
圖標按鈕可以通過設置 element 屬性實現,此時無需設置 text 屬性;
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_text"
ohos:element_start="$media:icon"
ohos:layout_alignment="center"
ohos:left_margin="10vp"
ohos:padding="10vp"
ohos:right_margin="10vp"
ohos:text_size="16fp"
ohos:top_margin="10vp"/>
3. 文本圖標按鈕
文本圖標屬性是 text 與 element 屬性的結合,其中若需要設置文本與圖標元素的間距可以通過 element_padding 屬性實現;
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_text"
ohos:element_left="$media:icon"
ohos:element_padding="10vp"
ohos:layout_alignment="center"
ohos:left_margin="10vp"
ohos:padding="10vp"
ohos:right_margin="10vp"
ohos:text="Button02"
ohos:text_size="16fp"
ohos:top_margin="10vp"/>
4. 圓角按鈕
對於按鈕的形狀,背景色等一般都是通過 shape 文件進行調整;shape 中有多種屬性與 Android 平臺類似;
- solid 爲背景填充色
- corner 爲四個角的的圓角半徑
- bounds 爲裏面的文字與邊界的間隔,但是單獨設置不生效
- stroke 爲邊框屬性
- gradient 爲漸變效果,但是單獨設置不生效
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#FFCCAA"/>
<corners
ohos:radius="12vp"/>
</shape>
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:shape_corner"
ohos:element_left="$media:icon"
ohos:element_padding="15vp"
ohos:layout_alignment="center"
ohos:left_padding="30vp"
ohos:padding="10vp"
ohos:right_padding="30vp"
ohos:text="Button03"
ohos:text_size="16fp"
ohos:top_margin="10vp"/>
5. 邊框按鈕
可以通過 shape 中的 bounds 設置按鈕的邊框效果;
<?xml version="1.0" encoding="UTF-8" ?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#FFCCAA"/>
<corners
ohos:radius="12vp"/>
<stroke
ohos:color="#CCAA00"
ohos:width="4vp"/>
</shape>
6. 漸變色按鈕
小菜嘗試 gradient 漸變色屬性,但是無法直接實現,於是小菜查詢了一些資料,通過 xml 和 Java 代碼兩種方式實現;
6.1 xml 方式
HarmonyOS 中 gradient 暫時只提供了一個 shader_type 樣式屬性,但是 solid 可以添加多種顏色,可以將漸變色填充在 solid 中,在 gradient 中設置漸變效果(線性漸變、角度漸變等);
<?xml version="1.0" encoding="UTF-8" ?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid ohos:colors="#FFCCAA,#FFFFFF,#CCAA00"/>
<corners
ohos:radius="12vp"/>
<gradient
ohos:shader_type="linear_gradient"/>
</shape>
6.2 Java 方式
小菜嘗試了 Java 方式,通過 ShapeElement 對背景效果進行設置,小菜會在後續文章中詳細學習 ShapeElement;
Button button1 =(Button) findComponentById(ResourceTable.Id_test_btn1);
button1.setBackground(linearGradientShape());
private ShapeElement linearGradientShape(){
ShapeElement shapeElement = new ShapeElement();
shapeElement.setShape(ShapeElement.RECTANGLE);
shapeElement.setCornerRadius(30.0f);
RgbColor[] rgbColors = new RgbColor[]{
RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)),
RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_center)),
RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))};
shapeElement.setRgbColors(rgbColors);
shapeElement.setShaderType(ShapeElement.LINEAR_GRADIENT_SHADER_TYPE);
shapeElement.setGradientOrientation(ShapeElement.Orientation.LEFT_TO_RIGHT);
return shapeElement;
}
7. 點擊變色按鈕
對於觸發點擊變色按鈕,與 Android 方式類似,通過設置兩個 shape 背景效果,在 state-container 中添加默認和點擊效果即可;
<?xml version="1.0" encoding="utf-8"?>
<state-container
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<item
ohos:element="$graphic:shape_corner_selected"
ohos:state="component_state_pressed"/>
<item
ohos:element="$graphic:shape_corner_normal"
ohos:state="component_state_empty"/>
</state-container>
小菜嘗試了對 Button 樣式的多種效果,與 Android 開發方式大同小異,很多具體的 API 還需要參考查詢文檔;若有問題,請多多指導!
來源:阿策小和尚