背景

在前一篇文章 ¹中實現(xiàn)了使用Android Studio開發(fā)一個圖片展示App，熟悉了簡單控件ImageView的使用 ²，在這里繼續(xù)研究Android Studio的使用方法。本文的目的是介紹如何開發(fā)一個圖片切換App，實現(xiàn)點擊按鈕，在窗口中切換不同的圖片。

問題描述

現(xiàn)在想要設(shè)計一個圖片切換工具，頁面布局是

• 圖片顯示窗口，寬度是70%，高度100%，用來展示圖片；
• 按鈕面板，寬度是30%，高度為100%，包括1個按鈕，點擊按鈕在窗口依次展示上傳的圖片。

將圖片添加到Android Studio資源中

將圖片添加到Android Studio資源中的方法很簡單 ³，只需要將圖片拷貝到AndroidStudioProjects文件夾下當(dāng)前工程的drawable文件夾內(nèi)，在Android Studio界面的資源列表中就能看到，可以這樣

cp image1.jpg ~/AndroidStudioProjects/ClickChangeImage/app/src/main/res/drawable
cp image2.jpg ~/AndroidStudioProjects/ClickChangeImage/app/src/main/res/drawable
cp image3.jpg ~/AndroidStudioProjects/ClickChangeImage/app/src/main/res/drawable

然后在資源列表中打開res/drawable目錄，就能看到剛才添加的圖片（如果沒有顯示，右擊drawable文件夾，然后Reload from Disk）。注意目前Android Studio還不支持中文名稱的圖片，圖片的名稱只能是小寫字母a-z，數(shù)字0-9和下劃線（不能包括點.，否則識別不了），如圖所示。

關(guān)閉APP中標(biāo)題的顯示

想要在生成的應(yīng)用APP中關(guān)閉當(dāng)前工程的標(biāo)題 ⁴，可以把res/values/themes/themes.xml中style的parent屬性設(shè)置為parent="Theme.*.NoActionBar"。

APP橫屏顯示

這樣生成的app默認(rèn)在手機上是縱向顯示，如果想要橫屏顯示，則需要編輯manifests/AndroidManifest.xml文件，在<activity>標(biāo)簽中加一個屬性android:screenOrientation="landscape" ⁵：

圖片展示工具布局文件的編寫

activity_main.xml的代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_1"
        app:layout_constraintGuide_percent=".70"
        android:orientation="vertical"/>
    <ImageView
        android:id="@+id/iv_scale"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/image1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/guideline_1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    <Button
        android:id="@+id/button_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按鈕1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

采用了一根輔助線，如圖所示：

圖片展示工具代碼文件的編寫

MainActivity.java的代碼如下：

package com.example.clickchangeimage;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private ImageView iv_scale;
    private int flag = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_scale = findViewById(R.id.iv_scale);
        View.OnClickListener clickT = new ClickTAction();
        findViewById(R.id.button_1).setOnClickListener(clickT);
        flag = 0;
    }
    private class ClickTAction implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.button_1) {
                if (flag == 0) {
                    iv_scale.setImageResource(R.drawable.image1);
                } else if (flag == 1) {
                    iv_scale.setImageResource(R.drawable.image2);
                } else if (flag == 2) {
                    iv_scale.setImageResource(R.drawable.image3);
                }
                iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);
                flag = flag + 1;
                if (flag == 3) {
                    flag = 0;
                }
            }
        }
    }
}

運行結(jié)果

按之前探索的方法 ⁶生成apk文件，然后傳輸?shù)绞謾C上運行，結(jié)果如下：

到了這里，關(guān)于《Android Studio開發(fā)實戰(zhàn)》學(xué)習(xí)（八）- 點擊按鈕切換圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！