Android之自定义View

本文主要是记录一些零碎的东西

项目地址：https://github.com/CL-window/MyView

1 . 实现三个button ,可以左右滑动（动画效果），中间的一个突出显示（放大）

其实没啥，就是监听了滑动事件，只是动画太丑

/**
 * <p>Description:  中间突出的滑动 button </p>
 * Created by slack on 2016/7/11 11:00 .
 * 动画添加失败，以后再处理
 */
public class showCenter extends LinearLayout implements View.OnClickListener {

    private double downX,upX;
    private double threshold = 30;// 滑动阈值
    private int[] smallIco = {R.drawable.video,R.drawable.camera,R.drawable.gifp};// 小图 录像 拍照 gif
    private int[] bigIco = {R.drawable.video_large,R.drawable.camera_large,R.drawable.gifp_large};// 录像 拍照 gif
    private String[] bigIcoInfo = {"录像", "拍照", "GIF"};
    private int centerSelect = 1;
    private View view;
    private ImageView leftImage,centerImage,rightImage,tempImage;
    private TextView centerInfo;
    private ShowCenterListener mShowCenterListener;


    public showCenter(Context context) {
        super(context);
    }
    public showCenter(Context context, AttributeSet attrs) {
        super(context, attrs);
//        setWillNotDraw(false);// 关于onDraw()方法不被执行的解决方法
        view = LayoutInflater.from(context).inflate(R.layout.bottomview, this);
        initView();
        initListener();

    }

    private void initView() {
        leftImage = (ImageView) view.findViewById(R.id.bottom_view_left);
        centerImage =(ImageView)  view.findViewById(R.id.bottom_view_center_big);
        rightImage = (ImageView)view.findViewById(R.id.bottom_view_right);
        centerInfo = (TextView)view.findViewById(R.id.bottom_view_center_info);

        
    }
    private void initListener() {
        view.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {

                switch (motionEvent.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        downX = motionEvent.getX();
//                        Log.i("slack","ACTION_DOWN..."+downX);
                        break;
                    case MotionEvent.ACTION_MOVE:
//                        Log.i("slack","ACTION_MOVE...");
                        // 滑动中开始动画

                        break;
                    case MotionEvent.ACTION_UP:
                        upX = motionEvent.getX();
//                        Log.i("slack","ACTION_UP..."+upX);
                        if(downX - upX > threshold){
                            Log.i("slack","left...1");
                            leftSelect();
                        }else if(upX - downX > threshold){
                            Log.i("slack","right...1");
                            rightSelect();
                        }



//                        invalidate();//
                        changeView();
                        break;
                    default: break;
                }
                return true;
            }
        });
        leftImage.setOnClickListener(this);
        centerImage.setOnClickListener(this);
        rightImage.setOnClickListener(this);
        centerInfo.setOnClickListener(this);
    }

    private void leftSelect() {
        if(centerSelect > 2 ){
            centerSelect = 0;
        }
        centerSelect = (centerSelect + 1) % 3;
        

        startAnim();

    }

    private void startAnim() {
       
        animCreate(leftImage);
        animCreate(centerImage);
        animCreate(rightImage);
    }

    private void rightSelect() {
        if(centerSelect < 0){
            centerSelect = 2;
        }
        centerSelect = (centerSelect + 2) % 3;
        
        startAnim();
    }

    public AnimatorSet animCreate(ImageView imageView){

        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator oaX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.5f, 1f);
        ObjectAnimator oaY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.5f, 1f);
        ObjectAnimator oaA = ObjectAnimator.ofFloat(imageView, "alpha", 0.0f, 1f);
        animatorSet.play(oaX).with(oaY).with(oaA);
        animatorSet.setDuration(800);
        animatorSet.setInterpolator(new OvershootInterpolator());
//        animatorSet.setStartDelay(300);
        animatorSet.start();
        return animatorSet;
    }

    private void changeView() {
        leftImage.setImageResource(smallIco[(centerSelect + 2) % 3]);
        centerImage.setImageResource(bigIco[centerSelect % 3]);
        centerInfo.setText(bigIcoInfo[centerSelect]);
        rightImage.setImageResource(smallIco[(centerSelect + 1) % 3]);

        if(mShowCenterListener != null) {
            mShowCenterListener.onSliding(centerSelect);
        }

    }


    public showCenter(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        Log.i("slack","onLayout...3");

        super.onLayout(changed, left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.i("slack","onDraw...4");
        super.onDraw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.i("slack","onMeasure...2");
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.bottom_view_left:
                rightSelect();
                changeView();
                break;
            case R.id.bottom_view_center_big:
            case R.id.bottom_view_center_info:
                if(mShowCenterListener != null){
                    mShowCenterListener.onCenterClick();
                }
                break;
            case R.id.bottom_view_right:
                leftSelect();
                changeView();
                break;
            default: break;
        }
    }

    // 设置监听
    public void setListener(ShowCenterListener showCenterListener){
        mShowCenterListener = showCenterListener;
    }

    interface ShowCenterListener{
        void onSliding(int mode);// 滑动监听 提供当前中间的按钮模式 （ 0：录像  1：拍照  2：gif）
        void onCenterClick();// 点击中间的按钮（拍照或者gif或者录像） 监听
    }
}

2. progressbar 实现一个计时器，计时完成做相应的动作

代码：

/**
 * <p>Description: 自定义 ProgressBar ，倒计时效果，</p>
 * Created by slack on 2016/7/12 15:16 .
 */
public class MyProgressBar extends LinearLayout {

    private ProgressBar mProgressBar;
    private Handler mHandler;
    private int maxTime = 0;
    private ProgressListener mProgressListener;

