1. 程式人生 > >2、Android-UI(上)

2、Android-UI(上)

color 註冊 ESS 最大 不可 oncreate conda this 增加

2.1、如何編寫程序頁面

Android中有許多編寫程序的方式可供選擇

Android Studio和Eclipse中都提供了響應的可視化編輯器

可以直接再進行拖動創建布局

推薦使用手動編寫方式進行開發

2.2、常用空間的使用

1、TextView

是Android中最簡單的控件

主要用於再界面上顯示一段文本信息

   <TextView
        android:id="@+id/text_view"
        android:text="this is testView"
        android:layout_width="match_parent
" android:layout_height="wrap_content" />

android:layout_width:指定控件的寬帶
android:layout_height:指定控件的高度
三個可選值:
match_parent、fill_parent:和父布局大小一樣,推薦使用match_parent
warp_content:剛好包裹裏面的內容
同時也可以指定一個固定的值
問題是:有時會在不同的手機屏幕上出現適配的問題
技術分享圖片

這裏的顯示的寬度是和屏幕一致的

文字默認是居左上對齊,寬度是和屏幕一致,但是文字不夠長看出效果

可以使用android:gravity

來指定文字的對其方式

    <TextView
        android:id="@+id/text_view"
        android:text="tViews"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

可選值:top bottom left right center 多個值使用 | 來分割

技術分享圖片

center等同於 center_horizontal|center_vertical

表示文字水平方向劇中對齊

修改文字的大俠和顏色

android:textSize:修改文字的大小(單位sp)

android:textColor:設置文字的大小

    <TextView
        android:id="@+id/text_view"
        android:text="tViews"
        android:textSize="25sp"
        android:textColor="#00ffff"
        android:gravity="center_horizontal|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

技術分享圖片

還有很多的屬性可以查詢官方文檔

2、Button

是和用戶進行交互的一個重要的按鈕組件

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_first"
        android:text="to first"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_second"
        android:text="to second"/>

這裏會發現所有小寫的文字都變成了大寫的

系統會對Button中的所有的字母進行大寫轉換

技術分享圖片

android:textAllCaps="false"對其進行設置

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_first"
        android:textAllCaps="false"
        android:text="to first"/>

技術分享圖片

還可以再FirstActivity中進行為其設置監聽器:

FirstActivity

public class FirstActivity extends AppCompatActivity {
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first_layout);

        Button first = (Button) findViewById(R.id.button_first);
        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(FirstActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });
    }
}

每次的點擊事件都會執行監聽器中的onClick()方法

只需要再監聽器中實現自己的邏輯

同時還可以實現接口的方法來實現開進行註冊

public class FirstActivity extends AppCompatActivity implements View.OnClickListener {
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first_layout);
        Button first = (Button) findViewById(R.id.button_first);
        first.setOnClickListener(this);
    }
    
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button_first:
                //
                break;
            default:
                break;
        }
    }
}

兩種方法均可以實現點擊事件的監聽

3、EditText

用於和用戶進行交互,允許用戶向控件中輸入和編輯內容

並可以再程序中對這些內容 進行處理

    <EditText
        android:id="@+id/edit_text"
        android:hint="請輸入賬戶"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

android:hint:是提示的內容,點擊輸入內容之後就hi消失

技術分享圖片

對輸入的文本內容有一個限制

使用android:maxLines:數值

對其最大行進行限制

    <EditText
        android:id="@+id/edit_text"
        android:hint="請輸入賬戶"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="3"
        />

如圖可見,此時超過3行,文本就會向上滾

技術分享圖片

如何點擊按鈕獲取文本框中的數值?

在FirstActivity.java中

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("FirstActivity====", String.valueOf(getTaskId()));
        setContentView(R.layout.first_layout);

        Button first = (Button) findViewById(R.id.button_first);
        final EditText editText = (EditText) findViewById(R.id.edit_text);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FirstActivity.this,editText.getText().toString(),Toast.LENGTH_LONG).show();
            }
        });

解析首先通過findById()得到實例

然後再點擊事件中使用getText()方法來獲取輸入的內容

