这里简单实现轻量级自定义View:
运行效果:
直接上代码
MainActivity:
package com.dashentao.customvideoview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SeekBar;
/**
* @author dashentao
* @date 2015 9-22
* @since V 1.0
*/
public class MainActivity extends AppCompatActivity {
private SeekBar seekbar;
private CustomVideoView customVideoView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekbar = (SeekBar) findViewById(R.id.seekbar);
customVideoView = (CustomVideoView) findViewById(R.id.customvideoview);
seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
customVideoView.setProgress(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
布局文件activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="@string/hello_world" />
<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/textview"
android:layout_centerHorizontal="true"
android:layout_margin="40dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:progressDrawable="@drawable/po_seekbar"
android:thumb="@drawable/seekbar_thumb"
android:thumbOffset="0dp" />
<com.dashentao.customvideoview.CustomVideoView
android:id="@+id/customvideoview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/seekbar"
android:layout_centerInParent="true" />
</RelativeLayout>
这里会用到自定义Seekbar:
- 涉及到几个属性:
android:progressDrawable=”@drawable/po_seekbar”
@+id/background:背景图
@+id/secondaryProgress:进度图
@+id/progress:进度图
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/background">
<shape>
<solid android:color="#ff51495e" />
</shape>
</item>
<item android:id="@+id/secondaryProgress">
<clip>
<shape>
<solid android:color="#ff51495e" />
</shape>
</clip>
</item>
<item android:id="@+id/progress">
<clip>
<shape>
<solid android:color="#ff996dfe" />
</shape>
</clip>
</item>
</layer-list>
android:thumb=”@drawable/seekbar_thumb”
滑动块按钮的背景图
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@mipmap/seekbar_thumb_normal" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />
<item android:drawable="@mipmap/seekbar_thumb_normal" />
</selector>
自定义View布局如下:
注释写的比较清晰,这里就不做说明了。
package com.dashentao.customvideoview;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by Administrator on 2015/9/22.
*/
public class CustomVideoView extends View {
// 半径
float r1 = 0;
float r2 = 0;
float r3 = 0;
// 外圆宽度
float w1 = 10;
// 内圆宽度
float w2 = 20;
// 画笔
Paint paint;
// 进度
float progress = 0;
// 位图
Bitmap bitmap;
// 位图限制区域
RectF oval;
public CustomVideoView(Context context) {
super(context);
init(context);
}
public CustomVideoView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CustomVideoView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
void init(Context context) {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ring);
}
@Override
protected void onDraw(Canvas canvas) {
float cx = getMeasuredWidth() / 2;
float cy = getMeasuredHeight() / 2;
r1 = cx - w1 / 2;
r2 = cx - w1 / 2 - w2 / 2;
r3 = cx - w1 / 2 - w2;
// 绘制外圆环
paint.setAntiAlias(true);
paint.setStrokeWidth(w1);
paint.setColor(Color.parseColor("#454547"));
canvas.drawCircle(cx, cy, r1, paint);
// 绘制中间圆环
paint.setColor(Color.parseColor("#747476"));
paint.setStrokeWidth(w2);
canvas.drawCircle(cx, cy, r2, paint);
// 绘制内圆环
paint.setColor(Color.parseColor("#464648"));
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(cx, cy, r3, paint);
// 绘制中间的图片
canvas.drawBitmap(bitmap, cx - bitmap.getWidth() / 2,
cx - bitmap.getHeight() / 2, paint);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(w2);
if (oval == null) {
// 用于定义的圆弧的形状和大小的界限
oval = new RectF(cx - r2, cy - r2, cx + r2, cy + r2);
}
canvas.drawArc(oval, 270, 360 * progress / 100, false, paint);
super.onDraw(canvas);
}
/**
* 设置进度
*
* @param progress 范围(0-100)
*/
public void setProgress(float progress) {
this.progress = progress;
if (this.progress >= 100)
this.progress = 100;
if (this.progress <= 0)
this.progress = 0;
postInvalidate();
}
}
到此为止,源码请自行下载:
github下载地址