[英]Image zoom in upon click
I have an activity that populates images in a horizontal scrollview, where I have around 4 pictures that user can navigate through. 我有一个活动,该活动以水平滚动视图填充图像,其中有大约4张图片可供用户浏览。 Because the individual images sizes are small, I would want that when an image is click it an aesthetically pleasing popup appears displaying the image taking almost the entire activity with the title of image displayed on top of the popup, and a button to close the popup at the bottom of the image. 因为单个图像的尺寸很小,所以我希望在单击图像时出现一个美观的弹出窗口,其中显示的图像几乎占据了整个活动,并且图像标题显示在弹出窗口的顶部,并且有一个按钮用于关闭弹出窗口在图片的底部。
If possible, It would also be nice that when the image is zoom in a user is able to navigate left and right among the zoom in images, as oppose to closing it and then clicking another one just to see it in a larger view. 如果可能的话,当放大图像时,用户可以在放大图像中向左和向右导航,这与关闭图像然后单击另一个图像只是为了在较大视图中查看相反。
I have conducted a bit of research, but is still experiencing difficulties. 我进行了一些研究,但仍然遇到困难。
Below is the code for the activity that displays images: 以下是显示图像的活动的代码:
public class CasualEventsSingleItemActivity extends Activity {
// Declare Variables
String list_item_name;
String list_item_description;
String list_item_price;
String list_item_location;
String single_list_item_description;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_events_single_item);
ImageLoader mImageLoader = new ImageLoader(Volley.newRequestQueue(this),
new ImageLoader.ImageCache() {
private final LruCache<String, Bitmap>
cache = new LruCache<String, Bitmap>(20);
@Override
public Bitmap getBitmap(String url) {
return cache.get(url);
}
@Override
public void putBitmap(String url, Bitmap bitmap) {
cache.put(url, bitmap);
}
});
Intent i = getIntent();
list_item_name = i.getStringExtra("list_item_name");
list_item_location = i.getStringExtra("list_item_location");
single_list_item_description = i.getStringExtra("single_list_item_description");
TextView txtname = (TextView) findViewById(R.id.name);
TextView txtlocation = (TextView) findViewById(R.id.location);
TextView txtsdescription = (TextView) findViewById(R.id.sdescription);
NetworkImageView hsvimage1 = (NetworkImageView) findViewById(R.id.hsvimage1);
NetworkImageView hsvimage2 = (NetworkImageView) findViewById(R.id.hsvimage2);
NetworkImageView hsvimage3 = (NetworkImageView) findViewById(R.id.hsvimage3);
// Get image URLs from your previous network request...
// I could not determine where this is stored from code in your question.
String url1 = "list_item_bac"; // e.g. http://example.com/images/image1.png
String url2 = "list_item_bac";
String url3 = "list_item_bac ";
// Set the URL of the image that should be loaded into this view, and
// specify the ImageLoader that will be used to make the request.
hsvimage1.setImageUrl(url1, mImageLoader);
hsvimage2.setImageUrl(url2, mImageLoader);
hsvimage3.setImageUrl(url3, mImageLoader);
// Set results to the TextViews
txtname.setText(list_item_name);
txtlocation.setText(list_item_location);
txtsdescription.setText(single_list_item_description);
Button mConfirm2 = (Button)findViewById(R.id.bConfirm2);
mConfirm2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ParseUser currentUser = ParseUser.getCurrentUser();
// Create the class and the columns
currentUser.saveInBackground();
currentUser.put("ActivityName", list_item_name);
currentUser.saveInBackground(new SaveCallback() {
@Override
public void done(ParseException e) {
setProgressBarIndeterminateVisibility(false);
if (e == null) {
// Success!
Intent intent = new Intent(CasualEventsSingleItemActivity.this, usermatch.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
startActivity(intent);
}
else {
AlertDialog.Builder builder = new AlertDialog.Builder(CasualEventsSingleItemActivity.this);
builder.setMessage(e.getMessage())
.setTitle(R.string.signup_error_title)
.setPositiveButton(android.R.string.ok, null);
AlertDialog dialog = builder.create();
dialog.show();
}
}
});
//CasualEventsSingleItemActivity.this.startActivity(new Intent(CasualEventsSingleItemActivity.this, MatchingActivity.class));
}
});
}
}
Below is the layout code 下面是布局代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/blue_bac3"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_marginRight="15dp"
android:alpha="0.9"
android:paddingBottom="3dp"
android:shadowColor="#000000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="0.01"
android:textColor="#82CAFF"
android:textSize="24sp" />
<TextView
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/name"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:alpha="0.8"
android:paddingBottom="5dp"
android:shadowColor="#000000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="0.01"
android:textAlignment="center"
android:textColor="#f2f2f2"
android:textSize="16sp" />
<ImageView
android:id="@+id/dividertop"
android:layout_width="370dp"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_below="@+id/location"
android:alpha="0.6"
android:background="@drawable/divider11"
android:paddingBottom="3dp" />
<ImageView
android:id="@+id/dividerbottom"
android:layout_width="370dp"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_below="@+id/vsvdescription"
android:alpha="0.6"
android:background="@drawable/divider11"
android:paddingBottom="3dp" />
<ImageView
android:id="@+id/image_head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#000000"
android:padding="1dp" />
<HorizontalScrollView
android:id="@+id/isgallery"
android:layout_width="370dp"
android:layout_height="90dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/dividerbottom"
android:layout_marginTop="8dp"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/hsvimage1"
android:layout_width="148dp"
android:layout_height="90dp"
android:layout_marginRight="6dp"
android:layout_alignParentRight="true"
android:background="#fff"
android:padding="1dp" />
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/hsvimage2"
android:layout_width="148dp"
android:layout_height="90dp"
android:layout_marginRight="6dp"
android:layout_alignParentRight="true"
android:background="#000000"
android:padding="1dp" />
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/hsvimage3"
android:layout_width="148dp"
android:layout_height="90dp"
android:layout_marginRight="6dp"
android:layout_alignParentRight="true"
android:background="#CCC"
android:padding="1dp" />
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/hsvimage4"
android:layout_width="148dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:background="#000000"
android:padding="1dp" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="@+id/bConfirm2"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_below="@+id/isgallery"
android:layout_centerHorizontal="true"
android:alpha="0.7"
android:layout_marginTop="10dp"
android:background="@drawable/gray_bac"
android:text="Confirm"
android:textColor="#2B3856"
android:textStyle="bold" />
<ScrollView
android:id="@+id/vsvdescription"
android:layout_width="370dp"
android:layout_height="250dp"
android:layout_marginTop="7dp"
android:layout_marginBottom="7dp"
android:padding="5dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/dividertop"
>
<RelativeLayout
android:orientation="vertical"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/sdescription"
android:layout_width="370dp"
android:layout_height="250dp"
android:gravity="center"
android:alpha="0.65"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Thanks in advance, and if you require any clarification, let me know. 预先感谢您,如果您需要任何澄清,请告诉我。
Use the GestureImageView as described here 按照此处所述使用GestureImageView
https://github.com/jasonpolites/gesture-imageview/blob/master/main/src/com/polites/android/GestureImageView.java https://github.com/jasonpolites/gesture-imageview/blob/master/main/src/com/polites/android/GestureImageView.java
This will provides zoom functionalities. 这将提供缩放功能。 Although I am not sure about your other requirement wherein you want to scroll in zoomed state 虽然我不确定您要在缩放状态下滚动的其他要求
Volley's original NetworkImageView is not zoomable. Volley原始的NetworkImageView无法缩放。
You need to put extensions on volley for zooming feature. 您需要在齐射上添加扩展功能以实现缩放功能。
Take a look at https://github.com/naver/volley-extensions/tree/master/volley-views
看看https://github.com/naver/volley-extensions/tree/master/volley-views
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.