安卓實現圖片放大鏡效果
一、準備圖片
在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 前 言 我們大家經常逛各種電商類的網站,商品的細節就需要用到放大鏡,這個大家一定不陌生,今天我們就做一個圖片放大鏡的插件,來看看圖片是如何被放大的……