1. 程式人生 > >安卓實現圖片放大鏡效果

安卓實現圖片放大鏡效果

一、準備圖片
在drawable資料夾下放置需要進行輪詢的圖片
這裡寫圖片描述
二、編寫一個簡單的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center">
<Button android:id="@+id/nextimg" android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:text="下一張"/>
</LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity
="center_horizontal">
<!--定義顯示圖片整體的ImageView--> <ImageView android:id="@+id/big_image" android:layout_width="wrap_content" android:layout_height="240px" android:adjustViewBounds="true" android:scaleType="centerInside"/> <!--顯示區域性細節的ImageView--> <ImageView android:id="@+id/part_image" android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="10dp"/> </LinearLayout> </LinearLayout>

三、進行業務邏輯程式碼的編寫

package com.wuzhixiaobai.androidtest.test01;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import com.htss.androidtest.R;

import org.jetbrains.annotations.Nullable;

/**
 * Created by Administrator on 2018/num01/12.
 */

public class Test12Activity extends Activity{
    //用於儲存圖片ID值的陣列
    private int[] images = new int[]{
        R.drawable.num01,
        R.drawable.num02,
        R.drawable.num03,
        R.drawable.num04,
        R.drawable.num05,
        R.drawable.num06,
    };
    private int currentImg = -1;
    private Button nextImg;
    private ImageView image1;
    private ImageView image2;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test12);
        initView();
        initData();
        addListener();
    }

    private void initView(){
        nextImg = findViewById(R.id.nextimg);
        image1 = findViewById(R.id.big_image);
        image2 = findViewById(R.id.part_image);
        image1.setImageResource(R.drawable.num01);
    }

    private void initData(){
        image1.setImageResource(images[++currentImg % images.length]);
        BitmapDrawable bitmapDrawable = (BitmapDrawable) image1.getDrawable();
        Bitmap bitmap = bitmapDrawable.getBitmap();
        image2.setImageBitmap(Bitmap.createBitmap(bitmap, 0, 0,
                120, 120));
    }

    private void addListener(){
        nextImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //當點選下一張的按鈕時,實際上相當於進行兩個IMageView的初始化,只是使用的圖片不同了
                initData();
            }
        });

        image1.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                BitmapDrawable bitmapDrawable = (BitmapDrawable) image1.getDrawable();
                Bitmap bitmap = bitmapDrawable.getBitmap();
                double scale = bitmap.getWidth() / 240.0;
                int x = (int) (motionEvent.getX() * scale);
                int y = (int) (motionEvent.getY() * scale);
                if (x + 120 > bitmap.getWidth()) {
                    int tempWidth = bitmap.getWidth() - 120;
                    //防止圖片寬度過小而產生負值
                    x = tempWidth > 0 ? tempWidth : bitmap.getWidth();
                }
                if (y + 120 > bitmap.getHeight()) {
                    int tempHeight = bitmap.getHeight() - 120;
                    //防止圖片高度過小而產生負值
                    y = tempHeight > 0 ? tempHeight : bitmap.getHeight();
                }
                image2.setImageBitmap(Bitmap.createBitmap(bitmap, x, y,
                        120, 120));
                return false;
            }
        });
    }
}

值得注意的地方:
1、佈局檔案中的
android:adjustViewBounds=”true”
android:scaleType=”centerInside”
這兩句程式碼很重要,因為我的圖片在ImageView中fitCenter顯示,但是ImageView實際卻比圖片顯示的大
這裡寫圖片描述
導致點選圖片顯示以外的地方,都能夠觸發監聽事件
2、OnTouchListener內部的邏輯程式碼編寫要注意當圖片寬或高過小,導致x和y出現負值的情況

相關推薦

實現圖片放大鏡效果

一、準備圖片 在drawable資料夾下放置需要進行輪詢的圖片 二、編寫一個簡單的佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr

實現listview聯動效果且選項多選

   實現效果如圖,點選大洲進行第一個listview資料的重新整理且聯動第二個listview資料更新,正常第二個listview是單選,點選後進行資料重新整理,現在做的是資料多選最後點選確定按鈕進行資料提交 首先實現兩個listview聯動效果: 資料來源如下   "

javascript實現圖片放大鏡效果

當我們在電商網站上購買商品時,經常會看到這樣一種效果,當我們把滑鼠放到我們瀏覽的商品圖片上時,會出現類似放大鏡一樣的一定區域的放大效果,方便消費者觀察商品。今天我對這一技術,進行簡單實現,實現圖片放大鏡效果。 我在程式碼中進行了程式碼編寫的思路的說明和詳細的程

