ウィジェットシンプルコンポーネント画像ビュー(ImageView)

ImageView

ImageViewはViewコンポーネントを継承し、主に画像リソース(画像など)を表示するために使用されます。ImageViewは表示サイズを定義することもできます。さらに、ImageViewは、ImageButton、ZoomButton、およびその他のコンポーネントも派生させます。ImageViewでサポートされているXML属性とメソッドを次の表に示します。

ImageViewのXML属性とメソッド

XML属性 対応する方法 関数の説明
android:ViewBoundsを調整する setAdjust ViewBounds(boolean) アスペクト比を維持するかどうか。maxWidthおよびMaxHeightと一緒に使用する必要があり、単独で使用しても効果はありません
android:cropToPadding setCropToPadding(boolean) 指定された領域をインターセプトし、代わりに空白を使用するかどうか。単独で設定しても効果はありません。scrollYと併用する必要があります。
アンドロイド:maxHeight setMaxHeight(int) ビューの最大の高さを設定します。単独で使用することは無効です。setAdjustViewBounds()メソッドと一緒に使用する必要があります。画像の固定サイズを設定し、画像のアスペクト比を維持する場合は、次の設定を行う必要があります。setAdjustViewBoundsをtrueに設定し、max WidthプロパティとMaxHeightプロパティを設定し、layout_widthとlayout_heightの両方をに設定します。 wrap_content
android:max Width setMax Width(int) ビューの最大幅を設定します。使用法はandroidと同じです:maxHeight
android:src setImageResource(int) 画像ビューに表示されるDrawableオブジェクトを設定します
アンドロイド:scaleType setScaleType(Image View.ScaleType) 表示された画像を画像ビューのサイズに合わせてズームまたは移動する方法を設定します

ImageViewのandroid:scaleType属性は、次の属性値を指定できます

  • マトリックス:マトリックスを使用して描画します。
  • fitXY:ビューの幅と高さを埋めるために、画像を(縮尺どおりではなく)引き伸ばします。
  • fitStart:画像を比例的に引き伸ばします。引き伸ばされた画像の高さはビューの高さであり、ビューの左側に表示されます。
  • fitCenter:画像を比例的に引き伸ばします。引き伸ばされた画像の高さはビューの高さであり、ビューの中央に表示されます。
  • fitEnd:画像を比例的に引き伸ばします。引き伸ばされた画像の高さはビューの高さであり、ビューの右側に表示されます。
  • 中央:元のサイズで画像を表示します。画像の幅と高さがビューの幅と高さよりも大きい場合、スクリーンショットの中央部分が表示されます。
  • centerCrop:ビューの片側の幅と高さに等しくなるまで、元の画像を比例して拡大します。
  • centerInside:元の画像の幅と高さがビューの幅と高さと等しい場合、元の画像のサイズに従って中央に表示されます。それ以外の場合、元の画像はビューの幅と高さにズームされます。中央に表示されます。

さらに、ImageViewによって表示される画像を制御するために、コンポーネントは次のメソッドを提供します

  • sctlmageBitmap(Bitmap):ビットマップビットマップを使用して、ImageViewによって表示される画像を設定します。
  • setImageDrawable(Drawable):Drawableオブジェクトを使用して、ImageViewによって表示される画像を設定します。
  • setImageResource(int):画像リソースIDを使用して、ImageViewによって表示される画像を設定します。
  • setImagURI(Uri):画像のURIを使用して、ImageViewによって表示される画像を設定します。

コードデモ

以下は、ImageViewの使用法を示す簡単な例です。「次のページ/前のページ」ボタンをクリックすると、画像を切り替えることができます

ここに画像の説明を挿入

ここに画像の説明を挿入

対応するレイアウトファイルコードは次のとおりです

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical"
    >
    <!-- 图片及文字 1 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:src="@drawable/one" />
        <TextView
            android:id="@+id/photoTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="佐佐木希" />
    </LinearLayout>
    <!-- 分页 2 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/backImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="140dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/back"/>
        <ImageButton
            android:id="@+id/forwardImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/forward" />
    </LinearLayout>
