【Android】10.0 UI開發(fā)(一)——如何編寫程序界面邑飒、常見控件的使用

1.0 通過代碼來記錄控件,大抵有以下幾個控件
  • TextView 文本顯示
  • Button 按鈕
  • EditText 文本輸入
  • ImageView 插入圖片
  • AlertDialog 在當前界面彈出一個對話框,置于所有頁面元素之上,能夠屏蔽掉其他空間的交互能力省店。因此一般用于提示一些非常重要的內(nèi)容或者警告信息嚣崭。比如防止用戶誤刪重要內(nèi)容,在刪除前彈出一個確認對話框懦傍。
  • ProgressBar 圓圈進度條
2.0 新建一個項目雹舀,取名隨意,我的叫ViewControl粗俱。

項目目錄如下:

image
3.0 這里需要在res新建一個文件夾说榆,程序所需的圖片放在“drawable”文件夾,但是這個目錄并沒有指定具體的分辨率寸认,我們新建一個名稱為“drawable-xhdpi”的文件夾签财,把準備好的兩張照片放進去,注意文件名稱不能有空格號废麻,我這個兩張圖片隨便找的荠卷,目前選的都是200px*200px大小的圖片。
4.0 先看activity_main.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--android中所有控件都具有android:layout_width和android:layout_height這兩個屬性-->
    <!--可選值有三種烛愧,match_parent油宜、wrap_content、fill_parent-->
    <!--match_parent == fill_parent怜姿,但fill_parent不推薦使用-->
    <!--match_parent:表示控件大小和父類布局的大小一樣-->
    <!--wrap_content:當前控件大小剛好包含朱里面的內(nèi)容-->
    <!--android:gravity:文字的對齊方式慎冤,可選值有top、bottom沧卢、left蚁堤,right、center等,可以用“|”符號同時指定多個值-->
    <!--選擇center表左右和上下都中間對齊但狭,等同于center_vertical|center_horizontal-->
    <!--android:textSize:文字大小披诗,android中用sp這個單位-->
    <!--android:textColor文字顏色-->
    
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="這是一個文本控件"
        android:textColor="#00ff00"
        android:textSize="24sp"
        app:layout_constraintTop_toTopOf="parent" />
    
    <!--android:textAllCaps:是否使用所有英文字母自動進行大寫轉(zhuǎn)換功能-->
    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="退出程序"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent" />
    
    <!--&lt;!&ndash;EditText:用戶輸入和編輯內(nèi)容,并可以在程序中對這些內(nèi)容進行處理立磁。&ndash;&gt;-->
    <!--&lt;!&ndash;應用場景:發(fā)短信呈队、發(fā)微博、聊QQ等&ndash;&gt;-->
    <!--&lt;!&ndash;android:maxLines:指定EditText最大行數(shù)&ndash;&gt;-->
    <!--android:hint:很輕松就實現(xiàn)輸入框提示唱歧,在輸入后就會消失宪摧。-->
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請在這里隨便敲字,反正不管"
        android:maxLines="2"
        app:layout_constraintTop_toBottomOf="@+id/text_view" />

    <Button
        android:id="@+id/button_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="點擊記錄"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/edit_text" />

    <!--插入圖片-->
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo200px"
        app:layout_constraintTop_toBottomOf="@+id/button_1" />

    <Button
        android:id="@+id/button_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="切換圖片"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/image_view" />

    //顯示一個進度條
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/button_3"
        />

    <Button
        android:id="@+id/button_4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="隱藏/顯示進度條"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />

</android.support.constraint.ConstraintLayout>

4.1 首先看文件頭颅崩,<android.support.constraint.ConstraintLayout>標簽几于,ConstraintLayout是Android Studio 2.2中主要的新增功能之一,所以自動生成的布局文件不再用以前的布局標簽沿后。ConstraintLayout翻譯為 約束布局沿彭,也有人把它稱作 增強型的相對布局,由 2016 年 Google I/O 推出尖滚。扁平式的布局方式膝蜈,無任何嵌套锅移,減少布局的層級,優(yōu)化渲染性能饱搏。從支持力度而言非剃,將成為主流布局樣式,完全代替其他布局推沸。集萬千寵愛于一身的小公舉备绽,完全兼容約束集 LinearLayout(線性布局)和RelativeLayout(相對布局)。

