玩的就是你,轻量级自定义View

这里简单实现轻量级自定义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下载地址

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值