Graphics簡單匯總
1、主頁面布局文件
activity_main.xml(僅僅有2個button按鈕)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="testTuPian" android:text="測試圖片處理" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="testDraw" android:text="測試繪制圖形" /> </LinearLayout>
MainActivity.java(啟動2個button)
package com.atguigu.l11_graphics; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void testTuPian(View view) { startActivity(new Intent(this, TuPianTestActivity.class)); } public void testDraw(View view) { startActivity(new Intent(this, DrawTestActivity.class)); } }
2、startActivity(new Intent(this, TuPianTestActivity.class));啟動的界面
上圖布局文件例如以下
activity_tupian_test.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick=<span style="color:#ff0000;">"testBD"</span> android:text="測試Bitmap" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="<span style="color:#ff0000;">testMatrix</span>" android:text="測試圖片的縮放等處理" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="使用Shape做的button" android:background="@drawable/shape_test"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:background="@drawable/image_selector" android:onClick="<span style="color:#ff0000;">clickIV</span>"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="使用Selector+Shape做的button" android:background="@drawable/shape_selector"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/test2" android:text="A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes an extra" /> </LinearLayout>
package com.atguigu.l11_graphics; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Toast; /* * 測試操作圖片的Activity */ public class TuPianTestActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tupian_test); } public void<span style="color:#ff0000;"> testBD</span>(View v) { startActivity(new Intent(this, BitmapTestActivity.class)); } public void <span style="color:#ff0000;">testMatrix</span>(View v) { startActivity(new Intent(this, MatrixTestActivity.class)); } public void <span style="color:#ff0000;">clickIV</span>(View v) { Toast.makeText(this, "點擊了selector", 0).show(); } }
3、將上圖分開來看(從上到下依次展示布局文件或者代碼)
3-1、activity_bitmap.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="保存圖片" android:onClick="saveImage"/> <ImageView android:id="@+id/iv_bitmap1" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <ImageView android:id="@+id/iv_bitmap2" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <ImageView android:id="@+id/iv_bitmap3" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>
BitmapTestActivity.java
package com.atguigu.l11_graphics; import java.io.FileNotFoundException; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.CompressFormat; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.View; import android.widget.ImageView; /* Bitmap: 載入一張圖片數據到內存中, 都能夠封裝成一個Bitmap對象 需求3: 將一個bitmap對象保存到存儲空間中 */ public class BitmapTestActivity extends Activity { private ImageView iv_bitmap1; private ImageView iv_bitmap2; private ImageView iv_bitmap3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bitmap); iv_bitmap1 = (ImageView) findViewById(R.id.iv_bitmap1); iv_bitmap2 = (ImageView) findViewById(R.id.iv_bitmap2); iv_bitmap3 = (ImageView) findViewById(R.id.iv_bitmap3); //1: 載入資源文件裏的圖片資源並顯示 iv_bitmap1.setImageResource(R.drawable.ic_launcher); //2: 使用bitmapfactory做--載入資源圖片 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher); iv_bitmap2.setImageBitmap(bitmap); //載入存儲空間的圖片 Bitmap bitmap2 = BitmapFactory.decodeFile("/storage/sdcard/atguigu.png"); iv_bitmap3.setImageBitmap(bitmap2); } /** * 講bitmap對象保存到存儲空間去 * /data/data/包名/files/save.png */ public void saveImage(View v) { Bitmap bitmap = BitmapFactory.decodeFile("/storage/sdcard/atguigu.png"); try { bitmap.compress(CompressFormat.PNG, 100,openFileOutput("save.png", Context.MODE_PRIVATE)); } catch (FileNotFoundException e) { e.printStackTrace(); } } }
3-2、activity_matrix.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="50dip" android:orientation="horizontal" > <EditText android:id="@+id/et_matrix_scale" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:text="0.25" /> <EditText android:id="@+id/et_matrix_rotate" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:text="30" /> <EditText android:id="@+id/et_matrix_translateX" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:text="10" /> <EditText android:id="@+id/et_matrix_translateY" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:text="10" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="50dip" android:orientation="horizontal" > <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:onClick="scaleBitmap" android:text="縮放" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:onClick="rotateBitmap" android:text="旋轉" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:onClick="translateBitmap" android:text="移動" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:onClick="clearMatrix" android:text="還原" /> </LinearLayout> <ImageView android:id="@+id/iv_matrix_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:scaleType="matrix"/> </LinearLayout>
MatrixTestActivity.java
package com.atguigu.l11_graphics; import android.app.Activity; import android.graphics.Matrix; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.ImageView; /* Matrix 。中文裏叫矩陣。高等數學裏有介紹。在圖像處理方面,主要是用於平面的縮放、平移、旋轉等操作 */ public class MatrixTestActivity extends Activity { private EditText et_matrix_scale; private EditText et_matrix_rotate; private EditText et_matrix_translateX; private EditText et_matrix_translateY; private ImageView iv_matrix_icon; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_matrix); et_matrix_scale = (EditText) findViewById(R.id.et_matrix_scale); et_matrix_rotate = (EditText) findViewById(R.id.et_matrix_rotate); et_matrix_translateX = (EditText) findViewById(R.id.et_matrix_translateX); et_matrix_translateY = (EditText) findViewById(R.id.et_matrix_translateY); iv_matrix_icon = (ImageView) findViewById(R.id.iv_matrix_icon); } /** * 縮放圖片 */ Matrix matrix = new Matrix(); public void scaleBitmap(View view) { // 得到縮放比例--float類型 float sacle = Float.parseFloat(et_matrix_scale.getText().toString()); // 對縮放圖片對象設置xy軸縮放比例 matrix.postScale(sacle, sacle); iv_matrix_icon.setImageMatrix(matrix); } /** * 旋轉圖片 */ public void rotateBitmap(View view) { float degrees = Float.parseFloat(et_matrix_rotate.getText().toString()); matrix.postRotate(degrees); iv_matrix_icon.setImageMatrix(matrix); } /** * 移動圖片 */ public void translateBitmap(View view) { float dx = Float.parseFloat(et_matrix_translateX.getText().toString()); float dy = Float.parseFloat(et_matrix_translateY.getText().toString()); matrix.postTranslate(dx, dy); iv_matrix_icon.setImageMatrix(matrix); } /** * 還原操作 */ public void clearMatrix(View view) { //清除數據 matrix.reset(); iv_matrix_icon.setImageMatrix(matrix); } }
MatrixTestActivity.java
package com.atguigu.l11_graphics; import android.app.Activity; import android.graphics.Matrix; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.ImageView; /* Matrix ,中文裏叫矩陣。高等數學裏有介紹。在圖像處理方面,主要是用於平面的縮放、平移、旋轉等操作 */ public class MatrixTestActivity extends Activity { private EditText et_matrix_scale; private EditText et_matrix_rotate; private EditText et_matrix_translateX; private EditText et_matrix_translateY; private ImageView iv_matrix_icon; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_matrix); et_matrix_scale = (EditText) findViewById(R.id.et_matrix_scale); et_matrix_rotate = (EditText) findViewById(R.id.et_matrix_rotate); et_matrix_translateX = (EditText) findViewById(R.id.et_matrix_translateX); et_matrix_translateY = (EditText) findViewById(R.id.et_matrix_translateY); iv_matrix_icon = (ImageView) findViewById(R.id.iv_matrix_icon); } /** * 縮放圖片 */ Matrix matrix = new Matrix(); public void scaleBitmap(View view) { // 得到縮放比例--float類型 float sacle = Float.parseFloat(et_matrix_scale.getText().toString()); // 對縮放圖片對象設置xy軸縮放比例 matrix.postScale(sacle, sacle); iv_matrix_icon.setImageMatrix(matrix); } /** * 旋轉圖片 */ public void rotateBitmap(View view) { float degrees = Float.parseFloat(et_matrix_rotate.getText().toString()); matrix.postRotate(degrees); iv_matrix_icon.setImageMatrix(matrix); } /** * 移動圖片 */ public void translateBitmap(View view) { float dx = Float.parseFloat(et_matrix_translateX.getText().toString()); float dy = Float.parseFloat(et_matrix_translateY.getText().toString()); matrix.postTranslate(dx, dy); iv_matrix_icon.setImageMatrix(matrix); } /** * 還原操作 */ public void clearMatrix(View view) { //清除數據 matrix.reset(); iv_matrix_icon.setImageMatrix(matrix); } }3-3、
shape_test.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 半徑大小 --> <corners android:radius="10dp" /> <!-- 邊框 --> <stroke android:dashGap="2dp" android:dashWidth="2dp" android:width="3dp" android:color="#FF7F00" /> <size android:height="50dp" android:width="40dp" /> <!-- 顏色 --> <solid android:color="#FFD700"></solid> <!-- 覆蓋solid --> <gradient android:startColor="#ffffff" android:centerColor="#EE4000" android:endColor="#ffffff" android:angle="90"/> </shape>
3-4、
image_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 特別的狀態放在前面 --> <item android:drawable="@drawable/main_index_search_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/main_index_search_normal"/> </selector>
3-5、
<?xml version="1.0" encoding="utf-8"?
> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true"> <shape> <corners android:radius="4dp"></corners> <stroke android:width="2dp" android:color="#EEAD0E" android:dashWidth="4dp" android:dashGap="2dp"></stroke> <size android:height="40dp"></size> <gradient android:startColor="#ffffff" android:centerColor="#ffffff" android:endColor="#E0FFFF"/> </shape> </item> <item> <shape> <corners android:radius="2dp"></corners> <stroke android:width="2dp" android:color="#EE7AE9"></stroke> <size android:height="40dp"></size> <solid android:color="#E0FFFF"></solid> </shape> </item> </selector>
3-6、(9patch圖片)
4、startActivity(new Intent(this, DrawTestActivity.class));啟動以下圖片
DrawTestActivity.java
package com.atguigu.l11_graphics; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.drawable.ShapeDrawable; import android.graphics.drawable.shapes.OvalShape; import android.os.Bundle; import android.view.View; public class DrawTestActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 顯示自己定義視圖 setContentView(new MyView(this)); } /** * 自己定義myview視圖 */ private class MyView extends View { //成員變量---可畫的圖形對象 private ShapeDrawable shapeDrawable; public MyView(Context context) { super(context); // 初始化一個圖形對象---參數是橢圓 shapeDrawable = new ShapeDrawable(new OvalShape()); // 通過橢圓得到畫筆,通過畫筆設置顏色 shapeDrawable.getPaint().setColor(Color.RED); // 指定位置left top right bottom shapeDrawable.setBounds(10, 10, 200, 100); } // 顯示界面視圖效果 畫布 @Override protected void onDraw(Canvas canvas) { //設置畫布的顏色 canvas.drawColor(Color.GREEN); // 將圖像畫到畫布上 shapeDrawable.draw(canvas); //指定畫筆 Paint paint = new Paint(); //通過畫筆設置顏色 paint.setColor(Color.BLUE); //設置字體大小 paint.setTextSize(30); //設置平滑度 paint.setAntiAlias(true); //在畫布上寫上字體 canvas.drawText("你好", 10, 200, paint); } } }
Graphics簡單匯總