Android--自定義Button的樣式以及動態漸變效果
阿新 • • 發佈:2019-01-04
之前開發使用過自定義樣式的Button,使用挺簡單的,但也很常用,因此總結一下。
1,使用drawable檔案自定義靜態的Button樣式
首先,自定義一個drawable檔案custombutton.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 邊框顏色值-->
<item>
<shape>
<!--圓角 -->
<corners android:radius="20dp"></corners>
<!--邊框顏色-->
<solid android:color="#fff"></solid>
</shape>
</item>
<!-- 主題背景顏色值-->
<item android:bottom="1dp" android:right="1dp" android:top="1dp" android:left="1dp"><!--設定四個邊框(根據需要選擇對應邊框)-->
<shape>
<gradient android:centerX="0.5" android:centerY="0.5" /><!--與底層的垂直距離(陰影的效果)-->
<padding android:left="2dp" android:top="2dp" android:right="2dp android:bottom="2dp" />
<!-- 圓角 -->
<corners android:radius="20dp"/>
<solid android:color="ffffff"/><!--設定button的邊框裡內容的背景色-->
</shape>
</item>
</layer-list>
然後在xml佈局檔案中:
<Button
android:layout_width="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_height="wrap_content"
android:background="@drawable/custombutton"
android:text="這是測試按鈕"/>
如果新增下邊這一句會去掉Button的預設底色,只留下文字,我們使用自定義的話不需要新增這一句,只需要給Button的背景新增我們自定義的custombutton。style="?android:attr/borderlessButtonStyle
2,Button實現動態漸變效果
先寫一個選擇器內容是:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!-- 定義當button 處於pressed 狀態時的形態。-->
<shape>
<gradient android:startColor="#8600ff" /><!--內容實現漸變-->
<stroke android:width="2dp" android:color="#000000" /><!--邊框寬度和顏色-->
<corners android:radius="5dp" /><!--圓弧半徑-->
<padding android:left="10dp" android:top="10dp"
android:bottom="10dp" android:right="10dp" />
</shape>
</item>
<item android:state_focused="true">
<!-- 定義當button獲得focus時的形態-->
<shape>
<gradient android:endColor="#eac100" />
<stroke android:width="2dp" android:color="#333333" />
<corners android:radius="8dp" />
<padding android:left="10dp" android:top="10dp"
android:bottom="10dp" android:right="10dp" />
</shape>
</item>
</selector>
為button新增選擇器,佈局檔案:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.a51ckck.custombutton.MainActivity">
<TextView
android:id="@+id/tv_main_show"
android:background="#f0f000"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="你好習哥!!"
android:textColor="#ff0000"
android:gravity="center"
/>
<Button
android:id="@+id/bt_main_click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="click"
android:background="@drawable/dynamic"
android:text="點選按鈕"
android:layout_centerInParent="true"
/>
</RelativeLayout>
最後需要在Activity中為Button新增焦點:
public class MainActivity extends AppCompatActivity {
private TextView mTextView;
private Button mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextView= (TextView) findViewById(R.id.tv_main_show);
mButton= (Button) findViewById(R.id.bt_main_click);
setData();
}
private void setData() {
mButton.setFocusable(true);
mButton.setFocusableInTouchMode(true);
mButton.requestFocus();
mButton.requestFocusFromTouch();
}
public void click(View view) {
if(view!=null){
mTextView.setText("你好彭嫂!!!");
}
}
}
雖然不復雜,但是確是常使用的,所以掌握它是非常有必要的,最終來看一下效果圖: