SeekBar+ImageView实现图像动态变化

来源:互联网 发布:淘宝网夏季女装上衣 编辑:程序博客网 时间:2024/06/06 04:07

写在前面的话:本demo实现了SeekBar对ImageView的控制,通过滑动SeekBar,改变ImageView中资源的大小及角度。

demo完成效果

初始化界面和滑动后的效果如下所示:


初始时效果
初始时效果


滑动时效果
滑动时效果


当滑动第一个SeekBar时,可以改变图片的大小(初始为150 * 150,最大为500 * 500),当滑动第二个SeekBar时,可以旋转图片(最大为360度)。

XML布局

布局代码如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="20dp"    tools:context="${relativePackage}.${activityClass}" >    <ImageView        android:id="@+id/image_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:contentDescription="@string/image_view"        android:scaleType="fitCenter"        android:src="@drawable/circle" />    <TextView        android:id="@+id/text_view_1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" />    <SeekBar        android:id="@+id/seek_bar_1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:max="500" />    <TextView        android:id="@+id/text_view_2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" />    <SeekBar        android:id="@+id/seek_bar_2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:max="360" /></LinearLayout>

要点:为了用SeekBar控制图片的大小并使之旋转,应给SeekBar设置属性android:scaleType=”fitCenter”。


activity逻辑实现

activity代码如下所示:

public class MainActivity extends Activity {    private ImageView mImageView;    private SeekBar mSeekBar_1;    private SeekBar mSeekBar_2;    private TextView mTextView_1;    private TextView mTextView_2;    public static final int MIN_WIDTH = 150;    public static final int MIN_HEIGHT = 150;    public static final int INIT_PROGRESS = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findView();        init();        setOnListener();    }    private void init() {        // TODO Auto-generated method stub'        mTextView_1.setText("图像宽度:" + MIN_WIDTH + " 图像高度:" + MIN_HEIGHT);        mTextView_2.setText("旋转角度:" + INIT_PROGRESS);        mImageView.setLayoutParams(new LinearLayout.LayoutParams(MIN_WIDTH,                MIN_HEIGHT));    }    // 为SeekBar设置监听器 改变控制图像    private void setOnListener() {        // TODO Auto-generated method stub        mSeekBar_1.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {            @Override            public void onStopTrackingTouch(SeekBar seekBar) {                // TODO Auto-generated method stub            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {                // TODO Auto-generated method stub            }            @Override            public void onProgressChanged(SeekBar seekBar, int progress,                    boolean fromUser) {                // TODO Auto-generated method stub                int _height = progress + MIN_WIDTH;                int _width = _height;                mImageView.setLayoutParams(new LinearLayout.LayoutParams(                        _width, _height));                mTextView_1.setText("图像宽度:" + _height + " 图像高度:" + _width);            }        });        mSeekBar_2.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {            @Override            public void onStopTrackingTouch(SeekBar seekBar) {                // TODO Auto-generated method stub            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {                // TODO Auto-generated method stub            }            @Override            public void onProgressChanged(SeekBar seekBar, int progress,                    boolean fromUser) {                // TODO Auto-generated method stub                Bitmap _bitmap = ((BitmapDrawable) getResources().getDrawable(                        R.drawable.circle)).getBitmap();                Matrix _matrix = new Matrix();                _matrix.setRotate(progress);                _bitmap = Bitmap.createBitmap(_bitmap, 0, 0,                        _bitmap.getWidth(), _bitmap.getHeight(), _matrix, true);                mImageView.setImageBitmap(_bitmap);                mTextView_2.setText("旋转角度:" + progress);            }        });    }    private void findView() {        // TODO Auto-generated method stub        mImageView = (ImageView) findViewById(R.id.image_view);        mSeekBar_1 = (SeekBar) findViewById(R.id.seek_bar_1);        mSeekBar_2 = (SeekBar) findViewById(R.id.seek_bar_2);        mTextView_1 = (TextView) findViewById(R.id.text_view_1);        mTextView_2 = (TextView) findViewById(R.id.text_view_2);    }}

要点:

  • 通过Matrix的setRotate方法设置图像的旋转。
  • 应为图片设置一个初始宽度和高度。
0 0
原创粉丝点击