Android：＜2＞imageview、RadioButton和CheckBox的入门

我们在平常的设计中，常常可以看到一张图片和几个选项框的登录页面，那么这个要怎么制作呢，今天我们就来讲解一下如何创建一个图片浏览器来进行一个基本控件的入门（imageview）：

1、我们先看看效果，大家可以先想一想怎么做：

imageDemo

因为我们在制作一个页面的时候，最好的学习办法就是先想到思路；

2、页面的布置：

我们可以使用约束布局，定义两个按钮和一个imageview组件，按照视频中的页面进行布局，代码如下，可以参考，当然如果你们不想这样设计，也可以自己想一个，不过新手的话还是做的一样更好：

<?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=".MainActivity2">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_pre"
        android:text="上一张"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_next"
        android:layout_marginTop="20dp"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_next"
        android:text="下一张"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn_pre"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        />

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/iv_photo"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_next"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20dp"
        android:src="@drawable/img1"/>



</androidx.constraintlayout.widget.ConstraintLayout>

两个按钮的实现思路：我们定义两个按钮利用约束布局形成包链；imageview 放在下面即可；

3、imageview常见属性：

最常用的width和height就不多赘述了；

1）、android:src="图片路径"

2）、android:scaleType="图片的缩放方式"：这个属性有很多值，一般我们会用fitXY，这个属性会将图片进行缩放，直到充满整个imageview，它是会让图片变形的；还有就是center，这个属性会将图片放在imageview中间，而且不会进行缩放，图片大了就截取，小了就留白；

4、我们实现图片切换的逻辑：

我们先在按钮上实现监听，我们利用主类的接口监听方法，然后在进行函数对应的处理；我们这里是十个图片的切换效果，所以我们要先下载十个图片，如果不想下载的话：

公众号搜索：代码栈；回复：imageview;

可以拿到本期图片；

回归正题，我们在点击上一个的时候，图片上移，于是我们可以通过定义一个变量，点击按钮之后进行--，当变量小于1的时候赋值为10；同理，下一个按钮就是++，在大于10的时候让变量为1；

    //3 设置图片编号便于切换
    int index=1;
 //5 创建按钮点击处理函数
    //5.1 向前切换
    private void prephoto(){
        if(index>1){
            index--;
        }else{
            index=10;
        }
    }
    //5.2 向后切换
    private void nextphoto(){
        if(index<10){
            index++;
        }else{
            index=1;
        }
    }

5、给imageview切换图片：

//6 创建图片滚动函数
    private void movephoto(){
        //创建一个resources对象
        Resources resources=getResources();
        //获取资源
        int id = resources.getIdentifier(getPackageName()+":drawable/img"+index,null,null);
        //设置图片资源
        iv_photo.setImageResource(id);
    }

这里我们用到了Resources对象，通过getIdentifier("包名：文件夹/图片名"+变量序号，null,null);；来获取图片的ID；然后通过imageview对象.setImageResource(id);方法进行变换；

这里用到的一个技巧就是我们的图片命名规则，我们从img1--img10，这样就可以实现切换图片，我们同样将所有的图片放在我们的drawable文件夹下面；

 

 6、全部逻辑代码：

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;

import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity2 extends AppCompatActivity implements View.OnClickListener {

    //1 定义组件变量
    Button btn_pre,btn_next;
    ImageView iv_photo;
    //3 设置图片编号便于切换
    int index=1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //8 调用函数
        init_parmartes();
        //7 设置监听器
        btn_pre.setOnClickListener(this);
        btn_next.setOnClickListener(this);
    }

    //2 初始化变量
    private void init_parmartes(){
        btn_pre=findViewById(R.id.btn_pre);
        btn_next=findViewById(R.id.btn_next);
        iv_photo=findViewById(R.id.iv_photo);

    }

    //4 实现按钮的监听效果
    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.btn_pre:
                prephoto();
                break;
            case R.id.btn_next:
                nextphoto();
                break;
        }
        movephoto();
    }
    //5 创建按钮点击处理函数
    //5.1 向前切换
    private void prephoto(){
        if(index>1){
            index--;
        }else{
            index=10;
        }
    }
    //5.2 向后切换
    private void nextphoto(){
        if(index<10){
            index++;
        }else{
            index=1;
        }
    }

    //6 创建图片滚动函数
    private void movephoto(){
        //创建一个resources对象
        Resources resources=getResources();
        //获取资源
        int id = resources.getIdentifier(getPackageName()+":drawable/img"+index,null,null);
        //设置图片资源
        iv_photo.setImageResource(id);
    }
}

我这里的变量初始化全用一个函数代替，希望大家也这样，对了，我们写实现监听接口的时候，时常会忘记写监听器，所以大家要记得，实现监听接口后，一定要设置监听器；

写完了imageview我们再来学习一下单选框和复选框：

 我们要是先这些布局和通过勾选单选框时通过土司来将我们选的内容显示，复选框通过点击按钮土司可以显示我们勾选的内容：

