安卓开发学习7-2：图像类组件

拖动条组件

基本使用事件监听星级别评分条

基本使用事件监听：获取星星数实例图像视图

基本使用图像切换器

实例1实例2 网格视图

网格视图解析适配器

适配器作用常用适配器实现类基本使用

拖动条组件基本使用

max：最大值
progress：当前值
thumb：设置拖动条的端点的图像

事件监听

package com.example.happy;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Chronometer;
import android.widget.CompoundButton;
import android.widget.DatePicker;
import android.widget.ProgressBar;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.SeekBar;
import android.widget.TimePicker;
import android.widget.Toast;

import java.util.Calendar;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//      全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

        SeekBar seekBar  =findViewById(R.id.seekBar);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

//          拖动条改变事件
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                Toast.makeText(MainActivity.this, "触摸改变："+i, Toast.LENGTH_SHORT).show();
            }

//          拖动条被触摸
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "触摸开始", Toast.LENGTH_SHORT).show();

            }

//          拖动条拖动结束
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "触摸结束", Toast.LENGTH_SHORT).show();

            }
        });

    }

}

星级别评分条基本使用

numStars：设置评分的星星数，默认是5颗
rating：设置默认选中的星星数
isIndicator：如果为true，表示一个指示器，那么只能显示不能修改，用于显示星级

事件监听：获取星星数

        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {

            
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                rattingNum = v;
            }
        });

实例

1、需求：实现如下评价页面

2、xml文件

3、Java文件

package com.example.rating_page;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    boolean isN = true;
    float rattingNum = 5;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button subBtn = findViewById(R.id.submit);
        RatingBar ratingBar = findViewById(R.id.rb);
        EditText editText = findViewById(R.id.edit_content);
        CheckBox cb = findViewById(R.id.cb);

        cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                isN = b;
            }
        });

        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {

            
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                rattingNum = v;
            }
        });
//      按钮点击
        subBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String content = String.valueOf(editText.getText());

                if(isN){
                    content = "匿名评价内容："+ content;
                }else{

                    content = "非匿名评价内容："+ content;
                }

                content = content + "；评分："+rattingNum;

                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();

            }
        });
    }
}

4、资源

图像视图基本使用

1、图片默认等比例缩放，例如下边当宽度是100dp的时候，按原来的比例是如图的大小，但是这里高是500dp，这个高度是蓝色框的高度

要使宽高独立变化可以设置fitXY属性，会图片会自动拉伸到指定长度

2、设置最大宽度和最大高度，设置android:adjustViewBounds为true，并且组件宽高都是wrap_content，才可以设置android:maxWidth和android:maxHeight

3、tint属性添着色，也就是在在这个图像的上添加颜色，如果添加带一定透明度的颜色，那么可以看到下边的图像

图像切换器实例1

图像切换器实际就是用来制作类似查看照片组的功能
1、需求：实现点击图片切换到另一张图片

2、xml文件

3、Java文件

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        ImageSwitcher imageSwitcher = findViewById(R.id.image_switcher);
//      添加进出动画
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_in_left));
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_out_right));
//      通过以下方法设置初始的图片
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(R.mipmap.img01);
                return imageView;
            }
        });
//      设置点击的时候切换到下一张图片
        imageSwitcher.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageSwitcher.setImageResource(R.mipmap.img02);
            }
        });
    }


}

实例2

1、需求：实现相册图片滑动查看图片的功能

2、xml文件

3、Java文件

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity {

    private float touchStartX;
    private  float touchEndX;
    private int index = 0 ;
    private Integer[] arrayImages = new Integer[]{
            R.mipmap.img01, R.mipmap.img02, R.mipmap.img03, R.mipmap.img04
    };

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

//      全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        ImageSwitcher imageSwitcher = findViewById(R.id.image_switcher);

//      通过以下方法设置初始的图片
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(R.mipmap.img01);
                return imageView;
            }
        });

//      触摸监听
        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
//              获取开始触发的以及手离开屏幕的x坐标
                if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
                    touchStartX = motionEvent.getX();
                    return true;
                }else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
//                  获取x坐标
                    touchEndX = motionEvent.getX();
                    if(touchStartX - touchEndX > 100){
                        //            向左滑动，获取上一张图片
                        index = (index+1) == arrayImages.length? 0:index+1 ;
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_in_left));
                        imageSwitcher.setImageResource(arrayImages[index]);

                        Toast.makeText(MainActivity.this, "向左滑动", Toast.LENGTH_SHORT).show();


                    }else if(touchEndX - touchStartX > 100){
                        //            向右滑动，获取下一张图片
                        index = (index-1) == -1? arrayImages.length-1:index-1 ;
                       imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_out_right));
                        imageSwitcher.setImageResource(arrayImages[index]);
                        Toast.makeText(MainActivity.this, "向右滑动", Toast.LENGTH_SHORT).show();

                    }
                    return true;
                }
                return false;
            }
        });


    }
}

网格视图网格视图解析

适配器适配器作用

在数据源与图像视图之间存在一个适配器，用来兼顾数据的获取和视图的显示

常用适配器实现类

基本使用

1、需求：实现一个九宫格图片展示

2、在activity_main.xml文件中

numCounts：可以是整型数，表示列数，也可以是auto_fit进行自适应

3、在layout目录下创建cell.xml文件

4、Java文件

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import android.widget.ViewSwitcher;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    
//  图片列表
    private Integer[] arrayImages = new Integer[]{
            R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01
    };

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

//      全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        GridView gridView = findViewById(R.id.gridview);

        List> imagesList = new ArrayList<>();
//      将图片都加在到List中并且Map的键都是image
        for(int i = 0 ; i < arrayImages.length ; i++){

            Map map = new HashMap<>();
            map.put("image", arrayImages[i]);
            imagesList.add(map);

        }
        
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, imagesList,R.layout.cell, new String[]{"image"},new int[]{R.id.image});
//      装载适配器
        gridView.setAdapter(simpleAdapter);


    }
}

上述是使用SimpleAdapter实现，也可以通过baseAdapter实现，如下：

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.baseAdapter;
import android.widget.GridLayout;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import android.widget.ViewSwitcher;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

//  图片列表
    private Integer[] arrayImages = new Integer[]{
            R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01,R.drawable.img01
    };

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

//      全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        GridView gridView = findViewById(R.id.gridview);
        gridView.setAdapter(new myAdapter(MainActivity.this));


    }

    public class myAdapter extends baseAdapter{

        public Context myContext;

        public myAdapter(Context c){

            myContext = c ;

        }

        @Override
        public int getCount() {
            return arrayImages.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ImageView imageView = null;

            if(view ==null){
                imageView = new ImageView(myContext);
                imageView.setLayoutParams(new GridView.LayoutParams(500,380));
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            }else{
                imageView = (ImageView) view;
            }

            imageView.setImageResource(arrayImages[i]);

            return imageView;
        }
    }
}

安卓开发学习7-2：图像类组件

Java相关栏目本月热门文章