</LinearLayout>

コードの説明は次のとおりです。画像を表示するためにラベル1にImageViewコンポーネントが定義されています。android; scaleType = "fitCenter"属性を設定すると、引き伸ばされた画像の高さがビューの高さとして使用されます。ビューの中央に表示されます。画像の名前を表示するTextViewコンポーネントを定義します。ラベル2は、「前のページ」と「次のページ」の画像を表示するために使用される2つのImageButtonコンポーネントを定義します。

以下は、アクティビティでの画像ページングの効果を示しています。ユーザーが[前へ/次へ]ボタンをクリックすると、対応する画像が画面に表示されます。

ここに画像の説明を挿入

ここに画像の説明を挿入
対応するアクティビティコードの実装は次のとおりです

package com.qst.demo2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class ImageViewDemoActivity extends AppCompatActivity {
    
    
    //定义变量 1
    //图片对应的ImageView
    ImageView flagImageView;
    TextView flagTxt;
    ImageButton backImgeBtn;   //上一页
    ImageButton forwardImageBtn; //下一页
    //图片数组   2
    int [] flag = {
    
    R.drawable.one, R.drawable.two, R.drawable.three};
    String[] flagNames = {
    
    "佐佐木希", "胡歌", "霉霉"};
    //当前页 默认第一页
    int currentPage = 0;
    @Override //重写方法
    public void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState); //调用父类onCreate创建Activity
        setContentView(R.layout.imageview_demo); //设置布局
        //初始化组件 3
        flagImageView = (ImageView) findViewById(R.id.photoImageView);
        flagTxt = (TextView) findViewById(R.id.photoTxt);
        //上一页,下一页
        backImgeBtn = (ImageButton) findViewById(R.id.backImageBtn);
        forwardImageBtn = (ImageButton) findViewById(R.id.forwardImageBtn);
        //注册监听器
        backImgeBtn.setOnClickListener(onClickListener);
        forwardImageBtn.setOnClickListener(onClickListener);
    }
    //定义单击事件监听器 4
    private View.OnClickListener onClickListener = new View.OnClickListener() {
    
     //创建对象
        @Override   //重写接口方法
        public void onClick(View v) {
    
    
            switch (v.getId()) {
    
    
                case R.id.backImageBtn:
                    if (currentPage == 0) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "第一页,前面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    //上翻一页
                    currentPage--;
                    //设置图片
                    flagImageView.setImageResource(flag[currentPage]);
                    //设置图片名字
                    flagTxt.setText(flagNames[currentPage]);
                    break;
                case R.id.forwardImageBtn:
                    if (currentPage == (flag.length-1)) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "最后一页,后面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    currentPage++;   //下翻一页
                    flagImageView.setImageResource(flag[currentPage]);  //设置图片
                    flagTxt.setText(flagNames[currentPage]);  //设置图片名字
                    break;
                default:
                    break;
            }
        }
    };
}

コードの説明は次のとおりです。ラベル1はそれぞれImageViewタイプとImageButtonタイプの属性変数を宣言します。ラベル2は2つの配列を定義して初期化し、それぞれ画像リソースと画像名を表します。ラベル3は宣言されたatを初期化するために使用されます。ラベル1属性変数、およびbackImageBtnオブジェクトとforwardImageBtnオブジェクトのリスナーを設定してそれぞれのクリックイベントをリッスンします。ラベル4は、ボタンがクリックに応じてクリックされたときにボタンクリックイベントを処理するOnClickListenerタイプのリスナーを定義します。写真と写真の名前。

AndroidMainfest.xmlマニフェストファイルでアクティビティを宣言します
ここに画像の説明を挿入ここに画像の説明を挿入

アクティビティコードを実行した後の効果は次のとおりです
ここに画像の説明を挿入
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_42768634/article/details/115286176