直播系統平臺搭建,大屏倒數計時動畫效果

zhibo系統開發發表於2021-10-15

直播系統平臺搭建,大屏倒數計時動畫效果實現的相關程式碼

第一步:製作圓形背景圖

在android中,我們會用shape定義各種各樣的形狀,它能實現漸變色、虛線/分割線、邊框、半透明、半透明陰影效果。圓形背景圖為向量圖,先上程式碼:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="
    android:shape="oval">
    <solid android:color="@color/white" />
    <stroke
        android:width="4dp"
        android:color="@color/white" />
    <padding
        android:top="1dp"
        android:left="2dp"
        android:right="2dp"
        android:bottom="1dp"/>
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

解釋

solid 實心填充顏色,十六進位制顏色值,這裡設定了60%半透明度白色的效果

stroke 描邊,外邊框,可以設定顏色和寬度.同時,該屬性也可以用來畫虛線,通過設定dashGap和dashWidth兩個屬性控制虛線間隔和長度

padding 內容距離邊框的值

size 指定大小,shape為oval模式時,width和height相等時,代表正圓,否則de為橢圓

第二步:規劃佈局檔案,設定TextView的背景

按照文初看到的效果圖,佈局檔案中需要有一個可點選的Button,和一個可以變更數字的TextView。


首先,隱藏TextView的顯示,只顯示一個“倒數計時開始”的Button。

點選“倒數計時開始”後,將Button隱藏,將TextView顯示出來。

程式碼羅列如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
  xmlns:tools="
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/gray"
  android:gravity="center"
  tools:context="com.example.server.testapplication.MainActivity">
 
  <TextView
      android:id="@+id/count_text"
      android:layout_width="350dp"
      android:layout_height="350dp"
      android:background="@drawable/circle"
      android:gravity="center"
      android:textColor="@color/black"
      android:textSize="240sp"
      android:visibility="gone" />
 
  <Button
      android:id="@+id/count_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="倒數計時開始..." />
</RelativeLayout>


第三步:實現程式碼邏輯,用Handler實現動態更新TextView內容

初始化控制元件

設定Button的監聽方式為內部類監聽,原理是通過子執行緒傳送訊息,在主執行緒中更新UI。

定義Handler內部類用於接收並處理來自子執行緒的訊息,並判斷當前的count值若大於0,繼續延時傳送訊息,直到數字變為0.

package com.example.server.testapplication;
 
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
 
public class MainActivity extends Activity {
    private static final int START_COUNTING = 1;
    private static final int COUNT_NUMBER = 10;
 
    private Button mCountDown;
    private TextView mStartCount;
    private MyHandler mHandler = new MyHandler();
    private ButtonListener mButtonListener = new ButtonListener();
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }
 
    private void init() {
        mCountDown = (Button) findViewById(R.id.count_button);
        mCountDown.setOnClickListener(mButtonListener);
        mStartCount = (TextView) findViewById(R.id.count_text);
    }
 
    private class ButtonListener implements View.OnClickListener {
 
        @Override
        public void onClick(View v) {
            mCountDown.setVisibility(View.GONE);
            mStartCount.setVisibility(View.VISIBLE);
 
            Message msg = mHandler.obtainMessage();
            msg.what = START_COUNTING;
            msg.obj = COUNT_NUMBER;
            mHandler.sendMessageDelayed(msg, 10);
        }
    }
 
    private class MyHandler extends Handler {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
 
            switch (msg.what) {
                case START_COUNTING:
                    int count = (int) msg.obj;
                    mStartCount.setText(count + "");
                    if (count > 0) {
                        Message msg1 = obtainMessage();
                        msg1.what = START_COUNTING;
                        msg1.obj = count - 1;
                        sendMessageDelayed(msg1, 500);
                    }
                    break;
 
                default:
                    break;
            }
        }
    };
 
}


以上就是 直播系統平臺搭建,大屏倒數計時動畫效果實現的相關程式碼,更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2837558/,如需轉載,請註明出處,否則將追究法律責任。

相關文章