Androidstudio制作一个imageviewer,四张图片都在gridview里,点击一张图片,它会填满屏幕,可以用滑动条调整它的透明度。sliding finger以切换图片。请生成详细代码。
时间: 2024-04-30 07:22:06 浏览: 160
image-viewer1.7.tar.gz_show_viewer
以下是基于 Android Studio 制作一个 Image Viewer 的详细代码:
1. 首先,我们需要在布局文件中添加一个 GridView,同时设置其列数为 2。
activity_main.xml
```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"/>
</RelativeLayout>
```
2. 接下来,我们需要为 GridView 提供适配器。在本例中,我们使用了内部类 MyAdapter 来实现适配器。
MainActivity.java
```
import android.os.Bundle;
import android.view.View;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SeekBar;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
GridView gridView;
SeekBar opacitySeekBar;
int[] images = {
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView = findViewById(R.id.grid_view);
opacitySeekBar = findViewById(R.id.opacity_seekbar);
MyAdapter adapter = new MyAdapter(MainActivity.this, images);
gridView.setAdapter(adapter);
}
private class MyAdapter extends BaseAdapter {
private Context context;
private int[] images;
public MyAdapter(Context context, int[] images) {
this.context = context;
this.images = images;
}
@Override
public int getCount() {
return images.length;
}
@Override
public Object getItem(int position) {
return images[position];
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
500));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(images[position]);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showFullScreenDialog(images[position]);
}
});
return imageView;
}
}
private void showFullScreenDialog(int imageResId) {
final Dialog dialog = new Dialog(MainActivity.this,
android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.setCancelable(true);
dialog.setContentView(R.layout.dialog_fullscreen_image);
ImageView imageView = dialog.findViewById(R.id.image_view);
imageView.setImageResource(imageResId);
opacitySeekBar.setProgress(255);
opacitySeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
imageView.setAlpha(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
dialog.show();
}
}
```
3. 在代码中,我们使用了另外一个布局文件 dialog_fullscreen_image.xml 来定义全屏 Dialog 显示图片。
dialog_fullscreen_image.xml
```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"/>
<SeekBar
android:id="@+id/opacity_seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:max="255"/>
</RelativeLayout>
```
4. 到此为止,我们已经完成了 Image Viewer 的制作。当用户点击 GridView 中的一个图片时,会触发 showFullScreenDialog() 方法打开一个全屏 Dialog 显示该图片。该 Dialog 中还包括了一个 SeekBar,用户可以通过滑动来调整该图片的透明度。
阅读全文