Android二手書交易app設計（2）啓動圖Activity

時間 2019-11-18

標籤 android 手書交易 app 設計啓動 activity 欄目 Android 简体版

原文原文鏈接

　　在app打開的時候，會先進入到啓動圖界面。在啓動圖界面中停留3s（或者直接跳過），而後判斷是否已經登陸。進入到登陸頁面或者是進入到主頁面。android

一啓動圖界面

　　採用幀佈局（framelayout），全部控件都在界面左上角，按代碼順序依次覆蓋，因此先寫背景圖（image view），而後寫一個倒計時的控件（appcompatTextview）。這樣就可使倒計時空間覆蓋在背景圖上。app

 1 <FrameLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3 
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     //背景圖
 8     <ImageView
 9         android:id="@+id/start_back_img"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"
12         android:scaleType="centerCrop"
13         android:background="@mipmap/start_back"/>
14 
15     //底部app名
16     <ImageView
17         android:layout_width="match_parent"
18         android:layout_height="60dp"
19         android:layout_gravity="bottom"
20         android:background="@mipmap/start_back_bottom1"/>
21 
22     //右上角倒計時圖標
23     <android.support.v7.widget.AppCompatTextView
24         android:id="@+id/start_timer"
25         android:layout_height="50dp"
26         android:layout_width="50dp"
27         android:layout_marginTop="15dp"
28         android:layout_gravity="right"
29         android:layout_marginRight="15dp"
30         android:background="@drawable/circle_timer"
31         android:textColor="@android:color/white"
32         android:textSize="16sp"
33         android:gravity="center"/>
34 
35 
36 </FrameLayout>

倒計時圖標要單獨寫，要實現一個半透明的圓形圖標來顯示倒計時。ide

在main/res/drawable/中建立一個shape文件：circle_timer.xml。在其中寫好圓形以及半透明屬性。以下：工具

1 <shape xmlns:android="http://schemas.android.com/apk/res/android">
2     <solid android:color="#64ffffff"/>
3     <corners android:radius="1000dp"/>
4 </shape>

在倒計時圖標中的background調用這個shape文件就能夠實現目標設計。佈局

二使用Timer控制定時關閉啓動頁面

1.工具準備

在app中建立一個util包，在util包中新建一個timer包來存放相關timer工具。this

Timer是一種定時器工具，用來在一個後臺線程計劃執行指定任務。它能夠計劃執行一個任務一次或反覆屢次。spa

在timer中包括一個接口和一個基礎TimerTask。結構以下：線程

TimerTask一個抽象類，它的子類表明一個能夠被Timer計劃的任務。具體的任務在TimerTask中run接口中實現。設計

經過Timer中的schedule方法啓動定時任務。code

在BaseTimerTask中，在構造方法中傳入他的回調，在run接口中實現具體的任務。具體的執行在具體的activity中的實現run中。BaseTimerTask以下：

 1 public class BaseTimerTask extends TimerTask {
 2 
 3     //構造方法中傳入他的回調
 4     private ITimerListener mITimerListener = null;
 5 
 6     public BaseTimerTask(ITimerListener timerListener){
 7         this.mITimerListener = timerListener;
 8     }
 9 
10     @Override
11     public void run() {
12         if(mITimerListener != null){
13             mITimerListener.onTimer();
14         }
15     }
16 }

ITimerListener接口以下：

public interface ITimerListener {

    void onTimer();
}

2.具體實現

在startActivity中，新建一個Time類型mTimer，建立其初始化方法：

    private void initTimer() {
        mTimer = new Timer();
        final BaseTimerTask task = new BaseTimerTask(this);
        //第一個 第二個參數是延時開始，第三個是每隔1000ms（1s）執行一次
        mTimer.schedule(task, 0, 1000);
    }

在初始化方法中新建一個Timer，而且建立一個time的task，使用mTimer的schedule方法進行執行。具體參數意義見上圖註解。

