1. 程式人生 > >Drawable基礎知識總結----TransitionDrawable圖片淡入淡出

Drawable基礎知識總結----TransitionDrawable圖片淡入淡出

效果圖:

功能介紹

自動輪播指定的圖片,並有倒計時,點選倒計時自動跳過(模擬跳過廣告功能),倒計時自動計算到0時,實現自動跳轉;給ImageView繫結圖片使用了background和src兩種屬性方法。

具體實現方法

在src資料夾下的drawable檔案新增幾張事先準備好的圖片,以備後續使用。
1.transition_drawable:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item
android:drawable="@drawable/img1"/>
<item android:drawable="@drawable/img2"/> </transition>

2.activity佈局:

<?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">
<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:gravity="center" android:layout_width
="match_parent" android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="利用執行緒在倒計時中無限迴圈圖片切換的次數" android:textSize="20sp"/> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/img_view" android:scaleType="centerInside" android:layout_width="381dp" android:layout_height="216dp" /> <TextView android:id="@+id/tv_time_count" android:layout_margin="10dp" android:layout_gravity="right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="22sp" android:text="3"/> </FrameLayout> <TextView android:id="@+id/tv_title_img_view1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp"/> <ImageView android:id="@+id/img_view1" android:layout_width="381dp" android:layout_height="216dp" android:scaleType="centerInside" android:background="@drawable/transition_drawable" /> <TextView android:id="@+id/tv_title_img_view2" android:layout_marginTop="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp"/> <ImageView android:id="@+id/img_view2" android:layout_width="381dp" android:layout_height="216dp" android:scaleType="centerInside" android:src="@drawable/transition_drawable" /> </LinearLayout> </ScrollView> </LinearLayout>

3.activity程式碼:

import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Build;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;

public class ActTransitionDrawable extends AppCompatActivity {

    @BindView(R.id.img_view1)
    ImageView imgView1;
    @BindView(R.id.img_view2)
    ImageView imgView2;
    @BindView(R.id.tv_title_img_view1)
    TextView tvTitleImgView1;
    @BindView(R.id.tv_title_img_view2)
    TextView tvTitleImgView2;

    @BindView(R.id.img_view)
    ImageView imgView;
    @BindView(R.id.tv_time_count)
    TextView tvTimeCount;

    private int adTime = 8000;//倒計時秒數
    private int timeInterval = 1000;//倒計時間隔
    private CountDownTimer mTimer;//計時器
    private int change = 0;//記錄下標
    private int[] ids = new int[]{R.drawable.img1, R.drawable.img2, R.drawable.img3};
    private Drawable[] drawables;//圖片集合
    private Thread mThread;//執行緒
    private boolean mThreadFlag = true;//執行緒結束標誌符


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_act_transitiondrawable);
        ButterKnife.bind(this);

//************************************/transitionDrawable是切換兩張圖片淡入淡出效果的一個類/************************************
        tvTitleImgView1.setText("在imageView設定的background屬性");
        TransitionDrawable drawable1 = (TransitionDrawable) imgView1.getBackground();
        drawable1.startTransition(3000);

        tvTitleImgView2.setText("在imageView設定的src屬性");
        TransitionDrawable drawable2 = (TransitionDrawable) imgView2.getDrawable();
        drawable2.startTransition(3000);

        //純程式碼實現
//        Bitmap bitmap1= BitmapFactory.decodeResource(getResources(), R.drawable.img1);
//        Bitmap bitmap2= BitmapFactory.decodeResource(getResources(), R.drawable.img2);
//        final TransitionDrawable td = new TransitionDrawable(new Drawable[] {  new BitmapDrawable(getResources(), bitmap1),
//                new BitmapDrawable(getResources(), bitmap2) });
//        imgView1.setImageDrawable(td);
//        td.startTransition(3000);

//************************************/transitionDrawable結合線程使圖片在指定時間內迴圈切換/************************************
        initView();
        initData();
    }

    private void initView() {
        //填充圖片
        drawables=new Drawable[ids.length];
        for (int i = 0; i < ids.length; i++) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                drawables[i] = getDrawable(ids[i]);
            } else {
                drawables[i] = getResources().getDrawable(ids[i]);
            }
        }

        tvTimeCount.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mTimer.cancel();
                jumpActivity();
            }
        });
    }

    //定義hander
    private Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            int duration = msg.arg1;
            TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{drawables[change % ids.length],
                    drawables[(change + 1) % ids.length]});
            change++;//改變標識位置
            imgView.setImageDrawable(transitionDrawable);
            transitionDrawable.startTransition(duration);
            return false;
        }
    });

    //開啟執行緒傳送訊息,讓transition一直在改變
    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            //這個while(true)是做死迴圈
            while (mThreadFlag) {
                int duration = 3000;//改變的間隔
                Message message = mHandler.obtainMessage();
                message.arg1 = duration;
                mHandler.sendMessage(message);
                try {
                    Thread.sleep(duration);
                    //隔duration秒傳送一次
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    private void initData() {
        // 初始化計時器,第一個引數是共要倒計時的秒數,第二個引數是倒計時的間隔
        mTimer = new CountDownTimer(adTime, timeInterval) {
            // 倒計時開始時要做的事情,引數m是直到完成的時間
            @Override
            public void onTick(long millisUntilFinished) {
                tvTimeCount.setText("" + millisUntilFinished / 1000 + "s跳過廣告");
            }
            // 結束計時後要做的工作
            @Override
            public void onFinish() {
                jumpActivity();
            }
        };
        //開啟計時器
        mTimer.start();
        //開啟執行緒,改變transition,切換圖片
        mThread= new Thread(new ActTransitionDrawable.MyRunnable());
        mThread.start();
    }



    // 跳轉頁面
    private void jumpActivity() {
        //如果還沒結束當前的頁面,就結束
        if (!isFinishing()) {
            finish();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        //mThread.stop(); 不推薦使用
        mThreadFlag=false;//結束執行緒
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        finish();
    }

}