您好,登錄后才能下訂單哦!
最近項目上要實現(xiàn)語音搜索功能,界面樣式要模仿一下UC瀏覽器的樣式,UC瀏覽器中有一個控件,會隨著聲音大小浮動,然后尋思偷個懶,百度一下,結(jié)果也沒有找到類似的,只能自己動手了。
先上圖看我實現(xiàn)的效果:
這是自定義控件的代碼,里面注釋也很明白,就不費(fèi)話了
public class CustomCircleView extends View{ private Paint mPaint; private int strokeWidth = 0; //圓環(huán)的寬度 private Bitmap bitmap = null; // 圖片位圖 private int nBitmapWidth = 0; // 圖片的寬度 private int nBitmapHeight = 0; // 圖片的高度 private int width; //view的寬度 private int height ; //view的高度 private int bigCircleColor =0; //view的高度 private int floatCircleColor =0; //view的高度 public CustomCircleView(Context context) { this(context, null); } public CustomCircleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomCircleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleView, defStyleAttr, 0); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.CustomCircleView_icon: bitmap = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0)); break; case R.styleable.CustomCircleView_bigCircleColor: bigCircleColor = a.getColor(attr, Color.GRAY); break; case R.styleable.CustomCircleView_floatCircleColor: floatCircleColor = a.getColor(attr,Color.GREEN); break; } } a.recycle(); mPaint = new Paint(); //如果布局中沒有設(shè)置bigCircleColor和floatCircleColor的時候給他一個默認(rèn)值 if (bigCircleColor==0){ bigCircleColor=Color.parseColor("#FFEEF0F1"); } if (floatCircleColor==0){ floatCircleColor=Color.parseColor("#25c1f5"); } // 獲取圖片高度和寬度 nBitmapWidth = bitmap.getWidth(); nBitmapHeight = bitmap.getHeight(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); //獲取view的高度和寬度 這個view必須給精確值?。。。。。。。? if (widthMode == MeasureSpec.EXACTLY) { width = widthSize; } if (heightMode == MeasureSpec.EXACTLY) { height = heightSize; } setMeasuredDimension(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setAntiAlias(true); // 消除鋸齒 //繪制最外層灰色大圓 mPaint.setColor(bigCircleColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(height/2-nBitmapHeight/2); //計算圓的半徑稍微麻煩點(diǎn),但是在圖上畫一下應(yīng)該能明白 (height/2-nBitmapHeight/2)/2+nBitmapHeight/2 canvas.drawCircle(width/2, height/2, (height/2-nBitmapHeight/2)/2+nBitmapHeight/2, mPaint); //繪制浮動的圓 mPaint.setColor(floatCircleColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(strokeWidth); canvas.drawCircle(width/2, height/2, strokeWidth/2+nBitmapHeight/2, mPaint); //繪制中間圖標(biāo) canvas.drawBitmap(bitmap, width/2-nBitmapWidth/2, height/2-nBitmapHeight/2, mPaint); } //根據(jù)傳入的寬度重新繪制 public void setStrokeWidth(int with){ this.strokeWidth=with; invalidate(); } }
在res/values 下建一個attrs文件 代碼:
<resources> <declare-styleable name="CustomCircleView"> <attr name="bigCircleColor" format="color" /> <attr name="floatCircleColor" format="color" /> <attr name="icon" format="reference" /> </declare-styleable> </resources>
在布局中的使用:
<com.example.administrator.mycustomcircleview.CustomCircleView android:id="@+id/customView" android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center" app:icon="@mipmap/voice_icon" app:floatCircleColor="@color/colorAccent" app:bigCircleColor="@color/colorPrimaryDark" />
高度寬度一定要給精確值,切記?。。?!顏色值可以不設(shè)定,默認(rèn)就是我上面圖的效果。
然后根據(jù)音量大小直接傳入數(shù)值就可以了,很簡單的使用方法,這里我用隨機(jī)數(shù)代替了。
customView = ((CustomCircleView) findViewById(R.id.customView)); button = ((Button) findViewById(R.id.button)); button.setOnClickListener(this); } @Override public void onClick(View v) { Random random=new Random(); customView.setStrokeWidth(random.nextInt(100)); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。