最後調用toString()方法來轉換成字符串

技術分享圖片

4、ImageView

主要用於再界面上展示圖片

可以使程序的頁面變得更加豐富多彩

註意:圖片通常是放在drawable開頭的目錄下

技術分享圖片

android:src:給ImageView指定一張圖片

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

如何實現點擊按鈕更換圖片:

再FirstActivity中

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first_layout);

        Button first = (Button) findViewById(R.id.button_first);
        final ImageView imageView = (ImageView) findViewById(R.id.image_view);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.setImageResource(R.drawable.imageq);
            }
        });
    }

首先通過findByID()獲取到控件

再通過setImageResource()方法進行設置新的圖片

5、ProgressBar

用於在界面上顯示一個進度條

表示程序加載一些數據

 <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

這裏會有一個圓形的進行調再不停的旋轉

技術分享圖片

進度條旋轉表示程序再加載數據

數據加載完成之後

可使用android:visibility進行指定控件的可見性

三個值:visible(默認)、invisible、gone

分別表示:可見的、不可見、不僅不可見而且還不占用屏幕空間

實現點擊按鈕進行狀態轉換

可見--不可見--可見

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("FirstActivity====", String.valueOf(getTaskId()));
        setContentView(R.layout.first_layout);

        Button first = (Button) findViewById(R.id.button_first);
        final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              if (progressBar.getVisibility() == View.GONE){
                  progressBar.setVisibility(View.VISIBLE);
              }else {
                  progressBar.setVisibility(View.GONE);
              }
            }
        });
    }

setVisibility()設置屬性:可以傳入View.VISIBLE、View.INVISIBLE、View.GONE

getVisibility():獲取當前的屬性值進行判斷是否可見

還可以將其只當未水平的進度條

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

使用style屬性將其指定成水平的進度條

並且使用android:max指定其最大值

測試按鈕點擊進行增加進度:

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("FirstActivity====", String.valueOf(getTaskId()));
        setContentView(R.layout.first_layout);

        Button first = (Button) findViewById(R.id.button_first);
        final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int progress = progressBar.getProgress();
                progress = progress +10;
                progressBar.setProgress(progress);
            }
        });
    }

使用getProgress()方法得到當前值

使用setProgress()設置發當前的值

每點擊一次就會加載10

技術分享圖片

6、AlertDialog

可以在當前頁面彈出一個對話框

這個對話框是位於所有元素之上

能夠屏蔽掉其他控件的交互能力

一般用於提示一些重要的內容或者警告信息

@Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("FirstActivity====", String.valueOf(getTaskId()));
        setContentView(R.layout.first_layout);

        final Button first = (Button) findViewById(R.id.button_first);
        final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder dialog = new AlertDialog.Builder(FirstActivity.this);
                dialog.setTitle("註意:");
                dialog.setMessage("註意之後的操作會刪除數據");
                dialog.setCancelable(false);
                dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                dialog.setNegativeButton("cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                dialog.show();
            }
        });

首先是通過AlertDialog.Builder創建一個AlertDialog實例

然後對這個實例設置標題、內容、可否取消

setPositiviButton()方法為對話框設置 確定點擊事件

setNegativeButton()方法為其設置取消按鈕的點擊事件

使用show()方法將對話框進行顯示

技術分享圖片

7、ProgressDialog

可以為界面彈出一個對話框

能夠屏蔽其他控件的交互能力

會在對話框上顯示一個進度條

一般用於表示當前的操作

@Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("FirstActivity====", String.valueOf(getTaskId()));
        setContentView(R.layout.first_layout);

        final Button first = (Button) findViewById(R.id.button_first);

        first.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ProgressDialog progressDialog = new ProgressDialog(FirstActivity.this);
                progressDialog.setTitle("註意:");
                progressDialog.setMessage("註意之後的操作的正確性");
                progressDialog.setCancelable(true);
                progressDialog.show();
            }
        });
    }

可以設置標題、內容、可否取消等屬性,也是通過show()方法進行顯示

再setCancelable()中傳入了false表示不能通過Back鍵來取消

技術分享圖片

2、Android-UI(上)