Android绘制(一):来用shape绘出想要的图形吧!
生活随笔
收集整理的這篇文章主要介紹了
Android绘制(一):来用shape绘出想要的图形吧!
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
- 前言
- shape繪制
- 矩形
- 橢圓
- 線
- 環(huán)
- 用shape繪制SeekBar
- 最后
前言
在沒有UI設(shè)計(jì)師的時(shí)候, 或者是想簡單看下效果的時(shí)候, 用shape進(jìn)行快速繪制是極好的! 官方文檔.
shape繪制
一共有四種shape: rectangle, oval, line, ring.
矩形
我們一個(gè)一個(gè)來看, 首先是矩形:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 顏色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 內(nèi)間距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 漸變 --><gradientandroid:angle="45"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="linear" /><!-- 圓角 --><!--<corners android:radius="200dp" />--><!-- 圓角單獨(dú)設(shè)置 --><cornersandroid:bottomLeftRadius="0dp"android:bottomRightRadius="0dp"android:topLeftRadius="40dp"android:topRightRadius="40dp" /><!-- 描邊 --><strokeandroid:width="2dp"android:color="#666"android:dashGap="4dp"android:dashWidth="4dp" /> </shape> 復(fù)制代碼- 漸變gradient是會覆蓋顏色的, 如果你想要純色, 直接設(shè)置顏色值即可, 就是設(shè)置solid中的color.
- 順帶一提, solid只有color一個(gè)參數(shù).
- 如果你沒有漸變gradient, 也不寫solid, 那么將會是空心的.
- 漸變gradient的type參數(shù)有3個(gè):
- linear 線性漸變
- sweep 掃描漸變
- radial 放射漸變, 需要配合參數(shù)gradientRadius
- 圓角corners可以直接設(shè)置radius, 也可以一個(gè)一個(gè)指定.
- 描邊stroke的話不寫dashGap, dashWidth就會是實(shí)線, dashWidth代表虛線寬度, dashGap代表虛線間隔.
- 內(nèi)間距padding和尺寸size就不提了, 大家都懂的.
橢圓
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 顏色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 內(nèi)間距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 漸變 --><gradientandroid:centerColor="@color/colorPrimary"android:endColor="@color/colorPrimaryDark"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描邊 --><strokeandroid:width="1dp"android:color="#333" /> </shape> 復(fù)制代碼- 漸變是最多可以設(shè)置三種顏色, 意思一看便知了:
- startColor
- centerColor
- endColor
- 一般橢圓都會用來繪制實(shí)心的小圓點(diǎn).
線
線就很簡單了:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line"><!-- 描邊 --><strokeandroid:width="8dp"android:color="@color/colorPrimary"android:dashGap="8dp"android:dashWidth="6dp" /> </shape> 復(fù)制代碼環(huán)
最后來看環(huán), 它有些特有屬性:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="4"android:shape="ring"android:thicknessRatio="100"android:useLevel="false"><!-- 尺寸 --><sizeandroid:width="200dp"android:height="200dp" /><!-- 漸變 --><gradientandroid:angle="0"android:centerColor="@color/colorPrimaryDark"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描邊 --><strokeandroid:width="1dp"android:color="#777"android:dashGap="4dp"android:dashWidth="4dp" /> </shape> 復(fù)制代碼- thicknessRatio 指的是環(huán)厚度百分比, 默認(rèn)是9, 比如說這里寬度是200dp, thicknessRatio是100, 環(huán)厚度就是200dp / 100 = 2dp. 當(dāng)然, 你可以直接用thickness設(shè)置厚度.
- innerRadiusRatio 是內(nèi)環(huán)百分比, 默認(rèn)是3, 就是指用寬度 / 百分比得到的值就是內(nèi)環(huán)半徑. 同樣可以用innerRadius直接設(shè)置.
用shape繪制SeekBar
我知道有很多非常好看的自定義進(jìn)度條, 但是我寫這個(gè)SeekBar是想補(bǔ)充下shape的使用, 用非常少量的代碼實(shí)現(xiàn)自定義進(jìn)度條. 來看看效果圖:
- 實(shí)現(xiàn)
簡單解釋下幾個(gè)要點(diǎn)屬性:
- max代表進(jìn)度條最大的值.
- maxHeight, minHeight可以設(shè)置進(jìn)度條寬度, 我喜歡稍微寬一點(diǎn)的.
- thumb設(shè)置滑塊, 可以是圖片, 可以是shape寫的設(shè)置.
- progressDrawable代表進(jìn)度條的外觀, 可以是圖片, 可以是shape寫的設(shè)置.
再來看看滑塊和進(jìn)度條外觀具體代碼, 進(jìn)度條可以設(shè)置背景, 進(jìn)度, 和第二進(jìn)度. 滑塊的話, 你想畫成什么樣都行.
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@android:id/background"><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/darker_gray" /></shape></item><item android:id="@android:id/secondaryProgress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@color/colorAccent" /></shape></clip></item><item android:id="@android:id/progress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/holo_blue_light" /></shape></clip></item> </layer-list> 復(fù)制代碼<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@android:color/holo_blue_light" /><strokeandroid:width="@dimen/one_dp"android:color="@android:color/holo_blue_light" /><sizeandroid:width="@dimen/sixteen_dp"android:height="@dimen/sixteen_dp" /> </shape> 復(fù)制代碼java部分的話, 用Handler實(shí)例postDelayed方法讓進(jìn)度條跑起來就可以看到效果了. 這里設(shè)定50ms發(fā)一次消息.
findViewById(R.id.cv_start).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (mRunnable == null) {mRunnable = new MyRunnable();mHandler.postDelayed(mRunnable, 0);}} });findViewById(R.id.cv_stop).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mHandler.removeCallbacks(mRunnable);mRunnable = null;} }); 復(fù)制代碼private class MyRunnable implements Runnable {@Overridepublic void run() {int progress = mSbTest.getProgress();mTvProgress.setText(String.valueOf(progress));mSbTest.setProgress(++progress);mSbTest.setSecondaryProgress(progress + 10);int progress2 = mSbTest2.getProgress();mTvProgress2.setText(String.valueOf(progress2));mSbTest2.setProgress(++progress2);mSbTest2.setSecondaryProgress(progress2 + 20);mHandler.postDelayed(this, 50);} } 復(fù)制代碼最后
我個(gè)人還是偏向用shape繪制的, 圖片一出理不好就是內(nèi)存溢出啊, 形變啊, 還要注意分辨率, 真心頭大. 喜歡記得點(diǎn)贊哦, 暗中關(guān)注我也是可以的~
總結(jié)
以上是生活随笔為你收集整理的Android绘制(一):来用shape绘出想要的图形吧!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab实现长除法,【网安智库】基于
- 下一篇： matlab矩阵除法——记忆技巧