Android形狀圖形與狀態(tài)列表圖形及九宮格圖片超詳細(xì)講解
一、圖形Drawable
Drawable類型表達(dá)了各種各樣的圖形,包括圖片、色塊、畫板、背景等。
包含圖片在內(nèi)的圖形文件放在res目錄的各個(gè)drawable目錄下,其中drawable目錄一般保存描述性的XML文件,而圖片文件一般放在具體分辨率的drawable目錄下。
各視圖的background屬性、ImageView和ImageButton的src屬性、TextView和Button四個(gè)方向的drawable***系列屬性都可以引用圖形文件。
二、形狀圖形
Shape圖形又稱形狀圖形,它用來(lái)描述常見的幾何形狀,包括矩形、圓角矩形、圓形、橢圓等。
形狀圖形的定義文件是以Shape標(biāo)簽為根節(jié)點(diǎn)的XML描述文件。
實(shí)際開發(fā)一般主要使用3個(gè)節(jié)點(diǎn):stroke、corners、solid。
1、類型的形狀:
- rectangle:矩形,默認(rèn)
- oval:橢圓,此時(shí)corners節(jié)點(diǎn)失效
- line:直線,此時(shí)必須設(shè)置stroke節(jié)點(diǎn),不然報(bào)錯(cuò)
- ring:圓環(huán)
2、size(尺寸)
size是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形的寬高尺寸,若無(wú)size節(jié)點(diǎn),則表示寬高與宿主視圖一樣大小,下面是size節(jié)點(diǎn)的常用屬性說(shuō)明:
- height:像素類型,圖形高度。
- width:像素類型,圖形寬度。
3、stroke(描邊)
stroke是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形的描邊規(guī)格,若無(wú)stroke節(jié)點(diǎn),則表示不存在描邊,下面是stroke節(jié)點(diǎn)的常用屬性說(shuō)明:
- color:顏色類型,描邊的顏色。
- dashGap:像素類型,每段虛線之間的間隔。
- dashWidth:像素類型,每段虛線的寬度,若dashGap和dashWidth有一個(gè)值為0,則描邊為實(shí)線。
- wdith:像素類型,描邊的厚度。
4、corners(圓角)
corners是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形的圓角大小,若無(wú)corners節(jié)點(diǎn),則表示無(wú)圓角,下面是常用屬性:
- bottomLeftRadius:坐下圓角的半徑。
- bottomRightRadius:右下圓角的半徑。
- topLeftRadius:左上圓角的半徑。
- topRightRadius:右上圓角的半徑。
- radius:四個(gè)圓角的半徑。
5、solid(填充)
solid是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形的填充色彩,若無(wú)solid節(jié)點(diǎn),則表示無(wú)填充顏色,下面的屬性說(shuō)明:
- color:內(nèi)部填充的顏色。
6、padding(間隔)
padding是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形與周圍邊界的間隔,若無(wú)padding節(jié)點(diǎn),則表示四周不設(shè)間隔,下面的常用屬性:
- top:與上方的間隔。
- bottom:與下方的間隔。
- left:與左邊的間隔。
- right:與右邊的間隔。
7、gradient(漸變)
gradient是shape的下級(jí)節(jié)點(diǎn),它描述了形狀圖形的顏色漸變,若無(wú)gradient節(jié)點(diǎn),則表示沒(méi)有漸變效果,下面的常用屬性:
- angle:整型,漸變的起始角度,為0表示9點(diǎn)鐘位置,增值大表示往逆時(shí)針?lè)较蛐D(zhuǎn)。
- type:漸變類型。
漸變類型 | 說(shuō)明 |
linear | 線性漸變,默認(rèn) |
radial | 放射漸變,起始顏色就是圓心顏色 |
sweep | 滾動(dòng)漸變,即一個(gè)線段以某個(gè)端點(diǎn)為圓心做360°旋轉(zhuǎn) |
- centerX:浮點(diǎn)型,圓心的X坐標(biāo),type=linear時(shí)不可用。
- centerY:浮點(diǎn)型,圓心的Y坐標(biāo),type=linear時(shí)不可用。
- gradientRadius:整型,漸變半徑,type=radial時(shí)需要設(shè)置。
- centerColor:漸變的中間顏色。
- startColor:漸變的起始顏色。
- endColor:漸變的終止顏色。
- useLevel:布爾類型,設(shè)置為true為無(wú)漸變色。
例:點(diǎn)擊按鈕切換圖形
xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:id="@+id/v_content" android:layout_width="match_parent" android:layout_height="200dp" android:layout_margin="10dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/btn_rect" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="圓角矩形"/> <Button android:id="@+id/btn_oval" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="橢圓矩形"/> </LinearLayout> </LinearLayout>
drawable下新建rect.xml文件
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <!--指定形狀內(nèi)部的填充顏色--> <solid android:color="#ffdd66"/> <!-- 指定形狀輪廓的粗細(xì)與顏色--> <stroke android:width="1dp" android:color="#aaaaaa"/> <!-- 指定形狀四個(gè)圓角的半徑--> <corners android:radius="10dp"/> </shape>
oval.xml文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!--指定形狀內(nèi)部的填充顏色--> <solid android:color="#ff66aa"/> <!-- 指定形狀輪廓的粗細(xì)與顏色--> <stroke android:width="1dp" android:color="#aaaaaa"/> </shape>
java代碼
public class DrawableShapeActivity extends AppCompatActivity implements View.OnClickListener { private View v_content; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drawable_shape); v_content = findViewById(R.id.v_content); findViewById(R.id.btn_rect).setOnClickListener(this); findViewById(R.id.btn_oval).setOnClickListener(this); //v_content的背景設(shè)置為圓角矩形 v_content.setBackgroundResource(R.drawable.shape_rect_gold); } @Override public void onClick(View view) { switch (view.getId()){ case R.id.btn_rect: v_content.setBackgroundResource(R.drawable.shape_rect_gold); break; case R.id.btn_oval: v_content.setBackgroundResource(R.drawable.shape_oval_rose); break; } } }
運(yùn)行結(jié)果:
三、九宮格圖片
將某張圖片設(shè)置成視圖背景時(shí),如果圖片尺寸太小,則會(huì)自動(dòng)拉伸使之填滿背景,但圖片拉的過(guò)大,會(huì)變得模糊。
使用九宮格圖片:將圖片后綴改為.9.png
四、狀態(tài)列表圖形
Button按鈕的背景在正常情況下是凸起的,在按下時(shí)是凹陷的,從按下到彈起的過(guò)程,用戶便能知道點(diǎn)擊了這個(gè)按鈕。
例:
當(dāng)按鈕被按下時(shí)使用的是第一個(gè)item的圖片
<item android:drawable="@drawable/button_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/button_normal"/>
狀態(tài)類型的取值說(shuō)明
狀態(tài)列表圖形不僅用于按鈕控件,還可用于其他擁有多種狀態(tài)的控件。
到此這篇關(guān)于Android形狀圖形與狀態(tài)列表圖形及九宮格圖片超詳細(xì)講解的文章就介紹到這了,更多相關(guān)Android形狀圖形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android AndBase框架實(shí)現(xiàn)多功能標(biāo)題欄(一)
這篇文章主要整理了Android AndBase框架學(xué)習(xí)筆記,本文主要使用AndBase實(shí)現(xiàn)多功能標(biāo)題欄,感興趣的小伙伴們可以參考一下2016-03-03Android TextView 設(shè)置字體大小的方法
這篇文章主要介紹了Android TextView 設(shè)置字體大小的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02Android ContentProvider實(shí)現(xiàn)獲取手機(jī)聯(lián)系人功能
這篇文章主要為大家詳細(xì)介紹了Android ContentProvider實(shí)現(xiàn)獲取手機(jī)聯(lián)系人功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Flutter組件實(shí)現(xiàn)進(jìn)度指示器
這篇文章主要為大家詳細(xì)介紹了Flutter組件實(shí)現(xiàn)進(jìn)度指示器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Flutter中顯示條件Widget的實(shí)現(xiàn)方式
在 Flutter 日常開發(fā)中經(jīng)常會(huì)遇見這樣的需求,如: 只有用戶是 VIP 時(shí),才能展示某個(gè)入口或者某個(gè)模塊,這樣的需求在開發(fā)業(yè)務(wù)需求中多如牛毛,那你是如何來(lái)優(yōu)雅的實(shí)現(xiàn)的呢,本文將給大家介紹Flutter中顯示條件Widget的實(shí)現(xiàn)方式,需要的朋友可以參考下2024-04-04一鍵移除ButterKnife并替換為ViewBinding的舊項(xiàng)目拯救
這篇文章主要為大家介紹了一鍵移除ButterKnife并替換為ViewBinding的舊項(xiàng)目拯救詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02