    public MyProgressBar(Context context) {
        super(context);
    }

    public MyProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        mProgressBar = (ProgressBar)LayoutInflater.from(context).inflate(R.layout.progressbar, this).findViewById(R.id.progressBar);
        mHandler = new Handler();
    }

    public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     *
     * @param maxTime 时间（秒）
     */
    public void setMax(int maxTime) {
        this.maxTime = maxTime;
        mProgressBar.setProgress(1);
        mProgressBar.setMax(maxTime);
        mHandler.post(timeCount);
    }

    Runnable timeCount = new Runnable() {
        @Override
        public void run() {
//            Log.i("slack","timeCount " + mProgressBar.getProgress() + "," + maxTime);
            if(mProgressBar.getProgress() < maxTime) {
                mProgressBar.incrementProgressBy(1);
                if(mProgressListener != null){
                    mProgressListener.progress(mProgressBar.getProgress());
                }
                mHandler.postDelayed(timeCount, 1000);
            }else{
                if(mProgressListener != null){
                    mProgressListener.finish();
                }
                mHandler.removeCallbacks(timeCount);
//                Log.i("slack","timeCount finish...");
            }

        }
    };

    public interface ProgressListener{
        void progress(int progress);
        void finish();// 计时完成操作，这个控件需要dismiss
    }
}

使用：布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.example.bigview.MainActivity">


    <com.example.bigview.MyProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="20dp"></com.example.bigview.MyProgressBar>


   <!-- <com.example.bigview.showCenter
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World!" />-->

</LinearLayout>

activity里  ((MyProgressBar)findViewById(R.id.progress)).setMax(20);

3. seekBar 动画显示当前进度

看看自定义的view

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.support.v7.widget.ActionBarOverlayLayout;
import android.support.v7.widget.AppCompatSeekBar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.OvershootInterpolator;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.TextView;

/**
 * <p>Description:  </p>
 * Created by slack on 2016/7/18 13:14 .
 */
public class MySeekBar extends LinearLayout {

    private View view;
    private SeekBar mSeekBar;
    private SeekBarProgress mSeekBarProgress;
    private TextView proressInfo;
    private float progres = 0;

    public MySeekBar(Context context) {
        super(context);
    }

    public MySeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        view = LayoutInflater.from(context).inflate(R.layout.seekbar, this);

        init();
    }

    public MySeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        proressInfo = (TextView)view.findViewById(R.id.progress_info);
        mSeekBar = (SeekBar) view.findViewById(R.id.my_seekbar);
        changeInfoX();
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
//                Log.i("slack","onProgressChanged:" + progress);
                progres = progress;
                proressInfo.setText( progress + "%");

                animBig(proressInfo);
                if(mSeekBarProgress != null){
                    mSeekBarProgress.onSeekProgress(progress);
                }
                changeInfoX();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
//                Log.i("slack","onStartTrackingTouch...");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
//                Log.i("slack","onStopTrackingTouch..." +mSeekBar.getX() +","+
//                        (progres / 100) + "," +
//                        mSeekBar.getWidth() + "," +mSeekBar.getMeasuredWidth() + ","+
//                        (proressInfo.getMeasuredWidth() / 2) + "," +
//                        (mSeekBar.getMeasuredWidth() * (progres / 100) + mSeekBar.getX() ));
                // proressInfo 位置：progress点的位置上
                changeInfoX();
                animCreate(proressInfo);
            }
        });
    }

    private void changeInfoX() {
        proressInfo.setX( mSeekBar.getMeasuredWidth() * (progres / 100) + mSeekBar.getX() - (proressInfo.getMeasuredWidth() / 2) );
    }

    public AnimatorSet animCreate(View view){

        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator oaX = ObjectAnimator.ofFloat(view, "scaleX",0.5f, 1.0f, 0.5f);
        ObjectAnimator oaY = ObjectAnimator.ofFloat(view, "scaleY", 0.5f, 1.0f, 0.5f);
        ObjectAnimator oaA = ObjectAnimator.ofFloat(view, "alpha", 0.5f , 1.0f, 0.5f);
        animatorSet.play(oaX).with(oaY).with(oaA);
        animatorSet.setDuration(800);
        animatorSet.setInterpolator(new OvershootInterpolator());
//        animatorSet.setStartDelay(100);
        animatorSet.start();
        return animatorSet;
    }

    public AnimatorSet animBig(View view){

        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator oaX = ObjectAnimator.ofFloat(view, "scaleX",0.5f, 2.0f);
        ObjectAnimator oaY = ObjectAnimator.ofFloat(view, "scaleY", 0.5f, 2.0f);
        ObjectAnimator oaA = ObjectAnimator.ofFloat(view, "alpha", 0.5f , 1f);
        animatorSet.play(oaX).with(oaY).with(oaA);
        animatorSet.setDuration(0);
        animatorSet.setInterpolator(new OvershootInterpolator());
        animatorSet.start();
        return animatorSet;
    }


    public void setmSeekBarProgress(SeekBarProgress mSeekBarProgress) {
        this.mSeekBarProgress = mSeekBarProgress;
    }

    interface SeekBarProgress{
        void onSeekProgress(int progress);
    }

}

布局文件 seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/progress_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/border_progress_info"
        />

    <android.support.v7.widget.AppCompatSeekBar
        android:id="@+id/my_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:minHeight="2dp"
        android:maxHeight="2dp"
        android:max="100"
        android:progress="20"
        android:progressDrawable="@drawable/bg_seekbar"/>

</LinearLayout>