4.2 因為目前我參考的學習資料時郭霖先生的《第一行代碼——Android 第二版》鬓催,大家可以參考下郭霖先生的博文:

Android新特性介紹肺素,ConstraintLayout完全解析

轉(zhuǎn)載請注明出處:http://blog.csdn.net/guolin_blog/article/details/53122387

但在寫這些代碼的時候,我看的是另一篇博文宇驾,比起郭霖大神的顯得很晦澀難懂倍靡,但還是硬著頭皮學會了,而且其實這樣去學會课舍,再回頭看郭霖大神的博文塌西,反而能夠很快從應用層面到代碼層面都可以快速理解,主要是新的布局使編程變得更加容易便捷了筝尾。

Android ConstraintLayout 使用詳解

http://www.reibang.com/p/b884b8c46584

基于此捡需,該標簽就不詳細記錄了。

4.3 控件標簽的說明在代碼里面了筹淫≌净裕總之呢,效果就是這樣了:

image
5.0 這里我新建了兩個java類损姜,注意饰剥,不是活動,是普通的java類摧阅,在com.example.viewcontrol目錄上右擊捐川,new→Java Class,輸入類名ActivityCollector逸尖,完成。再同樣的方法建立BaseActivity類:
image
image
6.0 這里我們先解釋下BaseActivity類瘸右,BaseActivity.java:
package com.example.viewcontrol;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

public class BaseActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("BaseActivity", getClass().getSimpleName());
        ActivityCollector.addActivity(this);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ActivityCollector.removeActivity(this);
    }
}

這個類的作用主要是能夠方便開發(fā)人員隨時知道自己目前項目運行時娇跟,哪一個活動位于棧頂,這里需要注意的是太颤,別導錯包苞俘,別導錯包,別導錯包龄章,重要的話說三遍吃谣。

至于其中:

ActivityCollector.addActivity(this);

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ActivityCollector.removeActivity(this);
    }

是結(jié)合ActivityCollector類乞封,在用戶創(chuàng)建活動時調(diào)用該類的addActivity()方法,在銷毀活動時岗憋,調(diào)用removeActivity()方法肃晚。

7.0 類主要作用是實時掌控所有的活動,并在需要時仔戈,可以殺死所有的活動关串,一次性銷毀,而不需要按Back鍵很多次直到返回棧清空监徘。ActivityCollector.java:
package com.example.viewcontrol;

import android.app.Activity;

import java.util.ArrayList;
import java.util.List;

public class ActivityCollector {
    public static List<Activity> activities = new ArrayList<>();

    //添加活動
    public static void addActivity(Activity activity){
        activities.add(activity);
    }

    //移除活動
    public static void removeActivity(Activity activity){
        activities.remove(activity);
    }

    //銷毀所有活動
    public static void finishAll(){
        for (Activity activity:activities){
            if (!activity.isFinishing()){
                activity.finish();

            }
        }
    }
}

可以看到晋修,里面都設(shè)置成為靜態(tài)方法,并利用數(shù)組作為模擬的返回棧存儲活動凰盔,我們可以直接調(diào)用類名點方法名直接調(diào)用墓卦,而不需要去創(chuàng)建實例。

8.0 這里是大頭户敬,MainActivity.java
package com.example.viewcontrol;

import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends BaseActivity {
    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;
    private int a = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button1 = (Button) findViewById(R.id.button_1);
        //存儲輸入的內(nèi)容
        editText = (EditText) findViewById(R.id.edit_text);
        imageView = (ImageView) findViewById(R.id.image_view);
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);
        //獲取輸入的內(nèi)容
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //提示打印
                String inputText = editText.getText().toString();
                Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show();
            }
        });

