帧式布局；切换颜色

客官°小女子只卖身不卖艺 2024-04-01 18:16 81阅读 0赞

#### 文章目录 ####

*  一、案例展示
 *   *  1、创建安卓应用
     *  2、字符串资源文件
     *  3、主布局资源文件
     *  5、主界面
     *   *  方法（一）
         *  方法（二）
         *  方法（三）
     *  6、最终效果

--------------------

## 一、案例展示 ##

### 1、创建安卓应用 ###

*  基于`Empty Activity`创建 - `SwitchColor`  
    ![在这里插入图片描述][46820ee3c4c3459f828f06e97b6bb599.png]  
    ![在这里插入图片描述][73846e85ddc14a5d86b37cf9ea105a06.png]  
    ![在这里插入图片描述][5445cec03a144bdaa9ecce481aef4a41.png]

### 2、字符串资源文件 ###

*  `strings.xml`  
    ![在这里插入图片描述][aa5b7dd0af534782a0ff3e030fae3f0e.png]
 *  代码

### 3、主布局资源文件 ###

*  activity\_main.xml  
    ![在这里插入图片描述][69243a8fc18e44faba17388edc267119.png]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:gravity="center"
        android:orientation="vertical">
    
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp">
    
            <TextView
                android:id="@+id/tv_bottom"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_gravity="center"
                android:background="#ff0000"
                android:text="@string/bottom"
                android:textSize="30sp"
                android:textColor="#ffff00"/>
    
            <TextView
                android:id="@+id/tv_middle"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="#00ff00"
                android:text="@string/middle"
                android:textSize="30sp"
                android:textColor="#ffff00"/>
    
            <TextView
                android:id="@+id/tv_top"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:background="#0000ff"
                android:text="@string/top"
                android:textSize="30sp"
                android:textColor="#ffff00"/>
    
        </FrameLayout>
        <Button
            android:id="@+id/btn_switch_color"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:onClick="doSwitchColor"
            android:text="@string/switch_color"
            android:textSize="20sp"/>
    
    
    </LinearLayout>

*  打开`Design`视图，产看预览效果  
    ![在这里插入图片描述][e698f3160c474e1582f9e844500df82d.png]

### 5、主界面 ###

![在这里插入图片描述][48911a61229b4edf9d0fec723b8ffe76.png]

*  定义以下变量  
    ![在这里插入图片描述][4940aa6d240d4ed29fb41f4895059ade.png]
 *  通过资源标识符（id）来获取控件的实例  
    ![在这里插入图片描述][50cd40e2cbd14c72b254f37c5a590b10.png]
 *  绑定事件（在`Button` 控件中 通过`onClick`属性绑定事件`doSwitchColor`）  
    ![在这里插入图片描述][bac66636dfa741658b47a0c2de53a290.png]

#### 方法（一） ####

![在这里插入图片描述][0c04f3e98ba34f2b87e31a22f1668d24.png]

*  代码

package net.hxl.switch_color;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.TextView;
    
    import java.security.PublicKey;
    
    public class MainActivity extends AppCompatActivity {
        
        //定义变量
        private TextView tvTop;
        private TextView tvMiddle;
        private TextView tvBottom;
        private int clickCount;//按钮单击的次数
        private int[] colors;//颜色数组
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            // 通过资源标识符获取控件实例
            tvTop = findViewById(R.id.tv_top);
            tvMiddle = findViewById(R.id.tv_middle);
            tvBottom = findViewById(R.id.tv_bottom);     
        }
    
        // 切换颜色单击事件处理方法
        public void doSwitchColor(View view) {
        
            //累加按钮单击次数
            clickCount++;
            // 只有三种颜色切换，因此单机次数对3求余
            clickCount = clickCount % 3;
            // 根据单击次数确定颜色方案[底层，中层，顶层]
            switch (clickCount) {
        
                case 0://颜色方案：【红，绿，蓝】
                    colors = new int[]{
        Color.RED, Color.GREEN, Color.BLUE};
                    break;
                case 1://颜色方案：【绿，蓝,红】
                    colors = new int[]{
        Color.GREEN, Color.BLUE, Color.RED};
                    break;
                case 2://颜色方案：【蓝，红，绿】
                    colors = new int[]{
        Color.BLUE, Color.RED, Color.GREEN,};
                    break;
    
            }
            //根据颜方案来设置三层标签背景颜色
            tvBottom.setBackgroundColor(colors[0]);
            tvMiddle.setBackgroundColor(colors[1]);
            tvTop.setBackgroundColor(colors[2]);
        }
    }

