写在前面的话:本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方法设置图像的旋转。
- 应为图片设置一个初始宽度和高度。