//        點擊退出程序落剪,交互性提示
        Button button2 = (Button) findViewById(R.id.button_2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //創(chuàng)建AlertDialog實例
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
//                設(shè)置標題
                dialog.setTitle("提示");
//                設(shè)置內(nèi)容
                dialog.setMessage("確定退出APP?");
//                是否可以用Back鍵關(guān)閉對話框
                dialog.setCancelable(false);
//                設(shè)置確認按鈕的點擊事件
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        ActivityCollector.finishAll();
//                      殺掉當前進程代碼,killProcess()方法
                        android.os.Process.killProcess(android.os.Process.myPid());
                    }
                });
//                設(shè)置取消按鈕的點擊事件
                dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                //配置好后用show()方法將電話框顯示出來
                dialog.show();


            }
        });

//        點擊切換圖片
        Button button3 = (Button) findViewById(R.id.button_3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (a == 1) {
                    imageView.setImageResource(R.drawable.qq2);
                    a = 0;
                } else {
                    imageView.setImageResource(R.drawable.logo200px);
                    a = 1;
                }

            }
        });

        //隱藏/顯示進度條
        Button button4 = (Button) findViewById(R.id.button_4);
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                這里在書上案例還用了用的ProgressDialog類山叮,但在api-28時著榴,提示,這個方法自api-26起被棄用
//                如果想模仿ProgressDialog出現(xiàn)時屁倔,用戶無法與界面繼續(xù)交互的效果脑又,百度
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
            }
        });
    }
}

8.1 首先代碼中創(chuàng)建了四個私有變量,說明這四個變量只需要在這個類中使用即可锐借。

 private EditText editText; //EditText  輸入框?qū)嵗? private ImageView imageView; //圖片實例
 private ProgressBar progressBar; //交互提示
 private int a = 1;  //一個簡單的計數(shù)器问麸,用于圖片切換時使用的變量。

8.2 下列類似的內(nèi)容都是為了綁定布局文件中的控件钞翔,也不多說严卖。

Button button1 = (Button) findViewById(R.id.button_1);
//存儲輸入的內(nèi)容
editText = (EditText) findViewById(R.id.edit_text);
imageView = (ImageView) findViewById(R.id.image_view);
progressBar = (ProgressBar) findViewById(R.id.progress_bar);

8.3 我們看對內(nèi)容為“點擊記錄”按鈕進行監(jiān)控的代碼:

button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //提示打印
                String inputText = editText.getText().toString();
                Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show();
            }
        });

editText實例存儲了輸入框輸入的內(nèi)容,相當于臨時數(shù)據(jù)的保存布轿,我們可以及時操作臨時數(shù)據(jù)哮笆,以免丟失。
通過調(diào)用getText()和toString()方法汰扭,將輸入框的內(nèi)容保存稠肘,并用Toast提示打印出來(當然,你也可以進行其他操作萝毛,比如保存)
實現(xiàn)效果:


image
image

8.4 我們看對內(nèi)容為“退出程序”按鈕進行監(jiān)控的代碼项阴,這個按鈕在屏幕的左下角:

//        點擊退出程序,交互性提示
        Button button2 = (Button) findViewById(R.id.button_2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //創(chuàng)建AlertDialog實例
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
//                設(shè)置標題
                dialog.setTitle("提示");
//                設(shè)置內(nèi)容
                dialog.setMessage("確定退出APP?");
//                是否可以用Back鍵關(guān)閉對話框
                dialog.setCancelable(false);
//                設(shè)置確認按鈕的點擊事件
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        ActivityCollector.finishAll();
//                      殺掉當前進程代碼笆包,killProcess()方法
                        android.os.Process.killProcess(android.os.Process.myPid());
                    }
                });
//                設(shè)置取消按鈕的點擊事件
                dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                //配置好后用show()方法將電話框顯示出來
                dialog.show();


            }
        });
image
image

除了上圖講述以外环揽,在“確定”選項還有操作代碼:

 dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        ActivityCollector.finishAll();
//                      殺掉當前進程代碼略荡,killProcess()方法
                        android.os.Process.killProcess(android.os.Process.myPid());
                    }
                });

這里第一句調(diào)用ActivityCollector類里面的finishAll()方法,殺掉所有的活動 == 返回棧清空歉胶。