js實現圖片放大鏡效果

一、HTML檔案 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

實現廣告欄圖片無限輪播播放效果

//經常在安卓app中頁面上方放置一個廣告欄,用到的無限輪播程式碼: public class MainActivity extends Activity {// 廣告控制元件private MyPagerGalleryView gallery;// 圓點容器privat

實現區域性介面遮罩效果

背景 列表展示資料時,有些資料因為失效了,需要灰化展示。但是因為每一行資料裡面包含多個view(如包含使用者姓名、性別等等資訊),不方便對每個view進行灰化設定,所以需要一個遮罩層將整行遮蓋來達到灰化效果。大致效果如下: 解決方案 列表的item佈局採用RelativeL

開發客串下美工用三個gif 圖實現中的走馬燈效果

安卓開發客串下美工用三個gif 圖實現安卓中的走馬燈效果   最終效果是這個樣子的          ??????????????? 這個不像跑馬燈,到像是受驚的野馬亂蹦 啊,呵呵,在本地快

實現橫向滑動的卡片效果

最近專案上需要實現這樣效果的一個頁面,本來想找個現成的兩下搞定,但是問了半天度娘也沒招,索性自己琢磨琢磨(這裡邊也少不了同事的幫助),先把最終的效果圖貼上: 理論上講,其本質並不複雜,就是一個viewpager,但是第一次實現這樣的效果還是要花些時間的,具體的程式碼如下:

實現拍照、上傳圖片以及剪下圖片

效果圖: 總結一下專案實現的選擇圖片、拍照、以及剪下圖片,再加一下圖片壓縮,上傳到伺服器等功能 網上有好多關於圖片上傳、拍照的方法,我這只是自己專案的一種方式,之前部落格也是總結過圖集上傳,裡面也包含圖片上傳,拍照的相關程式碼,在這我單獨拿出來總結一下,還有關於呼叫系統

實現水波紋動畫效果

步驟1: 首先如果想實現上圖的動畫效果,首先新建一個類然後去繼承view,然後重寫裡面的構造方法(切記選擇裡面帶有兩個 引數的構造方法,因為佈局檔案中需要用到這個類,一般需要在佈局檔案中用到的類都會選擇帶有兩個引數的構造方 法),然後在佈局檔案中引用這個類就行了,如下我的

實現走馬燈效果 textview 實現字型迴圈滾動效果

使在layout 中 實現文字滾動效果 也就是走馬燈的效果 只需要在響應控制元件裡面加上這幾行程式碼就可以 1              android:singleLine="true"             android:ellipsize="marquee"            

weex開發實戰(5)--利用wxc-tabbar實現類似fragment分頁效果

wxc-tabbar是官方提供的一個tabbar擴充套件,需要安裝weex-components npm install weex-components --save 注意在安卓專案上,src最好寫成 “file://assets/yourpath”<templat

實現網易雲音樂底部播放欄效果之使用自定義BaseActivity實現

起因: 最近在寫一個音樂專案,發現網易雲音樂的底部播放欄看起來不錯,不同的頁面切換也能做到無縫連線,於是自己打算仿造一個。折磨: 1.一開始我看到知乎有大神說使用Activity+Fragment實現

用原生js實現淘寶詳情頁圖片放大鏡效果

這個功能是我在模仿淘寶詳情頁的時候做出來的,最初版本對於非1:1比例的圖片沒有做處理,後續對程式進行了完善和邏輯上修改,形成了當前的程式。廢話不多說,直接進入正題了,先上個效果圖先放上這段功能的html程式碼<div id="full-pic">     <

實現聯網檢視圖片

效果圖 實現原始碼: layout <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.co

用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果

本文轉載於:猿2048網站用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果 1.前言 

JS實例之圖片輪播,實現圖片播放效果

utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

JS實現圖片滾動效果

settime .cn itl family .text rgba plus ++ san   源碼參考菜鳥教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo

jquery實現圖片放大效果

jquery實現圖片放大效果好久沒更新了,先來一發關於jquery圖片放大縮小的代碼直接上代碼前端頁面:<tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">產品相冊</td>

原生JS實現圖片放大鏡插件

spa ont 範圍 display 離開 寬度 部分 gin es2017 前 言   我們大家經常逛各種電商類的網站,商品的細節就需要用到放大鏡,這個大家一定不陌生,今天我們就做一個圖片放大鏡的插件,來看看圖片是如何被放大的……