在startActivity中要實現ITimerListener接口，因此要實現接口中的方法onTimer（）。在onTimer（）方法中就是執行具體的timer任務，在其中就實現一個倒計時具體的邏輯。具體代碼以下：

 1 //倒計時任務
 2     @Override
 3     public void onTimer() {
 4         runOnUiThread(new Runnable() {
 5             @Override
 6             public void run() {
 7                 if (mTvTimer != null) {
 8                     //使用MessageFormat來作字符串拼接
 9                     mTvTimer.setText(MessageFormat.format("跳過\n{0}s", mCount));
10                     mCount--;
11                     if (mCount < 0) {
12                         if (mTimer != null) {
13                             mTimer.cancel();
14                             mTimer = null;
15                             checkAccount();
16                         }
17                     }
18                 }
19             }
20         });
21     }

在這個方法中，由於在initTimer中實現了每一秒執行一次run（）方法。mTvTimer綁定在試圖中的倒計時控件，mCount則是定義好的倒計時時間，這裏定爲3s，每次執行run（）時候對mcount進行減1。

在mTvTimer中使用MessageFormat.format來作字符串拼接，其中內容顯示「跳過」和 ’mCount‘s。

若是mCount減到0之後，清空mTimer，而且中止Timer任務。在這時倒計時結束時候也開始執行checkAccout（）方法，來進行判斷登陸狀態相關。

3.綁定控件

由於使用了butterknife第三方庫，因此使用butterknife來進行注入綁定。

 1     //butterknife綁定倒計時的view和click
 2     @BindView(R.id.start_timer)
 3     AppCompatTextView mTvTimer = null;
 4 
 5     @OnClick(R.id.start_timer)
 6     void onClickTimerView() {
 7         if (mTimer != null) {
 8             mTimer.cancel();
 9             mTimer = null;
10             checkAccount();
11         }
12     }

如上，將mTvTimer和倒計時控件綁定，而且作一個點擊事件，點擊便是「取消」。因此執行倒計時結束邏輯。

三 StartActivity具體代碼

 1 public class StartActivity extends AppCompatActivity implements ITimerListener {
 2 
 3     private Timer mTimer = null;
 4     private int mCount = 3;
 5     private ImageView bingPicImg;
 6 
 7     @Override
 8     protected void onCreate(Bundle savedInstanceState) {
 9         super.onCreate(savedInstanceState);
10 
11         //隱藏actionBar
12         final ActionBar actionBar = getSupportActionBar();
13         if(actionBar!=null){
14             actionBar.hide();
15         }
16 
17         setContentView(R.layout.activity_start);
18         ButterKnife.bind(this);
19         initTimer();
20 
21     }
22 
23     //butterknife綁定倒計時的view和click
24     @BindView(R.id.start_timer)
25     AppCompatTextView mTvTimer = null;
26 
27     @OnClick(R.id.start_timer)
28     void onClickTimerView() {
29         if (mTimer != null) {
30             mTimer.cancel();
31             mTimer = null;
32             checkAccount();
33         }
34     }
35 
36     //判斷登陸狀態
37     private void checkAccount() {
38 
39     }
40 
41     private void initTimer() {
42         mTimer = new Timer();
43         final BaseTimerTask task = new BaseTimerTask(this);
44         //第一個 第二個參數是延時開始，第三個是每隔1000ms（1s）執行一次
45         mTimer.schedule(task, 0, 1000);
46     }
47 
48 
49     //倒計時任務
50     @Override
51     public void onTimer() {
52         runOnUiThread(new Runnable() {
53             @Override
54             public void run() {
55                 if (mTvTimer != null) {
56                     //使用MessageFormat來作字符串拼接
57                     mTvTimer.setText(MessageFormat.format("跳過\n{0}s", mCount));
58                     mCount--;
59                     if (mCount < 0) {
60                         if (mTimer != null) {
61                             mTimer.cancel();
62                             mTimer = null;
63                             checkAccount();
64                         }
65                     }
66                 }
67             }
68         });
69     }
70 
71 }