*  查看运行效果  
    ![在这里插入图片描述][189c21edf24840b288a397187fc3ae83.png]

#### 方法（二） ####

![在这里插入图片描述][09261241dc004a6287011e00fd78c059.png]

*  代码

package net.hxl.switch_color;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity {
        
        //定义变量
        private TextView tvTop;
        private TextView tvMiddle;
        private TextView tvBottom;
        private int[] colors;//颜色数组
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            // 通过资源标识符获取控件实例
            tvTop = findViewById(R.id.tv_top);
            tvMiddle = findViewById(R.id.tv_middle);
            tvBottom = findViewById(R.id.tv_bottom);
            // 初始化颜色数组
            colors = new int[]{
        Color.RED, Color.GREEN, Color.BLUE};
    
        }
        // 切换颜色点击事件处理方法
        public void doSwitchColor(View view) {
        
            // 采用左移算法
            int temp = colors[0];
            colors[0] = colors[1];
            colors[1] = colors[2];
            colors[2] = temp;
    
            //根据颜方案来设置三层标签背景颜色
            tvBottom.setBackgroundColor(colors[0]);
            tvMiddle.setBackgroundColor(colors[1]);
            tvTop.setBackgroundColor(colors[2]);
        }
    }

#### 方法（三） ####

![在这里插入图片描述][c9f09a4d016f4838adb0c31ea98eda6a.png]

*  代码

package net.hxl.switch_color;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity {
        
        //定义变量
        private TextView tvTop;
        private TextView tvMiddle;
        private TextView tvBottom;
        private int[] colors;//颜色数组
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
            // 通过资源标识符获取控件实例
            tvTop = findViewById(R.id.tv_top);
            tvMiddle = findViewById(R.id.tv_middle);
            tvBottom = findViewById(R.id.tv_bottom);
            // 初始化颜色数组
            colors = new int[]{
        Color.RED, Color.GREEN, Color.BLUE};
    
        }
        // 切换颜色单击时间处理方法
        public void doSwitchColor(View view) {
        
            // 通过颜色数组切换颜色[采用左移算法]
            int temp = colors[0];
            {
        
                for (int i = 0; i < colors.length - 1; i++) {
        
                    colors[i] = colors[i + 1];
                }
                colors[colors.length - 1] = temp;
                //根据颜方案来设置三层标签背景颜色
                tvBottom.setBackgroundColor(colors[0]);
                tvMiddle.setBackgroundColor(colors[1]);
                tvTop.setBackgroundColor(colors[2]);
    
            }
        }
    }

### 6、最终效果 ###

![在这里插入图片描述][6fa6eaf065af41e0969618c549e16840.gif]

[46820ee3c4c3459f828f06e97b6bb599.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/70792edcae0d4198b5c038cba65232ab.png
[73846e85ddc14a5d86b37cf9ea105a06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c7722e8b6b9246e2ac076184001ced83.png
[5445cec03a144bdaa9ecce481aef4a41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d58a4384a27e45fe8e95e0dcde914fe3.png
[aa5b7dd0af534782a0ff3e030fae3f0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00fb419725e34d0cac356eddd49a45bb.png
[69243a8fc18e44faba17388edc267119.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/33813920b39745c3ad5a25125cfd200c.png
[e698f3160c474e1582f9e844500df82d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8a32ea713fd54f1d81584944619893f7.png
[48911a61229b4edf9d0fec723b8ffe76.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fdb39bf42def4f85a72ca479605ec69d.png
[4940aa6d240d4ed29fb41f4895059ade.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/54c50f7950964c53aa759097731e1605.png
[50cd40e2cbd14c72b254f37c5a590b10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5d6c325c30cc48f9aaf1438dd6ae0d4c.png
[bac66636dfa741658b47a0c2de53a290.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c00ce18f039e42179ddd639b6c779ab7.png
[0c04f3e98ba34f2b87e31a22f1668d24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/093d1f6f40ad47678d44ce58e3d27314.png
[189c21edf24840b288a397187fc3ae83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/94da76c33d064172bd5979a5d26dbcbd.png
[09261241dc004a6287011e00fd78c059.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/838b392baacf4e3a9a0bc91f5cf2b08b.png
[c9f09a4d016f4838adb0c31ea98eda6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/79268806e8e341858437d30ee2209408.png
[6fa6eaf065af41e0969618c549e16840.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5bcd8ebbcb52430b8db480bc80c84845.gif