第二句看著用吧汛兜,詳細解釋我也不知道,但是——這個killProcess()方法只能用于殺掉當前程序的進程跨扮。這樣兩句代碼徹底將該應用程序鎖占用的所有資源全部釋放出來序无,做個好人哦不,做個好APP衡创。

8.5 接著看對內(nèi)容為“切換圖片”按鈕進行監(jiān)控的代碼帝嗡,這個按鈕在圖片的下面:

//        點擊切換圖片
        Button button3 = (Button) findViewById(R.id.button_3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (a == 1) {
                    imageView.setImageResource(R.drawable.qq2);
                    a = 0;
                } else {
                    imageView.setImageResource(R.drawable.logo200px);
                    a = 1;
                }

            }
        });

這里用變量a做一個簡單的圖片切換效果而已

這里調(diào)用imageView類的setImageResource()方法,來修改圖片控件里的圖片

8.6 接著看對內(nèi)容為“隱藏/顯示進度條”按鈕進行監(jiān)控的代碼璃氢,這個按鈕在圖片的下面:

 //隱藏/顯示進度條
        Button button4 = (Button) findViewById(R.id.button_4);
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                這里在書上案例還用了用的ProgressDialog類哟玷,但在api-28時,提示一也,這個方法自api-26起被棄用
//                如果想模仿ProgressDialog出現(xiàn)時巢寡,用戶無法與界面繼續(xù)交互的效果,百度
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
            }
        });

在郭霖先生的《第一行代碼——Android 第二版》書中除了上面鎖控制的轉(zhuǎn)圈的進度條椰苟,還有一個ProgressDialog進度條抑月,他的功能時除了彈出圈圈之外,還位于所有頁面元素頂端舆蝴,封死其他頁面操作谦絮。但不推薦用,我也不去實現(xiàn)它了洁仗。至于取代方案层皱,沒有去研究學習,暫且放下赠潦。

8.7 在8.6的代碼中叫胖,getVisibility()方法用于判斷ProgressBar是否可見,如果可見她奥,就設(shè)置為不可見狀態(tài)瓮增,如果不可見,就設(shè)置為可見狀態(tài)哩俭。運行狀況如下:

image
image
9.0 在郭霖先生的《第一行代碼——Android 第二版》書中接下來的內(nèi)容主要講布局绷跑,但是因為使用ConstraintLayout標簽,導致大量內(nèi)容處于棄用(無效)狀態(tài)携茂。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市诅岩,隨后出現(xiàn)的幾起案子讳苦,更是在濱河造成了極大的恐慌带膜,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸳谜,死亡現(xiàn)場離奇詭異膝藕,居然都是意外死亡,警方通過查閱死者的電腦和手機咐扭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門芭挽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蝗肪,你說我怎么就攤上這事袜爪。” “怎么了薛闪?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵辛馆,是天一觀的道長。 經(jīng)常有香客問我豁延,道長昙篙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任诱咏,我火速辦了婚禮苔可,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘袋狞。我一直安慰自己焚辅,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布硕并。 她就那樣靜靜地躺著法焰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪倔毙。 梳的紋絲不亂的頭發(fā)上埃仪,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機與錄音陕赃,去河邊找鬼卵蛉。 笑死,一個胖子當著我的面吹牛么库,可吹牛的內(nèi)容都是我干的傻丝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诉儒,長吁一口氣:“原來是場噩夢啊……” “哼葡缰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤泛释,失蹤者是張志新(化名)和其女友劉穎滤愕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怜校,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡间影,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茄茁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片魂贬。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖裙顽,靈堂內(nèi)的尸體忽然破棺而出付燥,到底是詐尸還是另有隱情,我是刑警寧澤锦庸,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布机蔗,位于F島的核電站,受9級特大地震影響甘萧,放射性物質(zhì)發(fā)生泄漏萝嘁。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一扬卷、第九天 我趴在偏房一處隱蔽的房頂上張望牙言。 院中可真熱鬧,春花似錦怪得、人聲如沸咱枉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚕断。三九已至,卻和暖如春入挣,著一層夾襖步出監(jiān)牢的瞬間亿乳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工径筏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留葛假,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓滋恬,卻偏偏與公主長得像聊训,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子恢氯,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355