1. 程式人生 > >Android Drawable基礎(五)

Android Drawable基礎(五)

1.ClipDrawable(裁剪)

ClipDrawable對應於標籤< clip >,它可以根據自己當前的level來裁剪另一個Drawable.

  1. 語法
<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

?:android:clipOrientation與android:gravity 配合使用。 android:clipOrientation可選屬性:

說明
horizontal 水平裁剪
vertical 垂直裁剪

android:gravity可選屬性:

說明
top 將內部drawable放在容器頂部,不改變大小。如果豎直裁剪,從底部開始裁剪
bottom 將內部drawable放在容器底部,不改變大小。如果豎直裁剪,從頂部開始裁剪
left 將內部drawable放在容器左邊,不改變大小。如果水平裁剪,從右邊開始裁剪
right 將內部drawable放在容器右邊,不改變大小。如果水平裁剪,從左邊開始裁剪
center_vertical 將內部drawable豎直居中,不改變大小, 如果豎直裁剪,從上下同時開始裁剪
fill_vertical 將內部drawable在豎直方向上填充,如果為豎直裁剪,僅當level為0時,才能有裁剪行為
center_horizontal 將內部drawable水平居中,不改變大小, 如果水平裁剪,從左右同時開始裁剪
fill_horizontal 將內部drawable在水平方向上填充,如果為水平裁剪,僅當level為0時,才能有裁剪行為
center 將內部drawable在水平和豎直方向同時居中, 不改變大小, 如果豎直裁剪,從上下同時開始裁剪,如果水平裁剪,從左右同時開始裁剪
fill 將內部drawable在水平方向和豎直方向上填充,如果為水平裁剪,僅當level為0時,才能有裁剪行為
clip_vertical 裁剪基於垂直
clip_horizontal 裁剪基於水平
  1. 使用:新建xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/in"
    android:clipOrientation="vertical"
    android:gravity="top"
    />


表示將in資源垂直底部裁剪

  1. 佈局中引用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/clip_bg" />

</LinearLayout>
  1. Activity中設定level

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private int level = 0;
    private SeekBar seekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
            ClipDrawable clipDrawable = (ClipDrawable) imageView.getDrawable();
            clipDrawable.setLevel(8000);
    }
}

  1. 跟隨SeekBar進度裁剪圖片的Demo
  • 新建資源
  • 佈局引用如上,新增程式碼
 <SeekBar
        android:id="@+id/seekBar"
        android:max="100"
        android:min="0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="UnusedAttribute" />
  • Activity中監聽SeekBar的進度並設定level
public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private SeekBar seekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.iv1);

        seekBar =findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                ClipDrawable clipDrawable = (ClipDrawable) imageView.getDrawable();
                //10000 * (progress/100)= 100*progress
                clipDrawable.setLevel(progress*100);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
    }
}
  • 效果 在這裡插入圖片描述

2.ScaleDrawable(縮放)

ScaleDrawable對應標籤< scale >,它可以根據自己的level將指定的Drawable縮放到一定比例。要使ScaleDrawable可見,讓level != 0

  1. 語法
<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />
android:scaleHeight    對高進行縮放
android:scaleWidth     對寬進行縮放

android:scaleGravity屬性如下:

說明
top/bottom/ left/right 位於容器上/下/左/右 ,不改變大小(left為預設值)
center_vertical/center_horizontal/center 位於容器垂直/水平/水平和垂直 ,不改變大小
fill_vertical/fill_horizontal 按需擴大垂直大小/水平大小,使其完全適合容器
clip_vertical/clip_horizontal 裁剪
  1. 新建xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/in"
    android:scaleHeight="50%"
    android:scaleWidth="50%"
    android:scaleGravity="center"
    />


  1. 引用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/scale_bg" />
</LinearLayout>
  1. 設定level
public class MainActivity extends AppCompatActivity {
    private ImageView imageView;
    private ImageView imageView1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView1 = findViewById(R.id.iv2);
        ScaleDrawable scaleDrawable = (ScaleDrawable) imageView1.getDrawable();
        scaleDrawable.setLevel(1);
    }
}

level 範圍 0-10000

  1. 效果 在這裡插入圖片描述