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

    • 拖动条组件
      • 基本使用
      • 事件监听
    • 星级别评分条
      • 基本使用
      • 事件监听:获取星星数
      • 实例
    • 图像视图
      • 基本使用
    • 图像切换器
      • 实例1
      • 实例2
    • 网格视图
      • 网格视图解析
      • 适配器
        • 适配器作用
        • 常用适配器实现类
      • 基本使用

拖动条组件

基本使用

 <SeekBar
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:max="10"
     android:progress="5"
     android:thumb="@mipmap/img_btn">SeekBar>

max:最大值
progress:当前值
thumb:设置拖动条的端点的图像
安卓开发学习7-2:图像类组件_第1张图片

事件监听

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();

            }
        });

    }

}

星级别评分条

基本使用

<RatingBar
     android:id="@+id/rb"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:numStars="5"
     android:rating="2"
     android:isIndicator="false"
     >RatingBar>

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

事件监听:获取星星数


        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {

            /**
             * 
             * @param ratingBar  点击的按钮
             * @param v  评分数
             * @param b  评分是否来自人为点击,ture表示认为点击
             */
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                rattingNum = v;
            }
        });

实例

1、需求:实现如下评价页面
安卓开发学习7-2:图像类组件_第2张图片
2、xml文件


<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"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#EFEDED"
    android:paddingLeft="14dp"
    android:paddingRight="14dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="14dp"
        android:layout_marginBottom="14dp"
        android:gravity="center_vertical"
        >
        <ImageView
            android:id="@+id/back"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/left"
            android:background="#0000"
            >ImageView>

        <TextView
            android:layout_toRightOf="@id/back"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发表评价"
            android:textSize="17sp"
            >TextView>

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/fun1"
            android:layout_alignParentEnd="true"
            >ImageView>

    RelativeLayout>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/white"
        android:columnCount="2"
        >

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/cloth"
            >ImageView>

        <EditText
            android:id="@+id/edit_content"
            android:layout_marginLeft="10dp"
            android:width="0dp"
            android:layout_columnWeight="1"
            android:hint="请输入50字以内的评价"
            android:background="@color/white"
            android:maxLength="50"
            >EditText>

    GridLayout>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/white"
        android:columnCount="1"
        android:paddingLeft="15dp"
        >

        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"

            android:src="@mipmap/camera"
            android:layout_gravity="center_vertical"
            >ImageView>


    GridLayout>



    <LinearLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:background="@color/white"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="店铺评分"
            android:textSize="20sp"
            android:layout_marginBottom="5dp"
            >TextView>

        <RatingBar
            android:id="@+id/rb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="5"
            android:progressTint="#FFEB3B"
            >RatingBar>
    LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingBottom="10dp"
        >

        <CheckBox
            android:id="@+id/cb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="匿名评价"
            android:checked="true"
            android:layout_centerVertical="true"
            >CheckBox>

        <Button
            android:id="@+id/submit"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发表"
            android:textColor="@color/white"
            android:background="@color/teal_700"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            >Button>


    RelativeLayout>


LinearLayout>

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() {

            /**
             *
             * @param ratingBar  点击的按钮
             * @param v  评分数
             * @param b  评分是否来自人为点击,ture表示认为点击
             */
            @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、资源
在这里插入图片描述
在这里插入图片描述
安卓开发学习7-2:图像类组件_第3张图片

在这里插入图片描述

图像视图

基本使用

<ImageView
     android:layout_width="100dp"
     android:layout_height="500dp"
     android:src="@mipmap/bg"
     >ImageView>

1、图片默认等比例缩放,例如下边当宽度是100dp的时候,按原来的比例是如图的大小,但是这里高是500dp,这个高度是蓝色框的高度
安卓开发学习7-2:图像类组件_第4张图片
要使宽高独立变化可以设置fitXY属性,会图片会自动拉伸到指定长度

<ImageView
    android:layout_width="100dp"
    android:layout_height="500dp"
    android:src="@mipmap/bg"
    android:scaleType="fitXY"
    >ImageView>

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

 <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@mipmap/bg"
     android:adjustViewBounds="true"
     android:maxWidth="100dp"
     android:maxHeight="100dp"
     >ImageView>

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

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@mipmap/bg"
     android:adjustViewBounds="true"
     android:maxWidth="100dp"
     android:maxHeight="100dp"
     android:tint="#80C4CDB1"
     >ImageView>

安卓开发学习7-2:图像类组件_第5张图片

图像切换器

实例1

图像切换器实际就是用来制作类似查看照片组的功能
1、需求:实现点击图片切换到另一张图片
安卓开发学习7-2:图像类组件_第6张图片

2、xml文件


<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"
    tools:context=".MainActivity">

    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image_switcher"
        >ImageSwitcher>

LinearLayout>

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、需求:实现相册图片滑动查看图片的功能
安卓开发学习7-2:图像类组件_第7张图片

2、xml文件


<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"
    tools:context=".MainActivity">

    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image_switcher"
        >ImageSwitcher>

LinearLayout>

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;
            }
        });


    }
}

网格视图

网格视图解析

安卓开发学习7-2:图像类组件_第8张图片

适配器

适配器作用

在数据源与图像视图之间存在一个适配器,用来兼顾数据的获取和视图的显示
安卓开发学习7-2:图像类组件_第9张图片

常用适配器实现类

安卓开发学习7-2:图像类组件_第10张图片

基本使用

1、需求:实现一个九宫格图片展示
安卓开发学习7-2:图像类组件_第11张图片
2、在activity_main.xml文件中


<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"
    tools:context=".MainActivity"
    >
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:horizontalSpacing="0dp"
        >GridView>
LinearLayout>

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

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"
        android:scaleType="fitXY"
        >

    ImageView>

LinearLayout>

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<Map<String, Object>> imagesList = new ArrayList<>();
//      将图片都加在到List中并且Map的键都是image
        for(int i = 0 ; i < arrayImages.length ; i++){

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

        }
        /**
         * 第一个参数是上下文对象
         * 第二个参数是数据列表
         * 第三个参数是制定装载数据的布局文件
         * 第三个参数制定使用数据列表中的字段的键名
         * 第四个参数指定布局文件中的组件,通过id进行指定
         */
        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;
        }
    }
}



你可能感兴趣的:(#,安卓开发基础,android,java,apache)