1、布局部分：

我们使用单选框的时候，要注意RadioButton和RadioGroup配合使用，因为RadioGroup起到了一个对RadioButton分组的作用，在后面我们监听的时候也就只需要监听RadioGroup就能处理所有RadioButton了；

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity3">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="毕业后，你想去哪里？"
        android:textSize="30sp"
        android:textColor="#ff0000"/>
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:id="@+id/rg_group">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="上海"
            android:textSize="25sp"
            android:id="@+id/rb_shanghai"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="杭州"
            android:textSize="25sp"
            android:id="@+id/rb_hangzhou"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="广州"
            android:textSize="25sp"
            android:id="@+id/rb_guangzhou"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="深圳"
            android:textSize="25sp"
            android:id="@+id/rb_shenzhen"
            android:checked="true"
            />
    </RadioGroup>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的爱好是："
        android:textSize="30sp"
        android:layout_marginTop="30dp"
        android:textColor="#ff0000"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:layout_marginTop="30dp">
        <CheckBox
            android:layout_width="100sp"
            android:layout_height="wrap_content"
            android:text="打篮球"
            android:id="@+id/cb_basketball"
            />
        <CheckBox
            android:layout_width="100sp"
            android:layout_height="wrap_content"
            android:text="玩游戏"
            android:id="@+id/cb_game"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">
        <CheckBox
            android:layout_width="100sp"
            android:layout_height="wrap_content"
            android:text="听音乐"
            android:id="@+id/cb_music"
            />
        <CheckBox
            android:layout_width="100sp"
            android:layout_height="wrap_content"
            android:text="美食"
            android:id="@+id/cb_food"
            />
    </LinearLayout>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="提交"
        android:id="@+id/btn_save"
        android:onClick="myhobby"
        android:layout_marginTop="20dp"/>
</LinearLayout>

 我们使用的是线性布局，以为在这种页面会简单很多，然后复选框CheckBox通过线性布局的嵌套实现，代码在上面，大家如果对布局这一块不懂的可以上网去查一下，挺简单；

2、逻辑实现部分：

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity3 extends AppCompatActivity {

    //1 定义组件变量
    RadioGroup rg_group;
    RadioButton rb_shanghai, rb_shenzhen, rb_guangzhou, rb_hangzhou;
    CheckBox cb_basketball, cb_food, cb_music, cb_game;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        //3 调用初始化函数
        init_parmaters();
        //4 对rg_group进行监听(setOnCheckedChangeListener()方法实现)
        rg_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            //5 编写监听处理函数
            String src = "";

            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                if (rb_shanghai.isChecked()) {
                        //6 src是空的则就没有，
                        src = "上海";
                }
                if (rb_shenzhen.isChecked()) {
                    src = "深圳";
                }
                if (rb_guangzhou.isChecked()) {
                        src = "广州";
                }
                if (rb_hangzhou.isChecked()) {
                        src = "杭州";
                }

                Toast.makeText(MainActivity3.this, "你想去：" + src, Toast.LENGTH_SHORT).show();
            }
        });
    }

    public void myhobby(View view) {
        String str = "";
        if (cb_basketball.isChecked()) {
            str += " 打篮球";
        }
        if (cb_food.isChecked()) {
            str += "  美食";
        }
        if (cb_music.isChecked()) {
            str += "  听音乐";
        }
        if (cb_game.isChecked()) {
            str += "  打游戏";
        }
        Toast.makeText(this, "你的爱好是："+str, Toast.LENGTH_SHORT).show();
    }

    //2 初始化组件变量
    private void init_parmaters() {
        rg_group = findViewById(R.id.rg_group);
        rb_shanghai = findViewById(R.id.rb_shanghai);
        rb_shenzhen = findViewById(R.id.rb_shenzhen);
        rb_guangzhou = findViewById(R.id.rb_guangzhou);
        rb_hangzhou = findViewById(R.id.rb_hangzhou);
        cb_basketball = findViewById(R.id.cb_basketball);
        cb_food = findViewById(R.id.cb_food);
        cb_music = findViewById(R.id.cb_music);
        cb_game = findViewById(R.id.cb_game);
    }
}

同上，我们利用一个函数代替初始化变量，不过不要忘了调用，不同的是我们用的监听是匿名内部类，如果不懂的话可以翻到第一期看；

大家要注意这个监听方法，有点长：setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {});

我们的复选框要选用这个，如果不记得就复制；

还有一个要注意的，我们给变量取名字的时候最后与我们的组件一致，不然的话很容易弄错；

实现思路：我们的单选框监听通过对CheckGroup进行匿名内部类监听，对复选框可以创建一个按钮，然后对按钮进行监听，在监听方法里面处理Toast要显示的字符串数据；

这里我们用的是Java代码写的，对于入门更友好；

好了，复选框和单选框就这么简单；

关注我，更多分享！